コードフォーマッターをPrettierからdprintにしたら10倍以上速くなった話🚀 - KAKEHASHI Tech Blog
はじめに こんにちは！ソフトウェアエンジニアの種岡です。 私たちのチームでは、TypeScriptを使用して開発を行っており、Prettierというコードフォーマッターを利用し、チーム内でコーディングスタイル統一に大変重宝しています。 そんなフォーマッター界隈で、Rust製で爆速で動作すると噂のdprintが良いということで試してみたところ、驚くべきことが起きました！ Prettierでは、コードフォーマッティングに 7.69秒 かかっていたのですが dprintを使うことでわずか 0.47秒 で完了するようになりました🚀🚀🚀 なんと、 10倍以上速い とういう結果に！ コードフォーマットは、Gitのpre-commitフックやGitHub Actionsで日々活用しており、普段の開発作業の裏側でコードの品質を支えてくれているありがたい存在です。 この速度改善により、開発プロセスの中
Build GraphQL APIs you can trust Learn how to design and build predictable, performant, and secure GraphQL APIs at scale. Hey 👋 I'm Marc-Andre Giroux! I've always found there was a lack of resources on how to build reliable GraphQL servers. Over the last few years, I helped build and maintain some of the biggest GraphQL APIs out there at both Shopify and GitHub. During those years, I also worked
こんにちは、@giginetです。 先日、新卒以来7年3ヶ月勤続したクックパッド株式会社を退職しました。 本日、クックパッド株式会社の最終出社でした！新卒で入社してから7年3カ月お世話になりました。最高の職場だった！ 👋 pic.twitter.com/VJLF3yh9UB— giginet (@giginet) 2022年6月24日 このエントリは5年半振りの当ブログの更新になるのですが、いわゆる退職エントリというやつです🇨🇳👨🍳🍗 でっ誰？ @giginet https://github.com/giginet/ https://twitter.com/giginet 前職：クックパッド株式会社 2015年4月に新卒入社、2022年6月に退職 モバイル基盤部テックリード 現職：LINE株式会社 2022年7月15日に入社 🐣 ディベロッパーエクスペリメンス開発室ビルドエ
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。2022 年 2 月入社でそこまで日が経っていないので、今回は社内の技術スタックではなく、今後社内でも検討されるかもしれない「BFF」について触れていきたいと思います。BFF（Backend For Frontend）導入することで得られるメリット/デメリット、GraphQL を用いた技術スタック事例など紹介していますので、ぜひ参考にしてもらえればと思います。 BFF とは？ BFF とは、Backend For Frontendの略称で、「フロントエンドとバックエンドの中間に配置され双方の複雑な処理を緩和させる責務を持つアーキテクチャ設計パターン」のことです。これだけだと分かりづらいので簡単にまとめると、「バックエンドの API
関連キーワード API | データ統合 前編「Netflixがクエリ言語『GraphQL』を採用 何にどう使っているのか」は、Netflixのコンテンツエンジニアリングチームに所属するギャレット・ハインレン氏が、同チームで使うデータ連携用のクエリ（データ操作）言語として「GraphQL」を採用した背景を説明した。一方でハインレン氏のチームは、依然としてスキーマ管理、エラー処理、分散書き込みなどの問題に直面している。「GraphQLはクエリとAPI（アプリケーションプログラミングインタフェース）構築のプロセスを簡略化するが、特効薬ではない」と同氏は言う。 ハインレン氏はGraphQLを受け入れるまでに数カ月を要した。受け入れた理由は、テクノロジー面でのメリットがあるからというよりも「チームと組織の行動やコミュニケーションを改善するためだった」と同氏は明かす。同氏によればGraphQLは、スキ
私が考えるマイクロサービスアーキテクチャ
はじめに 以前に、マイクロサービスアーキテクチャにゼロから挑んだ開発経験から、私が現時点で考えるマイクロサービスアーキテクチャを書いてみる。前回はAWSで構築したがAWSに限定せず汎用的に表現してみたいと思う。 前提 例として、社員の勤怠と有給の管理ができるようなwebのSaaSプロダクトを考える。 ここでいうプロダクトとは商品として販売できる最小の単位とする。 境界づけ まずは、プロダクトを5つの機能に分類する。 認証・・・認証を行うIdP。ユーザー固有のIDを管理するユーザーディレクティブを持つ。 ユーザー・・・認証されたユーザーと権限の紐付きを持つ。 権限・・・ロールとポリシーによる権限を設定する。「ユーザー」「権限」「勤怠」「有給」というサービスそれぞれに個別の設定ができる。 勤怠・・・勤務の開始と終了を管理できる。 有給・・・有給の付与、消化、残日数の管理ができる。 パターン1：
一休.com、Yahoo!トラベルのNuxtをNuxt3にアップグレードしました - 一休.com Developers Blog
CTO室プラットフォーム開発チームの山口(@igayamaguchi)です。 プラットフォーム開発チームではさらに内部でプロジェクトチームが分かれており、私はフロントエンド改善チームというチームでリーダーをしています。 フロントエンド改善チームでは主に一休.com、Yahoo!トラベルのフロントエンドの改善を行っております。 今回は一休.com、Yahoo!トラベルで使用しているNuxtのバージョンを2から3にアップグレードしたお話をさせていただきます。 一休.com、Yahoo!トラベルではトップページや検索ページ、ホテル・旅館の詳細ページなど主要なページのフロントエンドはNuxtで開発されています。 NuxtのバックエンドにはGo+gqlgenでGraphQLのサーバーを立てており、NuxtからはApolloを使用してバックエンドと通信を行っています。 このNuxtのバージョンは2とな
React + Amplify + AppSync + DynamoDB でサーバレスなWebアプリを作成する公式チュートリアルをやってみた | DevelopersIO
React + Amplify + AppSync + DynamoDB でサーバレスなWebアプリを作成する公式チュートリアルをやってみた Amplifyを使って React + AppSync + DynamoDB でサーバレスなWebアプリを作成するチュートリアルをやってみました！ 大阪オフィスのYui(@MayForBlue)です。 最近プライベートでAWS Amplify(以下Amplify)を触っていて、良さげなチュートリアルを見つけたのでやってみました。 Amplifyを使って React + AppSync + DynamoDB でWebアプリを作成するものです。 デプロイについてはチュートリアルで紹介されているS3でのホスティングではなくAmplify Consoleを使ってCI/CDできるようにするなど少し工夫してやってみました。 Amplify JavaScript
この1年くらいでgolangとGCPを使ったWebアプリケーションをフルスクラッチで開発したので、その際の技術選定の理由だったりを言語化して残しておきたいと思い、HHKBを手に取りました。 少し長くなってしまいましたが、どなたかの参考になればと思います。 どんな人が書いてるの？ 立ち上げ期のスタートアップCTOをしています。雑に言うとフルスタックエンジニアです。 開発歴はざっくり、Androidアプリの開発歴が一番長くて3年、バックエンド開発（Elixir × GCP）に転身して1年ほど担当、その後、これから言語化するプロジェクトを1年くらいかけてgolangで構築したところです。 今回の範囲からは外れますが、並行してNuxt.js×TypeScriptで書かれたフロントエンド開発も行っていたので、今はその辺りも一通り習得しています。 1. 方針 表題にもある通り、少人数での爆速開発を目指
一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理（composables）の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中（id:kentana20）です。 このエントリーは一休.com Advent Calendar 2023の14
mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし
SPA -> GraphQL -> Serverlessバックエンド Vue.jsとAmplifyを駆使して、1からモダンなフロントエンド開発＆サーバレスバックエンド構築をしてきます。今回は、Vue.jsで作成したSPAからAppSyncへGraphQLベースのリクエストを送り、裏のDynamoDBへデータの書き込みと読み込みまでを確認します。 （完成図） バックエンドのAWSリソースは、Amplify Frameworkを使用することで、コマンドラインから作成していきます。 また、Amplify Consoleを使用することで、CI/CDパイプラインも同時に作成し、GitHub上の最新断面がHTTPSでWebアプリとして公開するまでが本記事のゴールです。 登場人物 小さなアプリから大規模まで対応できる優れたフロントエンドフレームワークで、個人的にも多用しています。本記事はVue.jsのA
この記事は、 NTT Communications Advent Calendar 2022 1日目の記事です。 はじめに こんにちは。イノベーションセンターテクノロジー部門の西野と申します。 「Metemcyber」プロジェクトで、脅威インテリジェンスの運用や活用に関する研究開発をしています。 今回の記事では、SBOMを利用した脆弱性管理の取り組みについてご紹介します。 実は NTT Communications Advent Calendar に6年連続で寄稿しているので、そろそろ名前を覚えてあげてください。 SBOMとは？ SBOMは「ソフトウェア部品表（Software Bill Of Materials）」と呼ばれるもので、一般的には特定のソフトウェアに含まれるコンポーネントの依存関係を記述するために利用されます。記述フォーマットとしてはSPDXやCycloneDXが有名です。
会員数10万人のレガシーなコミュニティサイトを一から全部作り直した舞台裏 - エス・エム・エス エンジニア テックブログ
はじめに 規模の大小を問わず、レガシー化したサイトには色々な課題が存在します。課題の根本的な改善のためにソースコードをゼロから書き直してリニューアル（以後、このことをフルリニューアルと呼称します）するということは、とても魅力的な一方でリスクもあります。フルリニューアルすなわちアンチパターンとされていることも多いですね。ここでは「中規模程度のコミュニティサイトをフルリニューアル、すなわち一から全部作り直す」という選択をした背景や、その進め方について書いていきます。 なお、書きやすさのために筆者一人で思考・実行したように書いていますが、実際には事業部所属のもう一人のエンジニアもしくは二人の考えや行動をミックスしたものとなっています。 TL;DR PHP 5/Ethna & Smarty/オンプレ/オフショア開発7年ものを引き継ぎ/ツライ ↓ PHP 7/Laravel & Vue.js, El
この流れです。 前提基本的に自分はGoのサーバーサイドが主戦場で、カンファレンスにはよく顔を出します。最近はOSSを公開すればいい感じにGithub Trendsの上の方にきて目立つような、芸人っぽいムーブができるようになりました。 ですが、直近プライベートではGo以外にTypeScript(Next.js) でGraphQLのクライアント書いたり、仕事だと前はSwiftやらC++やらPerlやら色々使っていたので、他の方と比べると広く浅い経歴です。 また、大学に入ってから学習を始めましたし、当時はドットインストールが出始めたくらいで、基本的には書籍で勉強していました。大学では授業でFORTRANの授業を取りました。内容は意味わからなかったので同級生に寄生してました。 Progateとかプログラミングスクールとかには頼ってませんでした。無かったので...。なので、「幼少期からBASICを触
1画面1APIと比べるとGraphQLのAPIはどこから作ったらいいか分かりにくい - hitode909の日記
Backends for Frontends的に、1画面につき1つずつAPIを作っていると、画面のリストを作って、それぞれ1画面につき1個ずつAPIを作っていくことになるので、進捗の把握がやりやすかった。10画面あって3APIできてたら進捗30%ということになる。 グラフをたどって開発することになる GraphQLでAPIを作っていると、「実はこの画面を組み立てるためのクエリは、あちらの画面の条件を変えたものである」みたいなことが起きるようになる。たとえば、トップページではサマリを表示していて、もっと見るを押すと全件表示するような場合とか。 このように、着手しようとするともう作るものがなかったりとか、逆に、作るときに、他の画面から使う想定でパラメータの設計をするなど、考えることが増えたりもする。 スキーマに沿ってグラフをたどるだけで画面を組み立てられるのは良いことだけど、開発内容の依存関係
はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能
この記事はGraphQL Advent Calendar 2021の22日目の記事です。 またこれは書籍、出来る100%TypeScript 作って学ぶNext.js + GraphQL + Prismaに掲載していたコラムに加筆修正を行ったものです。 GraphQLは一言でまとめてしまえばDSL(GraphQL query language)による宣言的な記述を介してGraphQLサーバーから柔軟にデータを取得/提供する事が出来る仕組みです。文法は全く異なりますが動作モデルとしてはSQLとRDBの関係に近いかもしれません。なおHTTP上で利用される事がほとんどですが特に決まりがあるわけではありません。 元々はFacebook社(現Meta社)で開発され2012年からfacebook.comで利用されている技術で、その後2015年にはオープンソース化されFacebook以外でも徐々に利用さ
3年前に抱いていた Rust に対するイメージ 「コンセプトから理解するRust」（Amazon）という書籍を読んで Rust に再入門してみました。 実は2019年に Rust のチュートリアルである「The Rust Programming Language」（通称 TRPL）を写経したことがあります（GitHub）。 しかし、当時の自分は PHP のバックエンドエンジニアとしての経験が2年ちょっとあるくらいで、TypeScript にもまだ入門しておらず静的型付け言語の経験はほとんどなかったように記憶しています。 当時から Rust は所有権などの概念が難解で初心者を拒むものの、 Stack Overflow のアンケートで開発者から人気な言語として高い地位を誇っているというイメージがありました。 自分自身、PHP 以外にもサーバーサイドで使える言語があるといいなという思い、Rust
googleからタイトルについて書かれた記事が出たので読んでいた cloud.google.com これらについて自分でもなんとなく考えていたことがあったけれど良い機会なのでまとめておく 記事での注目ポイント 冒頭より引用。 私としては、HTTP を使用する API のビルドには、重要かつ特徴のあるアプローチが 3 つあると考えています。次のようなアプローチです。 1. REST 2. gRPC（および Apache Thrift など） 3. OpenAPI（およびその競合製品） なるほど、と思うかもしれないが、読み進めていくとRESTについてはこう書かれていた。 このスタイルの API の特徴的な性質は、クライアントが他の情報から URL を構築せず、サーバーから渡された URL をそのまま使用することです 何の話かと思ったけれど、REST APIにはLv3までありこの記事ではLv3の
Rails: Evil Martiansが使って選び抜いた夢のgem（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Gemfile of dreams: the libraries we use to build Rails apps—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/01/17 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。また、gemごとにGitHubリポジトリへのリンクカードも追加してあ
この記事では、GraphQL を利用したアプリを Next.js で構築していきながら、GraphQL の初歩について書いていく。 GraphQL のクライアントもサーバも、Apollo を用いる。 また、できるだけ型安全に開発したいので、graphql-codegenで型定義ファイルを生成する方法も扱う。 利用しているライブラリのバージョンは以下の通り。 @apollo/client@3.5.10 @graphql-codegen/cli@2.6.2 @graphql-codegen/typed-document-node@2.2.7 @graphql-codegen/typescript-operations@2.3.4 @graphql-codegen/typescript-resolvers@2.5.4 @graphql-codegen/typescript@2.4.7 @type
このエントリーは pyspa Advent Calendar 2019 の 11 日目の記事です。昨日は @chezou の「Vein の iOS ショートカット複数 URL 対応しました」でした。 はじめに#TypeScript は大変に素晴らしい言語で、僕の手によくなじむ。そのせいか最近はめっきり TypeScript ばかり書いている。 今回のエントリでは、僕がこの一年くらいの間に磨いた TypeScript のテンプレートプロジェクトについて説明する。かなり何度も使って必要十分なものだけを含めるようにしている。 しかし、僕の知識の偏りがそのままになっているので、万人に合うというわけではないだろう。 とはいえ、開発環境の初期構築はかなり面倒な作業なので参考にして貰えれば嬉しい。 細かい説明なんかよりもコードを見た方が早いってハードコアな方は、こちらへどうぞ。 taichi/ts-te
クックパッドのフロントエンド CSS in JS をゼロランタイムに切り替えました - クックパッド開発者ブログ
こんにちは。レシピ事業部のkaorun343です。我々のチームではレシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログにて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回は、この新システムのCSS in JSをEmotionからゼロランタイムのvanilla-extractへ変更した話です。 vanilla-extract.style 背景 以前書いた レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログでは、CSS in JSライブラリとして Emotion（@emotion/react）を採用した経緯と開発環境整備を紹介しました。採用理由としては以下の通りでした。 セレクタに一意なIDが割り振られるので、スタイルを適用した要
【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい - パンダのプログラミングブログ
Vercel製のuseSWRはReactの非同期データ取得をラクにする SWRとは、Next.jsを作成しているVercel製のライブラリです。**SWRはuseSWRというReact Hooksを提供し、APIを通じたデータの取得をラクに記述する手助けをしてくれます。**このライブラリはなんとGitHubスター数を10,700も獲得しています。 SWRはライブラリ名で、stale-while-revalidateというRFC 5861で策定されたキャッシュ戦略の略称です。このSWRがデータ取得の扱いをラクにしてくれて最高なのです。 React開発者が嬉しいuseSWRの書き心地 useSWRは外部APIからのデータ取得、ローディング状態、エラーが発生した時をシンプルに記述できます。これがあらゆるReact開発者にとって（というか、ReactでAPIにリクエストを頻繁に送るアプリケーション
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
株式会社ウェリコで、お客さんのスマートフォンでメニューの閲覧・注文・決済ができるスマートレストランを作ったときに、gqlgenとRelay Modernを使ってGraphQLを採用した話Read less
2021 / 2020 / 2019 GitHubで最もホットなライブラリをランキング表示してくれるbestofjs.orgというサイトがあります。 そしてここは毎年、その一年で最もホットだったライブラリを発表しています。 選考基準は『その年増えたスターの数』であり、恣意的要素の入る余地はありません。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.jsです。 以下は2019年のランキング、2019 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2019 4回目のJavaScript ライジングスターにようこそ！ 2019年にGitHubで最も注目を集めたプロジェクトを、数字で見てみましょう。 以下のチャートは、2019年の一年間にGitHu
はじめに この記事は、バックエンドエンジニアとして仕事をしている著者が、個人でサービスを作った記録です。 使用している技術は以下になります。 Go (gqlgen) - バックエンド TypeScript (React) - フロントエンド Dart (Flutter) - モバイル(ios, Android) GraphQL - API Firebase - 認証 MySQL - DB ConoHa - サーバー GCS - ストレージ CLIP STUDIO - 画像編集 土日を中心に、気が向いたら平日の夜も書く、という時間の使い方をして、ブラウザで動くようになるまでに1ヶ月、アプリを作るのに２週間 (Appleとのやり取りで更に2週間)程度かけて作りました。 iosの審査が終わって公開されたので、今は「これから何をしようかな」と考えているところです。 作ったもの Rabbytという、
CQRS設計パターンをモダナイズする
CQRSとは CQRS（Command Query Responsibility Segregation、コマンド・クエリ責務分離）は、ソフトウェアアーキテクチャパターンの一つで、つまりシステムのコマンド部分をクエリ部分から分離します。基本的な考え方は、データの書き込み操作（コマンド）と読み取り操作（クエリ）を異なるモデルで扱うことです。これにより、スケーラビリティ/パフォーマンス/セキュリティの観点で柔軟な設計が可能となり、クエリ要件に合わせて最適化が実現できます。 CQRSの基本構成としては、 コマンドモデル（書き込みモデル）：データの作成、更新、削除といった書き込み操作を担当します。このモデルは、データの整合性と一貫性を確保するために最適化されています。 クエリモデル（読み取りモデル）：データの読み取り操作を担当します。このモデルは、クエリのパフォーマンスを最大化するために最適化され
ワールドカフェ再び、そしてロール・ツール群の開発 / World Café Again, and Development of Suites of Roles and Tools
こんにちは、koidです。 この記事は Gunosy Advent Calendar 2021 - Adventar の25日目の記事です。 昨日の記事は aitaさんの EKSにJupyterHubを構築した - Gunosy Tech Blog でした。 ドキュメントの更新って面倒だし忘れがち ドキュメントのメンテナンスを自動化しよう コードからドキュメントを自動生成する ツールの利用によるドキュメント生成 CIによるドキュメント生成の自動化 状態からドキュメントを自動生成する ツールの利用によるドキュメント生成 CIによるドキュメント生成の自動化 まとめ ドキュメントの更新って面倒だし忘れがち 本題です。 みなさん、Pull Requestのレビュー時に、 ドキュメント・READMEも修正お願いします！ こういったコメントをした/された経験ってありませんか？ コメントをする側としても
【2024年1月】Next.js での新規アプリの構成 & Next.js ディレクトリ構成(features)
選定の方針 ログインしての利用がメインで、ユーザーがあまり多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリに集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 Next.js ライブラリ構成 メインで使っているライブラリです。Next.js + Vercelの開発体験が良すぎるので、できる限り活用して開発することを意識して作っています。 フレームワーク Next.js メインで使うライブラリ SWR tRPC React Hook Form Jotai Style/CSS に関して Vercelがリリースしたv0をいいなと思って、v0の出力で使われているTailwind CSS + shadcn/uiを使うようにしています。(v0活用は検証中です) よく使うインフラ系サービス Vercel: Gitにpus
ハッキングAPI
Web APIは近年急速に利用が拡大しています。APIの呼び出しが全Webトラフィックの80％以上を占めるほど、Webサービスに欠かせない技術となっている一方で、Web APIに対するサイバー攻撃も急増しており、そのセキュリティ対策はあらゆる組織で重要な課題となっています。 本書の目的は、Web APIの基本をしっかり押さえ、脆弱性が存在しないかどうかテストする方法を示すことです。攻撃者（APIハッカー）の視点から、あらゆるAPI機能と特徴を活用するための知識を学ぶことで、これから起こり得る情報漏えいの危機を防ぐことができます。まず、WebアプリケーションやWeb API脆弱性の種類などの基礎知識を学んだのち、実際に検証用ラボを構築しながら、脆弱性の調査方法、ツール、さまざまな攻撃手法などを、実践的に解説していきます。Webアプリケーションで最も一般的なAPI形式であるREST APIのセ
外からやってくる値から TypeScript の型を守るライブラリ・ツールまとめ - Mobile Factory Tech Blog
こんにちは、新卒エンジニアの id:d-kimuson です 先日 type-predicates-generator という型定義からユーザー定義型ガード・アサーション関数を自動生成するツールをリリースして紹介記事を書いたのですが、感想とかを眺めていたら同じく外部から来た値に安全な型付けをするためのライブラリやツールの情報をいくつも観測しました この辺りのランタイムチェックライブラリの情報ってあまりまとまっていない印象で自分が知らないものもいくつかあったので、調べつつ簡単にまとめられたらなと思ってこのエントリを書きました 外部からやってきた値を型安全にするにはざっくりと 型生成によるアプローチ ランタイムチェック用の独自型を書かせるアプローチ 型情報からランタイムチェック関数を自動生成するアプローチ の 3 つのアプローチがあると思うので、それぞれのアプローチごとに紹介します ① 型定義
GraphQL の Fragment でコンポーネントの見通しがよくなった話 - vivit engineering blog
vivit株式会社でフロントエンドエンジニアをしている関です。 新型コロナウイルス感染症(COVID-19)への対策として発出された緊急事態宣言の影響で、弊社も2ヶ月ほどリモートワークとなり、私も駆け足で自宅に作業環境を構築しました。買っちゃいましたL字デスク。 さて、弊社ではいくつかのプロダクトのフロントエンドに React(Next.js) + TypeScript を採用しており、バックエンドとの通信には GraphQL(Apollo) を採用しています。 今回はその中で、コンポーネント分割をする際の GraphQL Query の定義と取得したデータの受け渡しについて話をします。 ここからは GitHub GraphQL API v4 を使って説明していきます。 developer.github.com アジェンダ pages から components へのデータの受け渡し方法に
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
初めてのGraphQL
今日では多くのWebサービスがRESTアーキテクチャスタイルで実装されています。RESTは2000年にフィールディングの論文で提唱された後に爆発的に普及し洗練されてきました。一方で、本書で紹介するGraphQLは2015年にFacebookによって公開されたRESTとは異なるアプローチのアーキテクチャです。GraphQLの最大の特徴はクエリ言語を用いてデータを操作する点です。クエリ言語の表現力の高さによりクライアントは本当に必要なリクエストを送ることができます。本書ではGraphQLの概要とGraphQLを用いたWebサービスの開発方法を実装例に沿って紹介します。認証やファイルアップロードといった実践的なトピックまで踏み込んだGraphQLの実用的な入門書です。 関連ファイル サンプルコード 正誤表 ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下の
Next.js App Router と控えめにお付き合いして普通の Web アプリを配信する | Offers Tech Blog
まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS
NestJSでスケーラブルなBFFを構築。メルカリShopsエンジニアがGraphQL活用のリアルを語る【技術選定の裏側：GraphQL編 vol.2】 | IT/Webエンジニアの転職・求人サイトFindy – GitHubからスキル偏差値を算出
ハイクラスエンジニア向け転職・求人サイト。自社開発のWeb企業の求人多数！GitHub登録をすると、IT/Web企業とマッチングします。ユーザーサクセス (キャリア)面談も実施。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Production Ready GraphQL
クックパッド株式会社を退職して、LINE株式会社に入社しました - 5.1さらうどん
流行りのBFFアーキテクチャとは？｜Offers Tech Blog
Netflixが「REST」をやめて「GraphQL」に乗り換えた理由
少人数での爆速開発を目指してgolang×GCPの技術選定をした話
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
Vue.js＋Amplifyを駆使すればモダンなWebアプリを20分で公開できる - Qiita
SBOMで始める脆弱性管理の実際 - NTT Communications Engineers' Blog
プログラミングで辛かったこと。よかったこと。｜Seiji Takahashi@ベースマキナ
ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
なぜGraphQLを採用するべきなのか、あるいはなぜ採用するべきではないのか 2021冬
「コンセプトから理解するRust」を読んでRustに入門する - パンダのプログラミングブログ
API設計：REST、gRPC、OpenAPI - 気まぐれ開発日記
Next.js で始める GraphQL - 30歳からのプログラミング
TypeScriptによるアプリケーションの開発環境 | さにあらず
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
スマートレストランでGraphQL を採用した話
JavaScript ベスト・オブ・ザ・イヤー 2019 - Qiita
バックエンドエンジニアが個人開発した話 (Go+Flutter+React with GraphQL)
GraphQLでフロントエンドの複雑性とたたかう
面倒なドキュメント生成はCIにやらせよう - Gunosy Tech Blog
WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法