Single NodeのDocker Swarmを利用してオンプレミスにデプロイされるGraphQLサーバを安全にローリングアップデートさせている話
やっぱりEKSの運用は大変なのか 〜EKSを2年間運用して得た知見とコンテナセキュリティ〜 - DMM inside
Single NodeのDocker Swarmを利用してオンプレミスにデプロイされるGraphQLサーバを安全にローリングアップデートさせている話
こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クックパッドのレシピサービスを Next.js と TypeScript で置き換えはじめた当初、CSS については Next.js に標準で組み込まれているCSS in JS ライブラリである styled-jsx を使っていました。プロジェクトが大きくなりはじめたタイミングで 「CSS の技術選定を考えなおしてもいいかもしれない」とチームの中で話し合い、改めて技術選定をしました。 技術選定 結論として、本システムでは CSS in JS ライブラリのem
サイトの検索導線からも全部見えるようになったようです。 マスタリング・イーサリアム ―スマートコントラクトとDAppの構築 https://www.oreilly.com/library/view/-/9784873118963/ 初めてのGraphQL ―Webサービスを作って学ぶ新世代API https://www.oreilly.com/library/view/-/978487311893
この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれる。どういう時に関数内の()が省略できるか等を覚えなくて良い useEffectの最適な第二引数を自動で補完してくれる コンポーネントのimport文を自動で挿入してくれる なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、React開発においてはもはやデファクトスタンダードです(長年愛用しているエディタがある方も、是非一度VSCodeを試してみてください)。 さて、VSCodeはそのままでも素晴らしいエディタです。しかし、使用するフレームワークや用途に応じて拡張機能を入れるとさらにその卓越した機能性を発揮します。VSCodeがなぜ世界中の
We were pretty sure 2018 would be the last time we did this survey. After all, the JavaScript ecosystem can’t very well keep changing again, can it? But what do you know, turns out JavaScript isn’t quite done changing just yet! And so after over 21,717 respondents took this year's survey we had to dig up our components and charts, curse us-from-a-year-ago for writing such crappy code, and get to w
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
サービス間通信とIDL（インタフェース記述言語）連載の2日目のエントリーです。 本当はGraphQLネイティブなデータベースの紹介をしようとしたのですが、紹介しようとしていたものがまだベータでクライアントライブラリが公開されていない（空っぽのリポジトリしかない）みたいな感じで試せなかったので、急遽2022/6/1に公開されたばかりのgRPC関連のライブラリのConnectを紹介することにしました。 Connectの開発元が公開したブログは次のサイトにあります。 Buf | Connect: A better gRPC 公式ドキュメントはこちらです。 Introduction | Connect なお、gRPCについての詳細はこのエントリーでは紹介しません。ちょうど、H.SakiさんがgRPCの詳しい紹介の記事を書いてくれているので、ぜひ、みなさんこちらを参照ください。 作ってわかる！ はじ
React HooksとGraphQLで社内レガシーサービスを巻き取ってみたらものすごくはかどった話
New Network Provisioning System Leveraging Kubernetes and Cloud Native Open Source
今回伝えたいこと Hasuraの有効性を伝える 開発工数の削減効果 柔軟性の高さ セキュア 「開発工数の削減」という課題 昨今のエンジニアの不足や単価の上昇により、開発工数を十分に確保できない課題がある。どこの会社も開発工数を減らすために色々な策を講じているのではないか。 新技術の活用 慣れた技術の利用 プロセスの見直し 徹底した自動化 スコープの見直し 過剰品質をやめる などなど。今回は一番上の「新技術の活用」によって開発工数を削減できる可能性があるのではないかということを提案する。 こんなアプリを作ることになったとする 仮にあなたがこんなアプリを作ることになったとする。 シンプルなオンラインホワイトボードツールで以下のような機能があることが必要 付箋に文字を書ける 付箋を動かせる 付箋の色がユーザ固有の色になる 付箋を消せる(自分の作った付箋だけ) 付箋の位置、内容などをリアルタイムに
元Googleエンジニアのメンターによる講義を公開 ──トヨタ自動車が実践する「Flutter」研修の内容とは？ - TECH PLAY Magazine
Googleが開発したモバイルアプリ用のフレームワークであり、SDK（Software Development Kit）であるFlutter。トヨタ自動車では、自動車のコックピットのUX/UI設計・開発フローの一部で、同ツールを採用している。今回の「TOYOTA Developers Night」では、GoogleやYouTubeで活躍した講師を招いて実施しているFlutterの研修プログラムや成果を紹介した。 ■登壇者プロフィール 関沢 省吾 氏 トヨタ自動車株式会社 コネクティッドカンパニー コネクティッド先行開発部 デジタルコクピットソフト開発室 グループ長 名古屋大学大学院を修了後、2007年にトヨタへ入社。Lexus LFAをはじめ、各種車両の電子プラットフォーム開発や、TOYOTA LQのAIエージェント開発へ従事。2020年より現職。 Tim Mansfield氏 itali
Reactハンズオンラーニング 第2版
Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 賞賛の声 まえがき 1章 Reactの世界へようこそ 1.1 本書のねらい 1.2 Reactの過去と未来 1.2.1 第2版の変更点 1.3 環境の構築 1.3.1 GitHubリポジトリ 1.3.2 React Developer Tools 1.3.3 Node.jsのインストール 2章 React学習に必要なJavaScriptの知識 2.1 変数の定義 2.1.1
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 この記事は、定期的にトレンドに沿って更新していこうと思います。 twitterもやってます！ 今後も情報発信しようと思うので、フォローお願いします！ https://twitter.com/joer_sbt 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ま
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
はじめに Gridsome どんな感じで動くのか やってみる データソースとかもろもろ設定してみる ビルドする Wordpressをデータソースに設定してみる まとめ はじめに 前回、Docker + Remote Containersを最高だと紹介したわけですが、今回はGridsomeを紹介します。そもそも前回のブログはこれを試すために環境を整備しなおそうとしたのがきっかけでした。なお、前回のブログはこちら。 www.keisuke69.net どこらへんが最高かっていうと全てのデータソースに対してGraphQLでアクセスできるようになるところ。これって最高じゃないですかね。ま、最終的には静的サイトとしてGenerateしてしまうわけですが。 ちなみに、なぜ、今回Gridsomeを試そうと思ったかというと、最近聞いたとあるPodcastで紹介されてたからです。それだけ。 Gridsome
2023年は「Cloud Run を触って覚える」をテーマとした ひとりアドベントカレンダー を開催しており、Cloud Run のさまざまな機能や Cloud Run でよく使う構成などをご紹介しています。 最終日、25日目は Cloud Run を中心としたサーバーレス アーキテクチャをいくつか紹介します。2023年にちなんで23個のアーキテクチャを用意しました。 Cloud Run の概要は「gihyo.jp」で解説していますので、こちらもぜひご覧ください。 Web アプリケーション + API の 3-Tier 構成 (SPA) Web アプリケーション + API の 3-Tier 構成 (SPA) SPA (Single Page Application) がフロントになり、バックエンドの API サーバーとして Cloud Run を使用するアーキテクチャです。SPA は N
フロントエンドだけではないかもしれないけど、 エンジニアがおすすめするMac無料ツール2020下半期まとめです。 関係ないけど10人くらいサンタが家に来てくれないかな.... ■ Mac Apps 1. VSCode だいたいのエンジニアがみんな使ってるよね。って思うけど一応記載しときまっす。エディタなんて好みだと思うけどね。 こやつは拡張性高いし必須だと思ってます。 好きなテーマはDraculaです。 2. Draw.io Integration VSCode拡張。Drow.io単体でも使うけど Draw.ioをVSCode内で利用できる。エディタ内でグリグリ製図するの楽しいね。 3. Biscuit アプリ一元管理ツール。 BiscuitにslackとかNotionとかInoreaderを食べさせて便利につかわせていただいております。 Stationよりも使いやすいし動作が軽い。あとロ
<script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、
先日日本語訳版が発表されたばかりの OWASPアプリケーション検証標準 バージョン4（以下ASVS v4)を用いて、 Webアプリケーションセキュリティの評価をサービスに対して実施した感想などについて記載します。 ASVS v4は非常に包括的なWebアプリケーションセキュリティの評価ガイドラインです。 それこそ「エンジニア研修でまず最初に読もう！」と推進したくなるほど多角的に記載がされています。 どのぐらい包括的であるかについてですが、開発体制・ログ・認証・ログインフォームの設計・総当たりに対するアカウントロックの時間・GraphQLにおけるセキュリティなど、とにかく盛りだくさんな記載がされています。 すべてのエンジニアにとって必読の ASVS v4 こんにちは、佐分基泰と申します。 16年の新卒として入社し、サーバサイド -> 脆弱性診断士を経て、 現在はOSS Libraryセキュリテ
GraphQLやめました2020.05.27 当初Golang + GraphQLで作っていたAPIをRails + OpenAPIで作り直しました。なぜGraphQLで始めたのか、どうして作り直すことにしたのかなどを経緯とともにまとめました。 始まり弊社では qrop という農家さん向けのサービスを鋭意開発しています。 私はAPI等のバックエンドの開発を主に担当しており、このサービスの開発を始める段階でAPIは GraphQL にしよう、という話になりました。 GraphQL | A query language for your APIこの時点でGraphQLである必要性はなく、詳しいメンバーがいたわけでもなく、新しい技術に触れておきたいよねという程度の理由でした。 せっかくだしGolangで開発しよう、インフラはGCPにしよう、という具合にその時やりたいことを詰め込んで開発はスタート
イベント「【タイミー/Voicy/令和トラベル】Backend LT〜技術選定における“見極める力”とは〜」での登壇資料 https://reiwatravel.connpass.com/event/306794/
オライリーのサブスクを業務でもフル活用する：O'Reilly Online Learning の便利な使い方 #sms_tech - エス・エム・エス エンジニア テックブログ
介護事業者向け経営支援サービス「カイポケ」の開発をしている @koma_koma_d です。 エス・エム・エスには、エンジニアの学習を支援する制度がさまざま存在しています。そのうち、AmazonのURLをSlackで伝えるだけで即日注文、数日で自宅に技術書を届けてもらえる制度については、以前の記事でご紹介しました。 tech.bm-sms.co.jp 上記の制度とは別に、 「オライリーのサブスクリプションサービスを使わせてもらえる制度」 があります（2022年3月現在）。今回は、このオライリーのサブスクリプションサービスをどのように活用しているのかを社内のエンジニアに聞いてみました。 オライリーのサブスクリプションとは？ オライリーのサブスクリプションは、正式には「O'Reilly Online Learning」といい、技術出版社の O'Reilly が運営しているサブスクリプションサー
ゲーム音楽が好きすぎてWebサービス作りました。 「音楽サブスクリプションで聞けるゲーム音楽一覧サービス」です。 サブスクリプション契約しているのだから聴けるゲーム音楽は全て聴きたいわけです。サブスクリプションで聴けるゲーム音楽を紹介しているブログはいくつかありましたが、常に最新ではありません。そのため常に最新で検索しやすく私自身のコレクションとして管理したく開発しました。 2021/07/07 追記 Spotify API の追従が厳しくなったため Spotify の機能を全て削除しました。 このサービスの目的まず結論から。 「私が感動するゲーム音楽に出会うこと」を目的に作りました。俺得サービスです。 私はゲーム音楽が好きで好きで毎日聴いていました。 いつの頃かプレイしたことのないゲームの音楽をふと聴いてみると、知らないはずのゲームなのにとても感動できる曲がたくさんあることに気がつきまし
グラフモデルとSoEとGraphQL / TECH STAND #7 GraphQL 2022/03/03 に行われた stand.fmさん主催の TECH STAND #7 にて上記のタイトルで登壇しました。 今回の内容は GraphQLの採用を検討するにあたって、RESTとの違い、BFFとの違いをデータの観点から言語化したかった Hasuraが良いという意見と, Apolloやgraphql-ruby, gqlgenなどのハンドライティングなGraphQLが良いという意見の違いがどこから生まれているかの考察がしたかった データ指向アプリケーションデザイン(2017年リリース)にSoEやGraphQLへの言及がないため, 今だとこういう内容が書かれているんじゃないかという考察がしたかった をモチベーションに調査・検討しました。 発表のハイライトはこちらです。 以下発表内容です。一部発表時
静的サイトジェネレーターとは？ Static Site Generator（SSG） WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった それに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成する さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている 静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合 レスポンスが速い。サーバーでHTMLを動的に生成しないから サーバー代 ¥0✨ サーバーが必要ないため サーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり
Blog を作りました！！！！！ 会社を辞めて 5 ヶ月経とうとしており、ついに堕落しきった生活による危機感が生まれはじめました。 その危機感が結実したものがこの Blog です。 で、Blog を作ってみたものの書く内容が特にないので、まずはこのブログをどうやって作ったかについて書きます。 「こういう記法にちゃんと対応できてる？」を試す目的でもあります。 技術スタック 根幹になっているものは、 TypeScript Gatsby です。 元々は amdx + NextJS, もしくは完全自作 SSG を考えていたのですが、 ブログは完璧を目指しているといつまでも完成しない ということは知っているので、自分にとって自信があるツールとして Gatsby を選びました。 しかし、ただ使うだけなのはチャレンジ性がなかったので、TypeScript を使ってみることにしました。 昔の Gatsby
React Componentの実装ルールを決めてみた - Money Forward Developers Blog
こんにちは。 経費精算サービス「マネーフォワード クラウド経費」の開発チームでフロントエンドエンジニアをしている坂本です。 クラウド経費ではJSのライブラリとしてReactを採用しているのですが、最近クラウド経費で React Component を実装する際のルールをまとめたので、その話を書こうと思います。 なぜルールをまとめようと思ったのか Componentの分割ルールとしてAtomic Design、スタイルの管理としてstyled-components、GraphQL用のライブラリとしてApollo Clientを導入し実装を進めています。 昨年の10月までは挙げた３つとも使用していなかったので、試行錯誤しながら進めています。 チームメンバーの各々が試行錯誤しながら実装を進めていくので、最近はチーム内で認識の齟齬や持っている情報に差が出るようになりました。 そこで一旦現状を整理し
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベースならこれ一択。 認証サーバーの実装は毎度疲れるし、Firebase Athunetication はこの点においては OAuth Secret を置くだけ + Custom Provider も作れるので、最高。 それと比べて firestore は、ちょっと前に firestore べったりでアプリを試作したことがあったのだが、型がないためにかなり扱いづらく、また読み書きの速度が遅くパフ
記事の概要 この記事は、Meta 社 relay.dev チームの Jordan Eldredge 氏の Tweet で紹介された GraphQL 成熟度モデル (GraphQL maturity model) を個人的な見解を加えながら和訳した記事です。 jordaneldredge.com GraphQL を実装する上で、どの程度 GraphQL を使いこなせているか判断するための参考になれば幸いです。 実際の成熟度モデルの和訳 最初の Tweet 私は、GraphQLの利点がまだ十分には理解されていないと思っています。ほとんどの組織では、GraphQL の提供する価値を捉えきれていません。 そこで、私は「GraphQL成熟度モデル」をスケッチしてみました。あなたの組織はどの程度成熟して（＝使いこなせて）いますか？ もし以下に示す13の成熟度を達成していたとしたら、よりGraphQLを
AWS Startup ブログ スタートアップが AWS Amplify を使うべき3つの理由 こんにちは、スタートアップ ソリューションアーキテクトの水馬です。 今回のテーマは AWS Amplify です。 みなさん Amplify はご存知でしょうか？ Amplify は AWS を使用したスケーラブルな Web およびモバイルアプリ開発のためのフレームワークです。近年の複雑化するアプリケーションでは多くの場合、複数の AWS サービスを組み合わせてサービスを構築する必要があります。開発者はバックエンドの構築に加え、これらと連携する多くのソースコードをアプリケーションに実装する必要がりました。 Amplify を用いれば、複雑なバックエンドの構築、アプリケーションとの統合を簡略化し、開発者は本質的な機能の開発に集中することができるようになります。 今回は、スタートアップ において、
WebTransport と WebCodecs そして Web はどこまで "ゲーム化" するか | blog.jxck.io
Alternatives 結局 WebSocket が TCP に縛られていなければ良いのではという点に注目すると、 WebSocket over HTTP/3 が実現できれば HoLB などの問題は解決しそうだ。 しかし、仮にそこに複数のストリームを束ねようとしても、 WS の特徴上ストリームごとに 1RTT のハンドシェイクが必要となる。また、サーバから Stream を開始することができない(本当にそれが必要なのかは疑問だが)という問題があげられている。 また、 WebRTC の文脈で進んでいる RTCQuicTransport が、非常にというかあるケースではほぼ同じことを提供することになる点が指摘される。(策定者も同じ) これもやはり、 WebRTC が P2P 前提の仕様でスタートした点と Client-Server ユースケースとの乖離をベースに説明されており、すでに RTC
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、PayPayフリマバックエンド開発の三宅です。 今回、YJTC2019-shibuyaにてPayPayフリマのバックエンド設計について話して来ましたので内容を紹介したいと思います。 本記事ではセッション前半のバックエンド部分をメインに紹介させていただきます。よろしくおねがいします。 PayPayフリマとは PayPayフリマはフリマに特化したサービスとして10月7日にiOS版をリリースしました。PayPayの名前がつく通り、PayPayを利用してフリマの商品をかんたんに購入でき、買い手から価格の相談をできる機能などが特長です。 また、ヤフオク!とも連携し、ヤフオク!に出品されている固定価格商品の一部もユーザー体験に変わ
GraphQL Code Generator で TypeScript の型を自動生成する - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。 レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ という記事を書きましたが、この中で詳しく説明しなかった GraphQL のスキーマやクエリから TypeScript の型定義を自動生成する仕組みについて紹介します。 なお、今回紹介したコードは以下で試せます。 https://github.com/hokaccha/graphql-codegen-example-for-techlife GraphQL Code Generator を使った型生成 GraphQL のスキーマから TypeScript の型を生成するためのライブラリはいくつかあります。 Apollo GraphQL Code Generator などが有名どころです。今回はシンプルさや拡張性を考えて G
はじめに 今回の記事では、私が実践しているWebアプリを開発するための技術選定のポイントを徹底解説する。一概には言えないが、同時に私が普段個人開発で扱っている技術を中心に紹介する。 今回の記事がプロダクトの技術選定で迷っているプログラマーに届けば幸いである。 技術選定の原則 技術選定する上で重要なポイントは、その技術を学ぶことで得られるメリットや効率化できる部分を徹底的に調べることである。この行為は単なる時間の無駄ではなく、プロジェクトの技術選定の際にもよく実施される。言い換えれば、メリットがない技術は今学ぶべきではないということだ。 調べる方法はQiitaやZennで「技術選定」と検索して、評価の高い記事(Qiitaの場合は「LGTM」が多い記事、Zennの場合は「♡」が多い記事)を中心に調べることを強くオススメする。まずは先人の知恵を徹底的に模倣することから始めよう。 時間は有限で、か
こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js導入によるユーザー体験向上 デモ 定量的なパフォーマンス比較 ユーザー体験がどう向上したか FCP高速化の技術的な仕組み Next.jsとViteの基本的なアーキテクチャの違い 補足：工夫しているポイ
Architecture as Codeってなぁに？ 〜Infrastructure as Codeを超えて〜 - NRIネットコムBlog
こんにちは、最近Alexaに好きな音楽を伝えるとそればっか再生されて飽きてきたので、どうAlexaに伝えれば傷つかないかを考えている志水です。 「APN AWS Top Engineers/APN Ambassadors Week」の3日目の記事になります。といっても、特にTop Engineerに関係ない話をします。 Architecture as Codeという言葉をご存知でしょうか？2019年のAWSのブログでArchitecture as Codeという言葉が出て、そこから一部のマニアックな方が言及されているのですが、イマイチ浸透せず可愛そうな状況になっています。個人的には面白い概念だと思い、かつ最近Architecture as Codeの概念を継承しているサービスのAWS Copilot/AWS Amplifyが盛り上がっているため、改めてまとめようと思います。 Infrast
2018年の初めくらいから、仕事でGraphQL APIを何度も作っている。サーバーサイドもクライアントサイドも実装している。 最近クライアント側にRelayを使ってみている。 GraphQLのクライアントとしてはApolloを使う場合が多いと思うが、Facebook製のRelayもかなりよくできている。以前はTypeScriptに対応していなかったが、今はTypeScriptも使える。最近のバージョンではhooksのAPIがexperimentalではなくなり、ReactのSuspense API（Suspense for Data Fetchingは使わずに）と合わせて使える。 RelayはGraphQLのスキーマに制約を設けることで、クライアント側のAPIがデータの再取得やページネーションなどを抽象化している。換言すると、Relayからデータの再取得やページネーションに必要なスキーマ
TypeScript未経験でもスムーズに業務に取り組める、最強の学習用コンテンツを作った話 - NTT Communications Engineers' Blog
この記事は、 NTT Communications Advent Calendar 2023 19日目の記事です。 この記事では、TypeScript未経験のインターン生にすぐにSkyWayの開発に取り組んでもらうために、TypeScriptの学習用コンテンツを作成した話を紹介します。 学習用コンテンツでどのようなスキルを身に着けてもらったのか、効果的に学ぶためにどのような点を工夫したのかについても説明します。 はじめに 学習用コンテンツの目的 TypeScript学習用コンテンツの紹介 取り組んでもらった結果 より高度な内容について おわりに はじめに 皆さまこんにちは。イノベーションセンター SkyWay DevOps プロジェクト所属の@sublimerです。 SkyWayのチームでは、今年の8〜9月に現場受け入れ型のインターンシップを実施しました。 インターン生を受け入れるにあたっ
実サービスで GraphQL API をインターネットに公開する際は、悪意あるクエリに対する防衛が欠かせません。この記事における「悪意あるクエリ」とはサービスに意図的に負荷をかけるクエリのことです。GraphQL では 、木構造や再帰的な構造を利用して、一回のクエリで容易に数百万・数千万件のデータを取得することができます。そのようなクエリを実行してしまうと、アプリケーションサーバーや、その後ろにいる別のサービスに甚大な負荷がかかります。これは攻撃者からしてみれば恰好の的で、なんらか対策を講じる必要があります。 幸いこうした問題はよく知られており、クエリを静的に解析するライブラリがいくつか存在します。しかし、そうしたライブラリをどう使うかといったことはあまり議論されておらず、効果的な対策を行うのは依然として難しい状況だと感じます。この記事では、典型的な負荷の高いクエリとその具体的な対策を紹介
tl;drNext.jsはv9.3.0以降Initial Loadingの扱いが変わったクライアント側ではApolloを利用することができるが、Authorization Headerを設定するなら一工夫必要SSR時にはfetchによるシンプルなAPIリクエストをすると良い昨今のWebフロントエンド昨今のWeb開発において、React、TypeScriptとかのベース知識は当然として、やはりNext.js(あるいはNuxt.js)のような、SPA/SSR両方のニーズを汲み取りながら、dynamic routingを提供してくれたり、ビルド環境を高速に整備してくれるフレームワークが重宝されるようになってきていると感じます。 また、Reduxもアリですが、スキーマ駆動開発が推進できるGraphQL、特に尋常じゃなくステート管理が用意になるHooksとApolloクライアントの組み合わせは、フロ
先日 Wantedly さんのエンジニアリングマネージャー座談会に出演させていただいた。 wantedly.connpass.com テーマは、「エンジニアリングマネージャーの課題を相談したい人が多い」「その相談パブリックにしよう」なので、自分が最近課題に思っている「変化の速度感」についてざっくばらんに会話できたらなーというのが期待だった。 イベント中には、大きく 4 つの話をしたのかな。それぞれ会話の中では話しきれなかったことも補足しつつ書いていく。 技術スタックが違うチーム プロダクトと専門組織のバランス 専門組織を立ち上げるポイント 採用と oss-guild 技術スタックが違うチーム リンク先を見て貰うと顕著に分かると思うけど、はてなでは、そこそこバラバラな技術スタックを使っている。 hatenacorp.jp インフラは AWS、Google Cloud (オンプレはやっと撲滅し
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ
O'Reillyサブスクリプション和書まとめ - kawasima
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
The State of JavaScript 2019
TypeScriptとGraphQLで実現する型安全なAPI実装
gRPCのGo実装の新星、Connect | フューチャー技術ブログ
もうAPIを自分で開発するのは古い？Hasuraの強烈な有効性について紹介する - Qiita
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
GraphQL 導入の反省と再挑戦 / jsconf jp 2021
Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape
Cloud Run で作るサーバーレス アーキテクチャ 23 連発 - これのときはこう！
【2020年版】フロントエンドのおすすめMac無料ツール - Qiita
SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
今一番アツいWebセキュリティガイドラインOWASP ASVS v4でリスク評価した話
GraphQLやめました | GiFT（ギフト）株式会社
TypeScript x GraphQLで2年開発してみて
ゲーム音楽一覧サービス作った話｜himanushi
データ指向アプリケーションデザインから見るGraphQL
静的サイトジェネレーター Gatsby - Qiita
Gatsby + TypeScript で技術ブログを書くための知見
GraphQL 成熟度モデル - とろろこんぶろぐ
スタートアップが AWS Amplify を使うべき3つの理由 | Amazon Web Services
CtoCフリマアプリの作り方 (バックエンド編) 〜6カ月間のPayPayフリマ開発を支えた設計〜
Webアプリを開発する際に必要な技術選定のポイント
フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ
Relayに学ぶGraphQLのスキーマ設計 - cockscomblog?
GraphQL API を悪意あるクエリから守る手法 - yigarashiのブログ
Real World GraphQL on Next.js SSR
フルタイムでやる仕事を作る #wantedlydev - id:onk のはてなブログ