ぼくのかんがえたさいきょうのDevOps実現構成
はじめに 昨年、AWS のインフラを運用・監視する上で使いやすいと思ったサービスを組み合わせて構成図を紹介した記事、「【AWS】ぼくのかんがえたさいきょうの運用・監視構成」が投稿したその日の Qiita のトレンド 1 位になり、はてなブックマークのテクノロジー分野でトップを飾りました。（たくさんの方に見ていただき感謝してます！） 本記事では「ぼくのかんがえたさいきょうの運用・監視構成」の続編として「ぼくのかんがえたさいきょうの DevOps 実現構成」を紹介させていただきます。あくまでも「ぼくのかんがえた」なので私個人の意見として受け入れていただけると助かります。 前回の記事でもお伝えいたしましたが、各個人・企業によって環境は違うと思いますし、使いやすいサービスは人それぞれだと思うので、これが正解という訳ではありません。一個人の意見として参考にしてただければ幸いです。 また、こちらの記事
昨年書いたサーバーサイドエンジニアとして2020年に使った技術1の2021年版となります。 昨年と同じく、冒頭の画像はwakatimeによる2021年1月1日から12月26日までのプログラミング言語使用率です。2位はTypeScript、3位はYAML、4位はTerraformです。 立場 フリーランスで、主にRailsやAWSを使用しているサービスの運用、開発に関わっています。いくつもの会社を見てきた訳ではなく、数社に深く関わっている1都合上、視野が狭いかもしれません。(昨年と同じ) 今年公開している成果については以下です。 Agones移行物語 - Kubernetes Meetup Tokyo 42 #k8sjp｜うなすけ｜note なぜ我々はクラウドゲーミング基盤をKubernetesに移行したのか #CNDT2021｜うなすけ｜note Repro のサーバーサイド開発環境を M
Goの良さを好きなだけ語りたい
はじめに サークル内部向けに書いていた記事ですがZennにも供養します。 Tsuzuと申します。早稲田大学のデジタル創作サークルMISWでSysAdとかWeb班長をしています。引退目前の身です。 Goが10周年らしいです。おめでとうございます。 私自身もGoを書き始めて4年半ほどが経過しました。 以前はC++をよく使っていたのですが最近ではWebフロントエンド以外の開発ではGoを利用することがほとんどです。 今回はKibela活性化の目的も含めてGoの良さを思う存分語ろうと思います。 HashiCorpというTerraform、Vaultなどを始めとする様々なGoで開発されたソフトウェアやSaaSを提供している会社があります。 HashiCorpが開発している一般に一番有名なツールはVagrantでしょうか。(VagrantはRubyですが) HashiCorpのCEOであるMitchel
Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を送っていた。 その過程で、こんなようなことを考えるようになったので、今回はこの辺りの話を書き残しておこうと思う（何回か X に同じ旨の POST は上げていたけど、一回もちゃんとまとめてなかったので）。 RSC がない頃の、別の言い方をすると getServerSideProps を使っていた頃の、Next.js におけるアプリケーションの設計は、トラディショナルな MVC にかなり近しい。 ここでいう MVC は、Sp
はじめに The Bezos Mandateという文書があります。日本語に訳すと「ベゾスのお達し」とか「ベゾスの勅令」でしょうか。 言わずと知れたAmazon.comのCEO、ジェフ・ベゾスが開発チームに通達した内容です。 これが（元Amazon.com従業員によって）公開されたのは2011年ですが、ベゾスがこのお達しを出したのは2002年前後です。17年経過した現在でも真理をついているどころかようやく時代がベゾスに追いついたかという感想です。 この記事ではThe Bezos Mandateの紹介と、僭越ながら補足説明も行います。 お達しの内容 原文は元Amazon.com従業員のGoogleエンジニア（公開当時）、Steve Yeggeによって公開されました。 Google+にStevey's Google Platforms Rantというタイトルで、Amazon.comと比べたGoo
吉祥寺.pm28 でお話ししました https://kichijojipm.connpass.com/event/236031/ 追記：Podcast で解説した https://anchor.fm/wantedly-dev/episodes/--GraphQL--w-Altech-e1edkrv
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
6/16(金) は、久々のオフライン開催の吉祥寺.pm #33でした。懇親会含め楽しませてもらいました！主催のid:magnoliak ありがとうございました！ ここでは、話したことを書いてみたいと思います。 まず最初に、久々のオフライン開催おめでとうございます！いや〜〜〜、主催のmagnoliaさんよかったですね！おめでとうございます！ 改めて、こんにちは。こばけんと言います。 エンジニア組織開発責任者をしたり、開発生産性の可視化サービスを作っていました。 今は、はてなさんやDiverseさんで業務委託をしながら、起業の準備をしています。 技術コミュニティでは、Japan Perl Associationの理事として、YAPCという技術カンファレンスの運営やPerlのドキュメントを整備するワーキング・グループを運営しています。 2019年にYAPC::Tokyoのリーダーをしていたのです
より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？ 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変
GraphQL で変わったこと・変わらなかったこと / graphql changing and unchanging
吉祥寺.pm22 https://kichijojipm.connpass.com/event/177459/
なぜその API は使われないのか？ API の活用を拒む3つの壁とその対策 - CData Software Blog
こんにちは！ CData Software Japan リードエンジニアの杉本です。 大変ありがたいことに、最近あるSaaSを提供する会社さんから「リリース前のAPIを触ってみてフィードバックをくれませんか？」と依頼を受けました。 私は以前こんな記事 を公開するほど、APIどっぷりな人間なのですが、数多くの SaaS APIを触ってきてよく考えることがあります。 それは SaaS APIというサービス・プロダクトそのものを成長させる上で、もっとも重要なことは「顧客・デベロッパーが、そのAPIをどれだけスムーズにキャッチアップできるか？」という点に尽きるのではないか？ というものです。 以下のグラフはAPI管理ツールを提供するSmartBearのAPI調査において、APIドキュメントで最も重要な要素とは何か？ というアンケート結果のランキングですが、ExamplesやAuthenticati
AWS re:Invent 2020の会期中に発表された新サービス/アップデートのまとめです。 今年も、後から出来るだけ素早く簡単に振り返ることができるようにまとめました！ 凡例 (無印) 新サービス (Update) 既存サービスのアップデート (APN) パートナー制度に関連したリリース/アップデート 12/1 (火) 今年の開幕は「Amazon EC2 Mac instances」でした。 Amazon EC2 Mac instances macOS用のAmazon Elastic Compute Cloud （EC2） Macインスタンス EC2 Macインスタンスを使用すると、iPhone、iPad、Mac、Apple Watch、Apple TV、Safari用のアプリ開発者は、macOS環境を数分でプロビジョニングしてアクセスし、必要に応じて容量を動的に拡張し、AWSの従量課
まえがき アクセシビリティーの観点からWebサイトを診断し、AIプラットフォームを利用して得た情報をもとにベストプラクティスを提案してくれるオープンソースのWebサービス「Visible」を開発しました。 WebサイトURL: https://visi.dev GitHubリポジトリ（Starください！）: https://github.com/visible/visible GoogleのLighthouseなど、Webサイトの診断を行ってくれるサービスは以前からありましたが、診断だけではなく改善点の提案も行う新しいサービスになっています。また、アクセシビリティーに関する理解を深めてもらえるように工夫をした設計にしていたり、コマンドライン版ではスタンドアロンで実行可能なようになっています。 2020年度の「独創的アイデアと卓越した技術を持つ小中高生クリエータ支援プログラム」未踏ジュニアに
Web フロントエンドにおけるコロケーション (co-location) という考え方について - mizdra's blog
Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド
前置き この記事で紹介するアーキテクチャはあくまで机上論であり、筆者が実際にこれらのアーキテクチャでサービスを運用したことがあるわけではありません。 そのため、考慮漏れ等あるかもしれません。その際はご指摘いただけますと幸いです。 モチベーション 個人開発でアプリケーションを作って運用したい！ お金は極力かけたくない！ けどいい感じのツールを組み合わせてクールなアーキテクチャにしたい！ 対象とするアプリケーションの概要 ブラウザで動くウェブアプリケーション 認証機能を持つ DBはNoSQLではなくRDB アプリケーション本体とは別に管理画面アプリケーションが必要 以上を前提として考えました。 ぼくのかんがえたさいきょうあーきてくちゃ こちらです。 コンポーネントごとに解説させてください。 フロントサーバー Next.js on Vercelです。 こちらはもはや説明不要の王道構成かと思います
Webフロントエンド再設計: レイヤードアーキテクチャの導入 ~ 高品質なコードを実現するために ~
こんにちは！ 私はしばもと（@handle-name silverbirder）と申します。株式会社マネーフォワードでWebフロントエンド開発を担当しています。最近、ChatGPTの進化に驚くばかりですね。このブログ記事は、ChatGPTの力を借りて執筆しています。 今回、私が3ヶ月間取り組んできたWebフロントエンドのレイヤードアーキテクチャを用いたリアーキテクチャについてお話ししたいと思います。Webフロントエンド分野は他の分野に比べて変化が激しいため、適切なコードベース設計がなされないと、保守性がすぐに低下してしまいます。 次のような苦労をされた経験がある方々に、ぜひこの記事を読んで頂きたいです。 「どこからコードを読んだら良いか、書いたら良いか悩む」 「何かを変更すると、関係ない部分も変更してしまう」 「無駄にGraphQLのデータを参照している」 今回お話する設計題材となる対象プ
メルカリJP Webチームの@urahiroshiです。 Webチームでは、メルカリWebのマイクロサービス化や機能開発を行なっています。メルカリWebのマイクロサービス化の概要については、昨年のTech Conferenceの資料がよくまとまっているので、そちらを参照していただけると良いかと思います。 https://speakerdeck.com/mercari/mtc2018-web-application-as-a-microservice-3a161f5c-07fa-4dca-99e9-bd0e8feeeddf 現在、メルカリWebのトップページはマイクロサービス環境から配信されており、他のページも随時マイクロサービス環境に移行していく予定です。 この記事では、マイクロサービス環境で導入した、メルカリWebの新しいリリースフローについて記載します。 まずメルカリWebのマイクロサ
こんにちは、クックパッドで最近はモバイルアプリを離れもっぱらウェブアプリを作っている @morishin です。 先日、社内で「モダンウェブフロントエンド勉強会」と題して React, Next.js, Core Web Vitals, SSR, CSR, SSG, ISR, SSR Streaming, React Server Component といったキーワードに触れつつ、昨今のウェブ開発事情について話をしました。せっかくなのでその内容の共有と、勉強会を開催した動機などを紹介したいと思います。 この話は fukabori.fm でも取り上げていただいてお話ししたので、よければそちらもご視聴ください。 fukabori.fm 背景・動機 クックパッドのウェブアプリケーションは10年以上もの間 Ruby on Rails で開発されてきましたが、2020年から一部のページは Next.
一休.com レストランを開発している所澤です。この記事は一休.comアドベントカレンダーの10日目の記事です。 先日、一休.comレストランの管理画面をリニューアルしました。 この記事ではその際にAPIの実装方法として採用したGraphQLについてフロントエンド視点で利点や使い所について述べます。 GraphQLについて以下の記事がわかりやすかったです。 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub｜若手Webエンジニアのキャリアを考える！ 短いまとめ 新しくAPIサーバーを書くなら是非GraphQLで！ というくらい良かった Apolloのエコシステムに乗り切らなくてもいい。ふつうのRESTfulなAPIサーバーの代わりに、くらいの気軽さでGraphQLを採用してもいい プロジェクトの概要 今回リニューアルした一休.comレ
Disclosure of a vulnerability that allows the theft of visitors' email addresses using Medium's custom domain feature / Mediumの独自ドメインプランを使って訪問者のメールアドレスが窃取できる脆弱性の開示
0_medium_vuln_en.md Disclosure of a vulnerability that allows the theft of visitors' email addresses using Medium's custom domain feature Author: mala Introduction This article describes a vulnerability in a web service called Medium that allows you to steal visitors' e-mail addresses by using custom domain plan of Medium. This is done as my personal activity and is not related to my organization.
The new wave of Javascript web frameworksMake sense of the proliferation of new Javascript web frameworks. A deep dive into the problems at scale and the recent evolution of innovation. IntroductionStaying current in the Javascript ecosystem is not for the faint of heart. It’s challenging for those entering the industry to follow what’s happening amongst the new libraries, frameworks, concepts, an
はじめに@typesスコープを管理しているDefinitely Typedは、Microsoftから支援を受けているものの、Microsoftの脆弱性報奨金制度におけるセーフハーバーの対象ではありません。1 本記事は、公開されている情報を元に脆弱性の存在を推測し、実際に検証することなく潜在的な脆弱性として報告した問題に関して説明したものであり、無許可の脆弱性診断行為を推奨することを意図したものではありません。 Definitely Typedに脆弱性を発見した場合は、Definitely Typedのメンバーへ報告してください。 要約Definitely Typedのプルリクエスト管理Botに脆弱性が存在し、悪意のあるプルリクエストをDefinitelyTyped/DefinitelyTypedリポジトリへマージすることが可能だった。 これにより、npm上の@typesスコープ配下に存在す
主にフロントエンドを開発している、ぼくがかんがえたさいきょうのVSCodeを紹介します。 便利な設定, キーバインド集だけでも参考にしていただけると幸いです。 2023年度版 拡張機能 まずは言語問わず使えるものを紹介していきます。 Japanese Language Pack for Visual Studio Code vscodeを日本語にする。 Path Intellisense ファイル名を autocompletes します。 GitLens — Git supercharged commit単位でのファイル比較、最新のcommit内容表示 REST Client vscode上でgetやpostなどのHTTPリクエストを送信できます。 また、GraphQLにも対応しているみたいです。 Todo+ コメントにToDo: を入れるとToDoを作成することができる。 例外処理を入れ
一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog
こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案から、合意形成までの流れ 移行後の開発プロセスがどう変わったか 扱わない話題 Playwright など、記事内で扱う技術要素自体の詳細説明 移行作業自体の詳細 テストコードの設計・実装に関する具体的なテクニック なお、本記事では便宜上、移行前の E2E テストを「旧テスト基盤」移行後を「新テスト基盤」と呼称します。 届出書類機能について E2Eテストに限らず、テストというのはプロダクトの特性によって最適な手法は大きく変わ
はじめに こんにちは、retail HUBで Software Engineer をしているほんだです。 今回は私が現在着手している事業譲渡されたアプリを社内で持続的なプロダクト開発を行える状態にするリプレイスプロジェクトをどのように行っているか紹介しようと思います。 この記事ではリプレイスを行うにあたってどのようなことを課題に感じてその課題に対してどのような解決策をとったか主にサーバーの実装について説明しています。 ネットスーパーアプリとは 現在弊社ではネットスーパーアプリとして Web アプリとスマホアプリの二つのシステムを提供しています。 Web アプリは販促コンテンツの設定や売り上げの管理・集計を行うことが可能な管理システムと受け取り方法に応じた価格変更や送料変更にも対応し、消費者の柔軟な買い物を実現するお客様向けアプリを 17 の小売り様に、スマホアプリでは Web アプリのお客
Rails+Next.jsでGraphQLを導入する時に考えたこと - Timee Product Team Blog
こんにちは、タイミー開発プラットフォームチームで業務委託として働いている宮城です。 タイミーはリリースから4年が経過したプロダクトで、2022年の前半から一部領域でGraphQLを利用し始め現在導入を進めています。 本記事では、GraphQLをプロダクトに導入する上で判断に迷った箇所や課題に対して、タイミーでの意思決定とその理由を紹介します。参考にしていただければ幸いです。 GraphQLの選定理由についてはこの記事では触れませんが、CTOの@kameike が以下のイベントで詳しく紹介する予定です。まだ参加申し込みは可能ですので、興味がある方はぜひ合わせてご覧ください。 timeedev.connpass.com なお、本記事のタイトルはソウゾウさんの以下の記事にインスパイアされています。 engineering.mercari.com GraphQLの「Getting Startedの
はじめに こんにちは、株式会社マイベストでフロントエンドのテックリードをしているteppeitaです。 弊社が運営している mybest の技術スタックをVueからReactに移行したので、その時の話を共有したいと思います💪 mybestのフロントエンド紹介 まずはイメージしやすくするために、簡単にmybestのフロントエンドについてご紹介します。 フロントエンドの技術構成 - TypeScript - React - ApolloClient（APIがGraphQLです） - Storybook（VRTやinteraction testsを実行しています） - Jest - Cypress ↑少し前まで、ReactのところがVueでしたが、リプレイスしました。今回はその話です。 画面構成 mybestには、大きく分けて、フロント画面（一般ユーザーが見る画面）と管理画面が有ります。 その
Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが（参照：npm trends）、記事『ベストな手法は？ Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。本記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基本的には作法的な書き方はあまり軽減しませ
サーバサイド開発にKotlinを全面採用！ ビヘイビア駆動開発（BDD）をマイクロサービスに導入するNewsPicksが求める開発者体験は？ - はてなニュース
ソーシャル経済メディアNewsPicksを開発・運営する株式会社ニューズピックスは2021年9月、これまでサーバサイドの主要な開発言語としてきたJavaに代えて、Kotlinをメインに採用する方針を明らかにしました。 ▶ NewsPicksのサーバーサイド言語をJavaからKotlinに切り替えるために - Uzabase Tech Androidアプリだけでなくサーバサイドも「Kotlinで開発できるようにする」というこの宣言の背景には、数年間にわたってマイクロサービスを中心にKotlinを採用してきた実績と知見の蓄積があるだけでなく、そういった現場からの挑戦をよしとするNewsPicksのエンジニア風土も大いに追い風となっています。 この挑戦をどのように進めようとしているのか？ 開発者体験（DX）をどのように高めようとしているのか？ NewsPicksのCTOを務める高山温さん（上写真
こんにちは、食べログシステム本部長の京和です。 昨年のアドベントカレンダーでは 「食べログの大規模なレガシーシステムを段階的に改善していく取り組み」 と言う記事で技術的な取り組みを中心に紹介しました。 今年のアドベントカレンダーでは、食べログのエンジニア組織を段階的に改善していく取り組みについてご紹介します。 食べログの組織構造 食べログの組織はシステム、営業、ビジネスと言った機能ごとに組織が分かれる、いわゆる機能別組織の組織構造を採用しています。 2021年12月現在の食べログの組織は、公式な組織図としては上記の機能別組織を維持しながら、内部ではマトリクス型組織の要素を一部に導入したハイブリッドな組織形態となっています。 今も試行錯誤中の段階ではありますが、現在に至るまでの変遷を、 システム部門を機能別組織として最適化する マトリクス型組織によるクロスファンクショナルチームの導入 「冒険
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
2023/09/23に開催されたServerlessDays Tokyo 2023で登壇した資料です
The Ultimate Guide to handling JWTs on frontend clients (GraphQL) JWTs (JSON Web Token, pronounced 'jot') are becoming a popular way of handling auth. This post aims to demystify what a JWT is, discuss its pros/cons and cover best practices in implementing JWT on the client-side, keeping security in mind. Although, we’ve worked on the examples with a GraphQL clients, but the concepts apply to any
速報: Basecampがリリースした「Hotwire」の概要｜TechRacho by BPS株式会社
12/23の朝方、DHHが以下のツイートを発信しました。 Hotwire aka NEW MAGIC is finally here: An alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This includes our brand-new Turbo framework and pairs with Stimulus 2.0 😍🎉🥂 https://t.co/Pa4EG8Av5E — DHH (@dhh) December 22, 2020 取りあえず様子を知りたかったのでDHHのツイートを追ってみました。お気づきの点がありましたら@hachi8833までお知ら
概要 先日新規の Web サービス開発でフロントエンド側の技術選定を行いました。 利用する技術の中で GraphQL を提案した際に、RESTful な API で呼び出す方法と比較して納得感がないという意見があがりました。 そこで、なぜ、どういうときに GraphQL を選定すべきだと思うか、文章にして自分なりにまとめておこうと思います。 前提 構成が BFF か BE かで意見は大きく変わりません。 例えば BFF として利用されるケースでは、バックエンド側には BE チームとマイクロサービス的な API が存在しており、 BFF として GraphQL を配置するようなケースです。GraphQL のリゾルバは API を叩きます。 一方、 BE として利用されるケースとは、リゾルバが直接 DB を叩くような形です。 今回はフロントエンドのチームが管理する BFF として、JS のみで
誰もがその戦いの背景にある歴史の深淵と人々の覚悟を見誤っていた。開戦初日に決着が付くと高を括って鼻歌混じりに筆を取った私は、気が付けば夏休みの８割を喪失し、すべての指が腱鞘炎で悲鳴を上げる中で参考文献の海に這いつくばっていた。 —— Josh Nobus —— ぜんぜんわからない 俺たちは雰囲気で REST をやっている 何度調べてもなんだかよく分からない概念ランキングの個人的 Top5 に入る言葉。 それが「REST」だ。 いろんな Web サービスの REST API はよく使わせてもらっているし、REST API が何かと聞かれれば「その Web サービスの機能を HTTP リクエストで呼び出せる API エンドポイントのことだよ」みたいにそれっぽくお茶を濁すことはできると思うが、じゃあ自分で RESTful なサービスを作ってみろと言われたら私は作れない。作れなかった。 だってどん
JavaScriptの ~. 構文って知ってる？ Promise Pipeliningが拓く非同期処理の未来 - Qiita
JavaScriptの ~. 構文って知ってる？ Promise Pipeliningが拓く非同期処理の未来JavaScriptECMAScript PromiseはES2015からJavaScriptに導入された機能で、非同期処理をいい感じに記述できるたいへんありがたいオブジェクトです。実は、Promiseの強化版ともいえる新機能、その名もHandledPromiseが提案されています。また、このHandledPromiseのための新構文~.も同時に提案されています。 例えば、~.を用いて次のようなプログラムを書くことができます。 この記事では、HandledPromiseと~.について概説します。例によって、これらはStage 1プロポーザルです。つまり、「こういうのがあってもいいんじゃない？」と思われている段階であり、具体的な方向性とかは何一つ決まっていないということです。この記事で
はじめに 今回の記事では個人の独断と偏見でプログラマー向けに必ず確認しておきたいIT企業の公式ブログを共有する。なお、今回の記事で紹介している公式ブログはあくまで一例に過ぎない。 AppBrew 文章が易しく初心者でも読みやすい 主に業務効率化を中心に書かれている 実務・プログラミングのイメージができない初心者や新人には非常にオススメ ABEJA Tech Blog 主に保守・運用を中心に発信している ドローン・機械学習に興味があるならオススメ 専門用語が多めなので理解に苦労する可能性が高い UUUMエンジニアブログ あの有名なクリエイター(YouTuber)を数多く輩出している会社「UUUM」の公式ブログ Rails・PHP・インフラ(AWS、Dockerなど)の情報が多い 技術記事が非常に読みやすく、画像とソースコードを使って的確に技術ややっていることを説明している Wantedly
私が働いているAniqueという会社では、1年前に全てのソフトウェアでTypescriptを採用することにしました。私たちが開発している進撃の巨人のNFTサービス “Attack on Titan: Legacy” でも採用しています。 TypescriptではNestJSという素晴らしいAPIフレームワークを利用することができ、生産性高く開発を続けることができます。また、私たちはフロントエンドでNext.jsを利用しています。言語レベルでのコンテキストスイッチを抑えることで、一人のエンジニアがフロントエンドとバックエンドのどちらもの機能を開発する環境が作れました。 しかし、Nodeならではの作法や設計について、Web上にはたくさんの情報があるものの、あまりにも情報が多すぎて、まとまったプラクティスになかなか出会うことができませんでした。そのため、最初はチーム内での共通認識を作るのに苦労し
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何なのか、いつどこで使えばいいのか、具体的にNext.jsのどういうところがいいのか、どういう機能があるのかという話をします。 最終的には普段Railsを書いているエンジニアが、Next.jsよさそうなんで使ってみようかな？と思ってもらえるといいかなと思っています。 Next.jsとは何か Next.jsのトップページを見てみましょう。 The React Framework for Production と書いてあります。これは読んで字のごとくですが、Next.jsというのはReactをベースにしたフレームワ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サーバーサイドエンジニアとして2021年に使った技術と来年の目標 | うなすけとあれこれ
React Server Components と GraphQL のアナロジー
AmazonのAPI設計方針 (The Bezos Mandate) - Qiita
技術を的に当てる技術について - GraphQL を入れ直した話 / 吉祥寺.pm28
俺の管理画面 2023年冬 - KAYAC engineers' blog
最近プログラミングが楽しい - Blog::kobaken
より良いReactJS開発者になるための10のヒントとコツ - Qiita
AWS re:Invent 2020で発表された新サービス/アップデートまとめ - Qiita
機械学習APIでWebサイトの改善点を提案するサービスを作った話 - Qiita
ぼくのかんがえたさいきょうの個人開発あーきてくちゃ
マイクロサービス環境でのメルカリWebのリリースフロー
モダンウェブフロントエンド勉強会を開催しました - クックパッド開発者ブログ
新管理画面のAPIにGraphQLを採用した話 - 一休.com Developers Blog
The new wave of Javascript web frameworks
npmの@typesスコープにおける任意のパッケージの改竄
VSCode のおすすめ拡張機能と便利な設定、キーバインド集 2022
ネットスーパーアプリ GraphQL から REST へ移行始めました - every Tech Blog
VueをReactにリプレイスしてEasyからSimpleにした話
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説 - ICS MEDIA
食べログの大規模なエンジニア組織を段階的に改善していく取り組み - Qiita
The Ultimate Guide to handling JWTs on frontend clients (GraphQL)
React 時代に選ぶ GraphQL - とろろこんぶろぐ
すべての Web サービス設計者に捧ぐ「RESTful って結局なんなんだ」
【プログラマー必見】情報収集で絶対に役立つIT企業の公式ブログ 30選
“Tao of Node - Design, Architecture & Best Practices” 日本語翻訳
RailsエンジニアのためのNext.js入門 - hokaccha memo