並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 978件

新着順 人気順

graphqlの検索結果1 - 40 件 / 978件

  • TypeScriptとGraphQLで実現する型安全なAPI実装

    この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信(今回はこれをAPIと呼びます[1])などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取

      TypeScriptとGraphQLで実現する型安全なAPI実装
    • TypeScript 関数型スタイルでバックエンド開発のリアル

      TSKaigi 2024 のスライドです

        TypeScript 関数型スタイルでバックエンド開発のリアル
      • NestJSのGraphQL Resolver関数を型安全にしたい

        ユビーではNestJSでGraphQLのサーバー実装をおこなっています。今回は実践で得られた知見を元にNestJSでGraphQLのResolverに対してGraphQLのスキーマから生成したTypeScriptの型を適用する方法について解説します。 前提としてNestJSにはスキーマファーストとコードファーストがありますが、今回はスキーマファーストで書いたうえで、スキーマから型を生成するアプローチを紹介します。 NestJS組み込みの型生成を使う NestJSのスキーマファーストのアプローチではNestJSの組み込みの機能でスキーマからTypeScriptの型を生成することができます。 以下のように書くことで、 graphql.ts に型が生成されます。 GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, t

          NestJSのGraphQL Resolver関数を型安全にしたい
        • Fragment Composition of GraphQL

          Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”

            Fragment Composition of GraphQL
          • GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model

            2024/04/19 「tsukiji.graphql」で発表したスライドです。 https://tsukiji-graphql.connpass.com/event/314173/ 参照したURL - https://mh4gf.dev/articles/tags/graphql - GraphQL 成熟度モデル - とろろこんぶろぐ - GraphQL を Server Components で使いたい - Speaker Deck

              GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
            • GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection

              tsukiji.graphql x ハッカー鮨 https://tsukiji-graphql.connpass.com/event/314173/

                GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
              • Signed Query は GraphQL の Trusted Document の新しい実装パターンです - スタディサプリ Product Team Blog

                こんにちは。スタディサプリの小中新規開発チームで Web エンジニアをしている @YutaUra です。 去年の4月に新卒で入社をしまして約 1 年が経ちました。インターン生時代にもブログを書いているのでご興味あれば合わせてご覧ください。 GraphQL と Persisted Query スタディサプリ小中講座ではデータ通信に GraphQL を採用しています。 GraphQL を利用することで、クライアントはスキーマに定義された範囲で自由にデータを取得することができます。 query GetUser { user { name age } } また、 GraphQL はデータのグラフ構造に基づいて関連する複数のデータを一度に取得することができます。 query GetUser { user { name age posts { title content } } } GraphQL の

                  Signed Query は GraphQL の Trusted Document の新しい実装パターンです - スタディサプリ Product Team Blog
                • ネットスーパーアプリ GraphQL から REST へ移行始めました - every Tech Blog

                  はじめに こんにちは、retail HUBで Software Engineer をしているほんだです。 今回は私が現在着手している事業譲渡されたアプリを社内で持続的なプロダクト開発を行える状態にするリプレイスプロジェクトをどのように行っているか紹介しようと思います。 この記事ではリプレイスを行うにあたってどのようなことを課題に感じてその課題に対してどのような解決策をとったか主にサーバーの実装について説明しています。 ネットスーパーアプリとは 現在弊社ではネットスーパーアプリとして Web アプリとスマホアプリの二つのシステムを提供しています。 Web アプリは販促コンテンツの設定や売り上げの管理・集計を行うことが可能な管理システムと受け取り方法に応じた価格変更や送料変更にも対応し、消費者の柔軟な買い物を実現するお客様向けアプリを 17 の小売り様に、スマホアプリでは Web アプリのお客

                    ネットスーパーアプリ GraphQL から REST へ移行始めました - every Tech Blog
                  • 30歳エンジニア転職で役に立たなかった経験と役に立った経験 - Qiita

                    はじめに いつも聞いているポッドキャスト番組で、エンジニア転職について生々しくリアルな話が聞けたので、紹介します。今の自分がやっている仕事が市場価値を上げられているのか? と日々の業務を振り返るきっかけになりました。詳しく知りたい方は是非、聞いてみて下さい。 転職の前提 かいちさん(転職した人)の紹介 情報系の大学院卒 中堅のバックエンド・エンジニア(30代) 社会人7年目 主に使っている言語: python, PHP アジャイル開発ができることを転職の軸に据えた 転職して感じたこと ① 30代は中堅の仕事を求められる → リーダー的立場が求められる ② 若い時の業務経験が転職の際に活きてくる → 20代はとにかく挑戦する回数を増やそう ③ 転職はどのタイミングでやってくるかわからない → 常に職務経歴書を更新し続けよう 結論 重要なポイント ・チームで開発した経験があるか? ・AWSなど

                      30歳エンジニア転職で役に立たなかった経験と役に立った経験 - Qiita
                    • Uber、GraphQLサブスクリプションとKafkaでマイクロサービスを使用したスケーラブルなチャットを構築

                      垂直スケーラビリティと効果的なテストによる金融取引システムのパフォーマンスと効率の最大化 Peter Lawrey氏はJavaチャンピオンであり、Chronicle SoftwareのCEOとして、開発者を鼓舞してソリューションのクラフトマンシップを高めることに情熱を注いでいる。経験豊富なソフトウェアエンジニアとして、Lawrey氏はソフトウェア開発プロセスにおけるシンプルさ、パフォーマンス、創造性、革新性を奨励することに努めている。

                        Uber、GraphQLサブスクリプションとKafkaでマイクロサービスを使用したスケーラブルなチャットを構築
                      • urqlのDocument Cachingを安全に運用する - ROUTE06 Tech Blog

                        こんにちは、ROUTE06 でソフトウェアエンジニアをしている@MH4GFです。 この記事では、urqlの Document Caching における additionalTypenames についての説明と、実運用でどのように扱うべきかという私見を書きます。最後に、提案する方針を後押しするために作成した Exchange(urql のプラグイン)を紹介します。 urql と Document Caching urql は、主に Web フロントエンドアプリケーションで使用される柔軟性と拡張性に優れた GraphQL クライアントです。 GraphQL クライアントライブラリにはパフォーマンスを向上させるためのキャッシュ機構が用意されていることが多いですが、urql はデフォルトではDocument Cachingと呼ばれる概念を使用します。 Document Caching は quer

                          urqlのDocument Cachingを安全に運用する - ROUTE06 Tech Blog
                        • Railsを始める人が読むと良いサイト - 技術メモ

                          Ruby on Rails Guides / Ruby on Rails ガイド:体系的に Rails を学ぼう 公式Docs。教典。 Ruby on Rails チュートリアル:プロダクト開発の0→1を学ぼう Railsやってる人で知らない人はいないRails2系の頃からある定番サイト 昔は全部無料でWebテキストが読めたが今は1000円くらいで購入することになってる。今でも進化しながらメンテナンスされており神。 Railsの練習帳 少しだけ発展的だけど必須で知っておきたい内容。データモデリングとかGraphQLのような話も追加されていっている。無料。 asyraffff/Open-Source-Ruby-and-Rails-Apps: Awesome Ruby and Rails Open Source applications 🌈 Rails製のOSSプロジェクトをまとめたページ

                            Railsを始める人が読むと良いサイト - 技術メモ
                          • TypeScript x GraphQLで2年開発してみて

                            イベント「【タイミー/Voicy/令和トラベル】Backend LT〜技術選定における“見極める力”とは〜」での登壇資料 https://reiwatravel.connpass.com/event/306794/

                              TypeScript x GraphQLで2年開発してみて
                            • GraphQL is for Backend Engineers | Apollo GraphQL Blog

                              Most articles explaining the benefits of GraphQL focus on advantages for the frontend: things like preventing overfetching, reducing round trips, and iterating faster. But GraphQL provides just as many advantages for backend developers, which is why I choose it by default for new APIs and why you should consider it, too. Improved communication The goal of building any API is to enable someone to u

                                GraphQL is for Backend Engineers | Apollo GraphQL Blog
                              • Next.js@13 と React Server Component と Suspense と GraphQL の @defer, @stream について

                                React Server Component と Suspense と Next.js@13 ってなんか紛らわしくね React Server Component(RSC) rfc https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md 概要 RSC はサーバー上で実行されるコンポーネントのこと サーバー上で実行されるということで、データベースへの通信などを直接行うことができる コンポーネントはレンダリング結果のみがクライアントに送られるので、秘匿情報などの流出は起こらない 適当に具体例を書くと // 従来の方法(React Client Component, RCC とする) const Page = () => { const { data } = useSWR("/todos/1", () =>

                                  Next.js@13 と React Server Component と Suspense と GraphQL の @defer, @stream について
                                • minne iOS 2024年の開発環境 - Pepabo Tech Portal

                                  minne事業部モバイルチームのエンジニアをしております、@umatoshiです。最近はパルワールドに夢中で、全力で配合に取り組んでいます。 好きなパッシブスキルは脳筋です。 現在私は、minneのiOSアプリを開発しており、最新バージョンのXcode(執筆時点では15.2)対応とiOS15サポート終了予定等、2021年当時の記事からアップデートしたので、採用している新技術や開発効率を上げるための工夫をはじめとしたトピックを、minneのiOSチームに興味がある方へ向けて共有したいと思います。 去年はiOSDC 2023でブース出展もしていて、弊社から登壇もしていてminneについて紹介しています。こちらもどうぞ。 概要 まずiOS 14のサポートを終了しており、SwiftUI、 GraphQL、 SPM(Swift Package Manager)、 Combine、 Swift Con

                                    minne iOS 2024年の開発環境 - Pepabo Tech Portal
                                  • 既存の MySQL と PostgreSQL データベース用の GraphQL API の作成 | Amazon Web Services

                                    Amazon Web Services ブログ 既存の MySQL と PostgreSQL データベース用の GraphQL API の作成 AWS Cloud Development Kit (CDK) を使って既存のリレーショナルデータベース上にスケーラブルでセキュアな GraphQL インタフェースを簡単に構築できる機能を発表しました。AWS Systems Manager Parameter Store に SecureString として安全に保存されたデータベースの認証情報と共に AWS Amplify GraphQL API CDK コンストラクトを提供し、SQL ステートメントを実行する GraphQL API の構築を開始します。この新機能は、Amazon Relational Database Service (Amazon RDS) 上の MySQL および Pos

                                      既存の MySQL と PostgreSQL データベース用の GraphQL API の作成 | Amazon Web Services
                                    • Prisma ORMを使いこなす ~歴史と対RDB運用の知見を添えて~

                                      CloudbaseはPostgreSQLのORMとしてPrismaを使用しています CloudbaseはAWS, Azure, Google Cloud等のパブリッククラウドを対象にしたセキュリティリスクの検出・管理SaaSです。 個人情報の入ったS3バケットを公開してしまうなどの設定ミスや、近年騒がれたLog4Shellなどの脆弱性をエージェントを使用せず検出し、その修正をサポートするプロダクトです。 CloudbaseではAPIサーバとしてNode.js、DBとしてPostgreSQLを使用し、そのORMとしてPrismaを使用しています。本記事では入門を超えて本番環境でPrismaを使いこなすために必要な知識、弊社がPrismaを運用する中で得た知見を共有していきます。 対象読者 PrismaをRDBのORMとして使っている人 雰囲気でPrismaを使っている人 これからPrisma

                                        Prisma ORMを使いこなす ~歴史と対RDB運用の知見を添えて~
                                      • GitHub - StellateHQ/fuse: Fuse: The fastest way to build and query great APIs with TypeScript

                                        You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                          GitHub - StellateHQ/fuse: Fuse: The fastest way to build and query great APIs with TypeScript
                                        • GraphQL「良さ」・「難しさ」再探訪 〜スタディサプリにおける実例〜 / StudySapuri with GraphQL

                                          2024/02/08 に「LayerX、スタディサプリ、SHEと考える GraphQLが向いている現場とは?運用実践LT」で、内山高広( @highwide )が発表した資料です。 #Offers_GraphQL実践LT

                                            GraphQL「良さ」・「難しさ」再探訪 〜スタディサプリにおける実例〜 / StudySapuri with GraphQL
                                          • GraphQL 「良さ」・「難しさ」 再探訪 〜スタディサプリにおける実例〜

                                            Design and Strategy: How to Deal with People Who Don’t "Get" Design

                                              GraphQL 「良さ」・「難しさ」 再探訪 〜スタディサプリにおける実例〜
                                            • Backend エンジニア視点からの GraphQL / GraphQL from a perspective of backend engineer

                                              "LayerX、スタディサプリ、SHEと考える GraphQLが向いている現場とは?運用実践LT" で登壇した資料です。 引用した資料 [Rails アプリに RESTful API のレールを敷いて生産性が大きく上がった話 | Wantedly Engineer Blog](https://www.wantedly.com/companies/wantedly/post_articles/85098) [React Server Components と GraphQL のアナロジー | by Yosuke Kurami | Dec, 2023 | Medium](https://quramy.medium.com/89b3f5f41a01) [実質無料で GraphQL Gateway を手に入れる / low-cost GraphQL Gateway - Speaker Deck](

                                                Backend エンジニア視点からの GraphQL / GraphQL from a perspective of backend engineer
                                              • ソニー: GraphQLを活用したデータ配信プラットフォームの事例紹介

                                                「2024年こそ使いこなす!GraphQL最前線」で発表した資料です。 ソニーのホームエンタテインメント領域では、TVやサウンドバー、ヘッドホンをはじめとする様々な製品、それらに付随するアプリケーションを取り扱っています。我々はホームエンタテインメント領域の横断組織として、それらの製品・アプリに対してクラウドサービスを提供しています。この領域において頻繁に要求される機能の一つに、データ配信があります。従来は製品・アプリの案件ごとにそれぞれ個別にサービスを開発しており、サービス間連携やリソースの共通化など横断組織ならではの利点をうまく発揮することができていませんでした。本セッションでは、この問題を解決すべく開発した共通データ配信プラットフォームについて、そこで活用されているGraphQLという技術との関係について、お話しします。

                                                  ソニー: GraphQLを活用したデータ配信プラットフォームの事例紹介
                                                • GraphQL実践ノウハウv2

                                                  GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql GraphQLの誤解 https://speakerdeck.com/sonatard/rethinking-graphql

                                                    GraphQL実践ノウハウv2
                                                  • GraphQL Schemaの破壊的変更をCIで検知する

                                                    ここ数年、私はGraphQL APIサーバーの開発を行っています。GraphQLは柔軟かつ強力なAPIクエリ言語で、Webフロントエンドからモバイルアプリなどいくつかのクライアントがそれぞれ画面に必要なデータをフェッチしており、フロントエンドの開発パフォーマンスが向上しました。 破壊的変更の問題 私のチームではGraphQLサーバーはRailsとGraphQL Rubyを用いてCode First[1]で開発しています。 しかし、複雑性が増すにつれてクライアントやクエリの全体像を把握できずに破壊的変更を引き起こすこともあり、その変更が既存のクライアントに影響を与えないように注意深くSchemaを管理する必要があります。 実際に最近、fieldやmutationの引数の変更がクライアントに不具合をもたらす事態に発生しました。 破壊的変更の検知 そもそもGraphQLは仕様が網羅されているSc

                                                      GraphQL Schemaの破壊的変更をCIで検知する
                                                    • Fuse: TypeScript API Framework

                                                      Build and query great APls with TypeScriptAggregate all your data sources and transform them into a great API for your clients with many best practices built-in for you—fully typesafe from data source to client query. What's Fuse? A framework for building great APIs effortlesslyBuild a GraphQL API that aggregates all your microservices, data stores, and third-party APIs with the minimum amount of

                                                        Fuse: TypeScript API Framework
                                                      • GraphQLのスカラーとTypeScriptの考察

                                                        皆さんこんにちは。筆者は最近、TypeScriptからGraphQLを使用するためのコード生成ツールnitrogqlを開発しています(初手宣伝)。 直近は、GraphQLのスカラーに関する機能拡張を行っていました。この記事では、そこで得た知見と考察について共有します。 GraphQLのスカラーとは GraphQLにおけるスカラーとは、それ以上分解できないデータ型のことです。GraphQLのデータはスカラー・オブジェクト・enumに分類でき、データの末端はスカラーまたはenumになります。 GraphQL仕様では組み込みのスカラー型が定義されており、以下のものがあります。 Int Float String Boolean ID また、カスタムスカラーとして、追加のスカラー型をスキーマ上で定義することもできます。 スカラー値がサーバー・クライアント間でやり取りされるときはシリアライズする必要が

                                                          GraphQLのスカラーとTypeScriptの考察
                                                        • 【Next.js】新規プロダクトのフロントエンドにおけるディレクトリ構成 - 通信レイヤー編 | Offers Tech Blog

                                                          概要 こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で採用しているディレクトリ構成の一部について書かせていただきます。 後述しますが、「Offers MGR」では求められる要件が複雑且つ通信で取得する情報量が膨大であることからAPI関連のディレクトリ構成もやや特殊なものになっています。ベースは以前こちらの記事で紹介した「Viewsレイヤー」を拡張させる形になっています。 専用構成になっている感があるため、参考になるかは分かりませんが、ぜひ最後まで読んでいただけると幸いです。 Offersのディレクトリ構成はこちら 弊社フロントエンドのボスであるAhomu先生が担当されているOffers側のディレクトリ構成は以下の記事をご

                                                            【Next.js】新規プロダクトのフロントエンドにおけるディレクトリ構成 - 通信レイヤー編 | Offers Tech Blog
                                                          • 一休レストランのふつうのRustバックエンド開発 - 一休.com Developers Blog

                                                            この記事は一休.com Advent Calendar 2023 25日目の記事です。 一休レストランでは、よりスムーズな予約体験の提供を目的とするシステムのリニューアルを進めています。その一環として、2023年10月から、レストラン個別ページの表示から予約までのスマートフォンビューにおいて、バックエンドのサーバをRustで書かれたものに置き換えました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) October 4, 2023 本番運用が始まって3か月近く経ちましたが、これまで安定して継続的な開発と運用ができています。これはRustだからと構えることなく、「ふつう」のバックエンド

                                                              一休レストランのふつうのRustバックエンド開発 - 一休.com Developers Blog
                                                            • React Server Components と GraphQL のアナロジー

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

                                                                React Server Components と GraphQL のアナロジー
                                                              • AWS AppSync がアツい! RDS Data API を使って GraphQL API を爆速で作ってみた - Qiita

                                                                CREATE TABLE conversations ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE messages ( id UUID PRIMARY KEY, conversation_id INT NOT NULL, sub UUID NOT NULL, body TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (conversation_id) REFERENCES conversations(id) ); CREATE TABLE con

                                                                  AWS AppSync がアツい! RDS Data API を使って GraphQL API を爆速で作ってみた - Qiita
                                                                • graphql-ruby 関連の CustomCop を作ってみる - やなぎにっき

                                                                  この記事は 🎅GMOペパボエンジニア Advent Calendar 2023 - Adventar 11日目の記事です🎅🎄 adventar.org 私が所属しているminneのプロダクトではGraphQLを採用しています。 Ruby on Rails で開発するにあたり、以下のGemを使用しています。 graphql-ruby GraphQL - Welcome rubocop-graphql ( graphql-ruby用の拡張cop ) GitHub - DmitryTsepelev/rubocop-graphql: Rubocop extension for enforcing graphql-ruby best practices 普段開発している中で rubocop-graphql にあるcopだけでなく、「こういうcopがあればいいな」と思うことがしばしばあるので作っ

                                                                    graphql-ruby 関連の CustomCop を作ってみる - やなぎにっき
                                                                  • GraphQL 未経験者におすすめ!Hasura のチュートリアル 「GraphQL Tutorial」 - kakakakakku blog

                                                                    最近 Hasura に入門していて,その前に GraphQL 自体を学べる Hasura のチュートリアル「GraphQL Tutorial」を実施してみた❗️ Hasura の話はほとんど出てこなくて,GraphQL と REST / gRPC の比較・GraphQL オペレーションの解説などを基礎から学べる.また実際に GraphiQL で GraphQL クエリを実行しながら体験もできるので「GraphQL ってたまに聞くけどわからんぞー🔥」という GraphQL 未経験者におすすめできる入門コンテンツだった \( 'ω')/ hasura.io ちなみに日本語もあるけど最新ではなく(例えば GraphQL vs gRPC がなかったり)英語を翻訳して実施するのが良いと思う. hasura.io ちなみに僕自身は GraphQL の基本的なことは理解できているはずだけど(例えば過去

                                                                      GraphQL 未経験者におすすめ!Hasura のチュートリアル 「GraphQL Tutorial」 - kakakakakku blog
                                                                    • フロントエンドのLinterやCIを改善した話

                                                                      この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri

                                                                        フロントエンドのLinterやCIを改善した話
                                                                      • 1年かけてNext.jsのapp routerへ完全移行した話

                                                                        App Router移行は進んでいますか? Next.js v13から一年以上経過しました。 ReactとNext.jsは、React Server Component(以下RSC)やServer Actionを筆頭にどんどん新機能がリリースされています。 私も仕事でNext.jsを採用しています。 App Router移行するか。するとしたらいつするか。 どのようなアーキテクチャにするか考えついに先日、全ページApp Router移行できました。 一緒に働くフロントエンドエンジニアのみなさま、工数を確保してくださったPMありがとうございました。 対象読者 Next.jsで開発しており、Pages Routerの資産を持っている人 これからApp Routerに移行したい人 App Routerの移行で困っている人 なぜ移行しようと思ったか App Routerが公開されましたがPages

                                                                          1年かけてNext.jsのapp routerへ完全移行した話
                                                                        • 一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog

                                                                          宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理(composables)の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中(id:kentana20)です。 このエントリーは一休.com Advent Calendar 2023の14

                                                                            一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
                                                                          • プロダクトのスケールを見据えてServer-Driven UIを採用してみる

                                                                            この記事はUbie Engineering Advent Calendar 2023の12日目の記事です。よろしくお願いします。 はじめに Ubieでソフトウェアエンジニアをやっているisseiです。 2021年の3月に入社してから2年程症状検索エンジン「ユビー」の開発をしていましたが、ここ1年くらい新規のプロダクトの検証とそのスケールのための開発をしています。 2023年の前半は、新規のプロダクトの検証を出来るだけ素早く行うため、実装範囲を小さくし、バックエンドの実装も最小限にとどめて、ほとんどの機能をフロントのコードで完結させていたのですが、後半は、前半に検証が終えられたプロダクトのスケールに向けた設計変更と実装の置き換えを行っています。 この記事では、後半で行った設計変更の中で採用した SDUI(Server-Driven UI) がとても良かったので、採用に至った経緯と、実装の概要

                                                                              プロダクトのスケールを見据えてServer-Driven UIを採用してみる
                                                                            • 業務システム SPA のフロントエンド技術選定(2023年版) - KAKEHASHI Tech Blog

                                                                              本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 (Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。) はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。

                                                                                業務システム SPA のフロントエンド技術選定(2023年版) - KAKEHASHI Tech Blog
                                                                              • graphql-coverage をリリースした - pockestrap

                                                                                こんにちは。 id:Pocke です。 graphql-coverage という gem をリリースしました。 github.com なにこれ GraphQL-Ruby を使っているときに、テストがすべてのフィールドを網羅して呼んでいることを検査するための gem です。 モチベーション 私は GraphQL-Ruby を使って GraphQL サーバーを実装するときに、テストからはすべてのフィールドを呼ぶようなルールで開発をしています。ですがこれを強制する良いツールはありませんでした。そのためフィールドにテストが書かれていることを開発者自身が確認する必要がありました。 「SimpleCovのようなカバレッジ測定ツールを使えば解決するのでは?」と思う方もいるかもしれません。ですが GraphQL-Ruby の場合は単純なコードカバレッジの測定ではこの問題は解決しません。なぜならば Grap

                                                                                  graphql-coverage をリリースした - pockestrap
                                                                                • 俺の管理画面 2023年冬 - KAYAC engineers' blog

                                                                                  面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We

                                                                                    俺の管理画面 2023年冬 - KAYAC engineers' blog