１．getInitialPropsの終焉 1.1. Next.jsではgetInitialPropsのSSRが終わったことにされている Next.jsの9.3以降、getStaticPropsやgetServerSidePropsが登場し、現在ではgetInitialPropsを使ったSSRが終焉を迎えたかのような風潮となっています。しかしgetStaticPropsとgetServerSidePropsは、実際の所で大きな欠点を抱えています。 getStaticPropsはSSG前提で使うなら全く問題ありません。しかし、ある程度の更新頻度をもつシステムやリアルタイムな編集機能と相性が悪いです。ISRで使う場合も有効期限後の一回目で古いデータが表示される仕様があるので、タイミングが悪いと、せっかっく訪れた人に古いデータを渡してしまうことがあります。使いどころによっては強力ですが、用途は限定

週1回のサウナが習慣になったCI部1課の山﨑です。 今回はIAMポリシー設計のポイントを考えて整理してみました。 はじめに IAMポリシーの基本 IAMポリシーの要素 ポリシー例 IAMポリシー設計のポイント 5Wで要件を整理する Organizations SCP リソースベースのポリシー IAMユーザー IAMロール まとめ はじめに AWSにおいて認証・認可（権限の付与）を司るサービスと言えば IAM（Identity and Access Management）です。IAMではJSON形式でポリシーステートメントに具体的に許可したい操作、拒否したい操作を記述して認可（権限の付与）を行い、IAMユーザーやIAMロールに関連付けたりしてポリシーを適用します。今回は実際にポリシーを設計する際のポイントを考えて整理してみました。なおAWSが扱うポリシーはいくつかの種類と評価の優先順位がある

対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 入門記事へのリンク プロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方

コード品質向上のための実践的アドバイス Photo by Diana Polekhina on Unsplash. はじめに Reactは、構成の方法について特に決まりがありません。まさにこれが理由で、プロジェクトをクリーンで保守可能な状態に保つことは、私たちの責任なのです。 今日は、Reactアプリケーションの状態を改善するために従うべきベストプラクティスについて説明します。これらのルールは広く受け入れられているため、この知識を持つことは必須です。 すべてコードで示します。さあ始めましょう！ 1. JSXの省略形を使用する ブール変数の受け渡しには、JSXの省略形を使うようにしましょう。例えば、Navbarコンポーネントのタイトルの可視性を制御するとします。 悪い例

dodaチャットサポート 対応時間：10:00～22:00(日曜・年末年始を除く) 自動案内は24時間365日対応 転職の「モヤモヤ」、一人で悩まず 気軽に相談してみませんか？ dodaの使い方は？ 今の仕事を続けるべき？

こんにちは！ Webフロントエンドエンジニアの眞野 隼輔です。 毎年大きな反響を頂いている、エンジニアコースの新人研修の内容を紹介させていただきます。 研修の概要 リクルートでは、エンジニアコースでスペシャリスト採用された新卒のエンジニアを対象に、現場で培われた「本当に必要な生きた知識・技術」を取り入れた新人研修を開催しています。 前半は研修では各分野に長けた社員による講義形式の技術研修を行い、後半は仮配属という形でそれぞれ別の部署に配属されて実際の業務を経験するOJTとなっています。 この技術研修はそのほとんどが内製されており、ベテラン社員による経験を元にした講義を通して生きた知識・技術を獲得できます。また、実際に手を動かす演習型の講義ではベテラン社員からのレビューやフィードバックを得られるため、知識の定着や更なる成長へと繋がります。 本年度の技術研修も、昨年度に引き続きフルリモートでの

今回は最近その存在感がますます上がっているNext.jsとサーバーレスの話です。 はじめに サンプルアプリ Serverless Next.js Component デプロイ 作成されるリソース CloudFrontのディストリビューション Lambdaファンクション S3バケット 大まかな挙動 できないこと まとめ はじめに この投稿は2020年11月27の21時から開催予定のイベント（ライブストリーミング）で話す内容です。 serverless-newworld.connpass.com もし間に合えば、かつ時間があればぜひライブ配信のほうにも参加ください。 さて、今回は11/9に登壇させていただいたFront-End Studyでの話でも少し紹介したServerless Next.js Componentについて取り上げます。 僕は昨今のフロントエンドWeb周りの技術では最近は一番N

はじめに このエントリは全5回を予定する19卒新人ブログリレーの第4回目です。 はじめまして、リクルートテクノロジーズ新卒2年目の高橋 勇人です。 現在は不動産検索サービスSUUMOのフロントエンドエンジニアとして働いています。新卒入社してからの1年間、SUUMOの新機能開発に携わり、物件を地図から探す機能の開発を進めてきました。 SUUMOではこれまでJavaScript+jQueryで開発されてきましたが、SPサイト上で地図による物件探し機能を実現するために、React+Reduxという技術スタックが採用されました。 （※SP＝スマートフォン） 長期的な開発がされてきたプロダクトで、これまで使ってきていなかった技術スタックでの開発を推し進めるにあたり、継続的な保守性を向上するための取り組みの一環としてテストの整備が進められました。 本記事では、React+Reduxでの地図機能の開発に

JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して

世界一わかりみの深いOAuth入門

去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。

認証と認可についての知識が必要になったので、基礎的なことを学んでいます。 一切何も知らない状態から手当たり次第に細かく調べるのは大変だったので、超サマリを整理してみようと思います。 この本は「個々の要素に詳しくなる必要はないんだけど、概要くらいはさっと把握しておきたい」とか「手当たり次第に詳細調査をする前に、一瞥してこれから踏み込もうとしている領域の超俯瞰マップを作る」という感じで使うことを想定しています。 同じ様な方の役に立ったら、とても嬉しいです。 この本は筆者の理解に連動して追記修正される可能性があります。

概要 AI革命のインフラを目指すSaaS系スタートアップのFastLabel（最近資金調達しました！記事はこちら）で働いているが、今までGCPで動かしていたインフラを訳あってAWSに基盤を載せ替えることになった。 スタートアップは何よりスピードが求められるが、だからといってセキュリティやモニタリング、可用性を疎かにはできないし、大きなインフラコストに耐えられるほど体力もない。 アプリケーション要件を満たしつつ、以下を実現するアーキテクチャを設計する。 シンプルな構成・構築の容易さ スピーディな開発・適用 可用性の担保 セキュリティの担保 最低限のモニタリング 低コスト（リソース・運用） ここで紹介するアーキテクチャは実際に運用まで行っており、問題なく稼働しているし、先日AWSの方にレビューしてもらったが、「なかなかイケてる」というお言葉をもらい、特に改善点も指摘されなかった。 結論（アーキ

「あのサービスの中身はこうなっていたのか！」 総勢31人の個人開発者が送る、３5個のWebサービス・アプリの中身がどんな風に作られているのかわかるシステム構成事典がなんと無料で読める！ - テレビで取り上げられたサービスや、Twitterトレンドに載るなど話題になったサービス - 広告収入や有料課金で収入を得ているサービス - リアルタイムなデータのやり取りやAIを活用など尖った技術を利用したサービス - シンプルな構成で高速開発に特化したサービス などなど、さまざまな種類のサービス・アプリについて、概要や使用技術を図&文章にして1枚にまとめています。 ・個人開発を始めてみたい方 ・フルスタックな構成を学びたい方 ・駆け出しエンジニアの方 色々な方におすすめの書籍となっております！無料ですのでぜひご一読ください！

ITエンジニアが投票した「ITエンジニア本大賞2021」ベスト10発表。「オブジェクト指向UIデザイン」「Clean Agile」「思考法図鑑」など 「ITエンジニア本大賞」は翔泳社が主催するイベントです。ただし、対象となる書籍は出版社を問わず技術書、ビジネス書全般です。刊行年も関係なく、これまで大賞に選出された書籍を除き、この1年を振り返っておすすめしたい書籍を投票します。 今回発表されたのは技術書部門とビジネス書部門のそれぞれ10冊。 このなかから特に投票の多かった技術書3冊、ビジネス書3冊について、同社が2月18日、19日に開催するオンラインイベント「Developers Summit 2021（デブサミ2021）」において、書籍の著者、編集者、翻訳者などによるプレゼン大会が開催され、特別ゲストとイベント観覧者による最終投票を経て技術書・ビジネス書の各大賞が決定されます。 技術書部門

JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの

イントロ ABEJAアドベントカレンダーの4日目に一昨日飛び込みました、長期インターン生の佐藤(Twitter: @TodayInsane)です。 去年は機械学習を通して、TWICEというK-POPグループへの愛を語りました。 ABEJAには昨年4月、「本当に何も出来ないけど、休学してプログラミングとかエンジニアの経験を積みたいんです」という何とも不安な主張をするぼくを受け入れていただきました。 この1年半のエンジニア / リサーチ両インターンの過程で出会った良い本をどしどし紹介します。 ちなみにインターン開始時は プログラミング、Pythonだけならちょびっと書けます！(ABCのB問題とか機械学習ライブラリの写経) HTMLってどんな風になってるんですか？(？) サーバ...？？リクエスト...？？ JavaScript、名前は聞いたことあります 英語の論文しんどい、2時間ぐらいかけてI

年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr

AWS学習を始めようと考えている人 「AWSとは、概要や全体像、メリットデメリットが知りたい」 「AWSの学習方法が知りたい」 こういった疑問に答えます。 本記事のテーマ 【AWS初心者向け】AWS学習方法まとめ【15時間で達成できる】 AWS学習の始め方 AWSやクラウド初心者の方がAWSを学ぶための方法を纏めました。 ①クラウドを学ぶ ②AWSの概要を学ぶ ③知識の定着（AWS公式ハンズオン実施） ④AWS運用の現場に参画 知識定着のため、インプット、アウトプットのバランスを考えてまとめています。 IT基礎知識（基本情報技術者レベル）がある前提になっていますので、 インフラ基礎知識が足りていないと感じる方には下記の記事もおすすめです。 記事の信頼性 筆者はAWS経験5年程度です。AWS資格は5冠達成しました。 現在は大規模ECサイトのAWS運用を任されるようになっています。 今回紹介し

この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele