Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトがNext.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を送っていた。 その過程で、こんなようなことを考えるようになったので、今回はこの辺りの話を書き残しておこうと思う(何回か X に同じ旨の POST は上げていたけど、一回もちゃんとまとめてなかったので)。 RSC がない頃の、別の言い方をすると getServerSideProps を使っていた頃の、Next.js におけるアプリケーションの設計は、トラディショナルな MVC にかなり近しい。 ここでいう MVC は、Sp

サマリー システム構成の変遷 創業フェーズ はじめてのAPI と技術選定GraphQL 移行直前GraphQL への移行を決めたきっかけGraphQL 移行方針 移行期間 ふりかえり 1つ目の方針は正解だった 2つ目の方針は微妙だったかもしれないけど、正解だったかもしれない 3つ目の方針はやはり苦戦した さいごに サマリー サービス開始から3年経ったNext.js +Rails なシステム 全てのAPI を REST からGraphQL にリプレース 約9ヶ月かかりました 早速フロントエンドの都合でバックエンドにも手を入れるということが減って快適です という話です。 システム構成の変遷 創業フェーズ 1人目エンジニアとして入社して、何から手を付けようかなーと考えた結果、事業の肝の部分からシステム化していくことにしました。弊サービス https://moneiro.jp/ は

はじめに Smart Craft テックリードの星井です。 前回の記事で Smart Craft の技術スタックの全体像についてお伝えしましたが、今回はバックエンドについてお話します。Ruby onRails /GraphQL な構成になっているので同じような構成を検討している方の参考になれば幸いです。 バックエンドのフレームワーク選定 新しくアプリケーションの開発をやるぞとなったときに、バックエンドで何を使うかというのは毎回頭を悩ませる人が多いのではないでしょうか?フロントエンドに関しては最近だととりあえずReact を使っておけば文句を言う人はいないと言う認識ですが(偏見)、バックエンドはいろいろあって迷いますよね。 自分はRails 信者でして個人的に何かを作る時には脳死でRails を採用することが多いですが、Smart Craft でのプロダクト開発は当然そんな安易

GraphQLサーバーを開発する際は、まず schema-first か code-first かを決めることになるでしょう。前者はまずgraphql.schema を手書きし、そこから言語固有のコードを生成する方法です。後者は言語固有のコードを書いてから、graphql.schema を生成する方法です。 今回2つのどちらが良いかは議論しませんが、後者の code-first &TypeScriptでGraphQL開発をする場合、ライブラリの選択肢がいくつかあります。この記事では、それらのライブラリの特徴をまとめます。特に以下の観点で比較します: Prismaとの連携: 私がTypeScriptでウェブ開発するときはORMのPrismaをよく使います。GraphQLと組み合わせる上では、型定義の重複やN+1問題を回避するため、ライブラリ間の連携は重要です。 開発の活発さ: 将来的に

この記事は、Merpay Advent Calendar2022 の15日目の記事です。 こんにちは。メルペイのvvakameです。 最近、社内向けにGraphQL Client Architecture Recommendationというドキュメントを書きました。社内のiOS/Android、そしてバックエンドのエンジニア向けにGraphQLをやるならこの辺りの条件を満たしておかないと恩恵を感じられなくなっちゃうかもよ、と伝えるためのものです。嬉しいことに、今までに100名弱の人たちがこのドキュメントを閲覧してくれたようです。 これをAdvent Calendarで公開するために、ちょっと調整したものがこの社外版です。 すでにGraphQLをやっているけどあまり便利じゃないな…なんでだろ?とか、これから導入したいんだけど何を気をつけるべきかな…と考える時の材料にしてください。 併せて、

Apollo Client は複雑Apollo Client が向いているケース 一休.com にApollo Client は必要ないかもしれない では何を使えばいいの? 複雑なアプリケーションにはApollo を使えばいい? もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jpspeakerdeck.comGraphQL クライアントと聞いて一番に思い浮かぶライブラリは何でしょうか? 多くの方にとってはApollo Client ではないかと思います。npmtrends を見てもApollo Client のダウンロード数は urql や relay などほかのクライアントと比べ圧倒的です。 実際、一休

追記: 2019/01/08この記事よりも @vvakame さんによるGraphQLAPIスキーマの設計ガイドがあるのでそちらを参照することがおすすめです。 https://vvakame.booth.pm/items/1576562 また、GraphQLの設計について相談できるSlackグループを開設しているので、わからないこと・相談したいことがあればぜひ参加してくださいSlackグループ"GraphQLを使っている人たちの集まり"への招待リンク また、すべてのGraphQLAPI設計のベストプラクティスはGitHubAPI v4に詰まっているので、困ったらGitHubのマネをするというスタンスでいるのがよいです。 https://developer.github.com/v4/GraphQL で実装するときに気をつけることID は global で unique にするクラ
はじめに こんにちは、ソウゾウSoftware Engineerの@sue71です。連載:メルカリShops 開発の裏側 Vol.2の13日目を担当させていただきます。 以前メルカリメルカリShopsの技術スタックと、その選定理由でBFFの実装にGraphQLを採用していることをお伝えしました。メルカリShopsをリリースしてから約半年たった今、これまでを振り返ってGraphQLサーバーを実装する上での課題やあらかじめ考えておくと良い項目をまとめてみました。また、本記事ではメルカリShopsでGraphQLの実装としてApolloを採用しているため、Apolloの利用が前提の話もいくつか混在しています。予めご容赦ください。GraphQLの説明や、メルカリShopsの実装方法に関しては以前こちらの記事で紹介しています。こちらも是非ご覧ください。 パフォーマンス課題GraphQLは、アプリ


今週、10月23日(土)に発売されるWEB+DB PRESS Vol.125に掲載される、特集記事「GraphQL完全ガイド」を執筆しました。よろしくおねがいします。 桃栗三年、GraphQL 6年 原稿を書く過程で、知っているはずのことでも改めて調べなおしたりする。特に歴史みたいなのが好きで、GraphQLは2015年6月に発表されて、2018年に安定版になって、みたいなのをずっと調べてしまう。GraphQLってなんかすごい最近っぽく感じていたけど、発表されてからもう6年経つらしい。 ちなみにjQuery 1.0は2006年8月にリリースされていて、Reactは2013年5月に公開されたらしい。6年というのはだいたいそれくらい。 6年で、GraphQLはよく普及した。Facebookはもちろん、GitHubもTwitterもNetflixも、GraphQLを使っている。GitHubの新し

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフーTechBlog こんにちは、映像サービスプロダクト本部の浜田(@narirow)です。GYAO!では最近トップページの大規模な変更が行われました。本記事では映像サービスのバックオフィスを含む大規模な構成変更と、その成果として得られたスケーラビリティ・ページの表示速度の向上についてをお話しします。GYAO!のトップページの特徴 映像サービスであるGYAO!のトップページは、豊富なラインアップの中から作品を厳選して掲載しています。有名作品をただ並べるだけではなく、レコメンデーションやターゲティングの技術を使って、閲覧者の趣向にあった作品を一覧しています。大量の画像が表示されていることに加え、縦に長いページ構成となっています。 課題と解決のアプロー

こんにちは!LayerXの mosa_siru (榎本) です。 LayerXインボイスでは、もともとgithub.com/go-swagger/go-swagger を利用してRESTAPIを開発していましたが、最近開発したワークフロー機能 のコンポーネントではGraphQLを取り入れました。GraphQLには様々なメリットがあり、RESTとの比較記事は多くありますが、なぜ僕らは移行したのか、その結果どうなったのかを紹介していきます。GraphQLのメリットGraphQLのメリットは、様々な箇所で語られています。例えばこの記事によれば、 強力に型付けされたスキーマであること アンダーフェッチとオーバーフェッチがないこと(後述)Apollo, Relayなどの、クライアントライブラリにより、フロントエンド開発が迅速になること 複数のGraphQLAPIからの統合が可能 強力

scalar型を新しく定義するためにはscalarキーワードを使います。例えば、Date型を新しく定義するには次のようにします。scalar Date スキーマではこれだけですが、実際に使う際はGraphQL処理系に対してさらにシリアライズとデシリアライズを定義することになります。GraphQL組み込みのscalar型は先にあげたものだけなので、例えばバイナリ、日付と時刻、HTML/XML、BigIntなどを必要に応じて追加することになるでしょう。ただしその場合、サーバーサイドとクライアントサイドでシリアライズ・デシリアライズの実装を一致させる必要があります。 Enum enum(イナム)はscalar型の一種で、特定の値のみを持つ型です。例えば、組み込みscalar型であるBooleanをenumで宣言すると次のようになるでしょう。 enum Boolean { true false

M3 ではグローバル CTO の Brian が、サービスの海外展開や技術基盤の共通化などを積極的に進めています。その中のプロジェクトの1つとして、アメリカで提供している医療ニュースのリニューアルにチャレンジしています。2018 年 5 月には日本オフィス所属のイギリス人エンジニア @christophrowley と日本人のエンジニア (筆者)が 1 ヶ月ほどニューヨークに出張してリニューアルの検討をしてきました。 ( ↑ Chrisが撮影してくれた NY の写真 ) 今回の記事は、リニューアルで採用を検討しているGraphQL をApollo +JavaScript で作るチュートリアルです。 TL;DRApollo を使って、クライアントサイド、バックエンドを作るチュートリアルを紹介英語・海外での開発に挑戦したいエンジニアを絶賛募集中です。もし興味があればランチ行きましょう

本文書は、 Kibela WebAPI の実装についてのスタイルガイドです。 実装の原則GraphQL official site に従うGraphQLに足りない部分は Relay server specに従う 実例としてはGraphQL+Relayで構築されているGitHubAPI v4を参考にする Naming フィールド名 ※graphql-ruby 1.8 以降は自動的にcamelizeされるようになっているので、任せましょう。 camelCase にしてください。 定義の際にmodel本来の名前と変える必要がありますが、クライアントサイド言語(JS,Swift,Java)はcamel caseが基本なので、そのまま使えるというメリットがあります。 なお camel case はいくつかのバリエーションがありますが ActiveSupport の String#cam

リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く