最近Next.jsのISR（Incremental Static Regeneration）を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe

#React やってて、props のバケツリレーを何か嫌がる人たまにいるんだけど、自分は props のバケツリレーそのものをそんなに悪いと思ったことがない。 「バケツリレーがつらい」ように見えるコンポーネントの大半はそもそも props の設計がおかしい場合が多く、本当の問題はそっちにあると思っている。 たとえば、次のようなバケツリレーはつらいかもしれない。ここでいう Body はサイドバーとしてフォロワーの一覧を表示し、メインコンテンツとしてフィード一覧を表示するみたいなものを想像して欲しい。フォロワー一覧の中で使う props とフィード一覧で使う props を混ぜて1つの親に渡している状況だ。

介護や医療、ヘルスケア、シニアライフなどの4つの領域で高齢社会の情報インフラを構築している株式会社エス・エム・エスで技術責任者をしている @sunaot です。2015年2月に入社して以来、技術責任者として開発組織づくりやサービスの内製化を進めてきました。 「『継続性アーキテクト』という生き方」というタイトルをつけていますが、タイトルで名詞化しているのは釣りで、アーキテクトの仕事について書いています。これは私がアーキテクトという仕事の可能性について考える中で、「継続性」に注目するとその仕事の価値がより発揮されていくのではないかと考えた内容をまとめたものです。 アーキテクトが抱える葛藤 私は役割柄、採用などでソフトウェアエンジニア（以下、エンジニア）と面談をする機会が多く、年に約200人くらいの方と話をしており、キャリアについて話を聞く機会も多くあります。その中で多くの方のキャリアのゴールと

2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード

「本を読んだのに、あまり内容を覚えていない」 「読んでも、いまいち理解できない」 「勉強のための本は、関心が湧かなくて読み進められない」 読書をしていて、このような悩みを抱いたことはありませんか？　もっと効率よく、そして記憶に残る読書にするためのテクニックがあります。それは、カナダのウォータールー大学が推奨している「SQ4R読書術」です。 今回の記事では、SQ4R読書術の方法と効果をご紹介しましょう。実際に筆者が試した結果や感想についてもお伝えします。 「SQ4R読書術」とは 「SQ4R読書術」の原点は、アメリカの教育心理学者フランシス・P・ロビンソンが当時の大学生や軍人向けに考案した、教科書を学ぶメソッド。それをもとにさらなる研究が重ねられた結果、拡張バージョンとして「SQ4R読書術」が確立しました。数々の著名な大学に普及し、なかでもカナダのウォータールー大学では「SQ4R読書術」をマニ

GraphQLを使って、ネイティブアプリにさまざまな集計方法のランキングを出す、というときについて考えている。 たとえば、ソーシャルブックマークアプリを作っているなら、「総合」「一般」「世の中」「政治と経済」みたいに、カテゴリごとのランキングを出すことがイメージできると思う。 どのようなqueryを用意して、どこまでパラメータ化するか、どこまで自由にするかによって、サーバークライアント間の責任分担や、その後の変更コストが変わってくる。 サーバーサイドで制御する rankings: [Ranking!]!みたいに、クライアントからは「ランキングください」とだけ送るパターンを考えられる。クライアントでは、Arrayの返ってきた順に画面上に表示する。 良い点 サーバーサイドでランキングの定義を持てるので、APIだけでなく、ウェブの画面に表示するランキングなど、他の面との仕様を揃えやすい 変更がサ

Fragment をコンポーネントのトップに置くな「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 export const MyComponent = () => { return ( <> <h1>This is a sample code.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui

事例集です。 きのう、GitHubの通知を見たら、個人のリポジトリに My First PR というタイトルのPRが来ているのに気づいた。PR出すところを間違えたのかな、と思って見てみたがどうも様子がおかしい。 prog という名前のバイナリファイルを置いている .github/workflows/ci.yml*1の中身をガッと書き換えている on: [pull_request] でworkflowを起動している 20並列でjobが走るようにmatrixを設定している fail-fast: false なので、どれか1つのmatrixが失敗しても他のジョブは続行される base64 encodeした文字列をdecodeしてevalしている ドメインの名前解決を行ったあと ./prog を実行するコマンドにdecodeされた PRをめちゃくちゃな回数closeしてreopenしている PRを

こんにちは、Wantedly で Webエンジニアをしている渡邉(@eityans) です。モチベーション・マネジメントサービスの Wantedly Pulse を開発しています。 Pulse（パルス）/ チームの状態 Slackを通じてチームの価値観を浸透させ、メンバーの抱える課題や隠れた貢献を可視化。行動のベクトルを束ね、自律して同じ価値に向かうチームを生み出す、新しいモチベーション・マネージメントツールです。 Slackを通じてメンバーの抱えるモチベーションの課題や隠れた貢献を可視化。行動のベクトルを束ね、自律して同じ価値に向かうチームを生み出します。 ... Pulseはチームの状態を可視化するツールです。会社全体をチームとして扱うこともできますが、従業員数の多い企業の場合、より小さなチームの状態を可視化したくなります。Pulseでは、上司部下の関係を設定することで、チームの設定が

こんにちは、デザインエンジニアのショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更新の意義 早くも 1968

Google、ORMが生成するSQLが遅いときの調査を容易にする「sqlcommenter」をオープンソースで公開。Rails、Spring、Djangoなど主要なフレームワークに対応 SQL文を直接書かなくとも、自動的にSQL文を生成、実行してくれるORM（Object-Relational Mapper）は、プログラミングを容易にしてくれる技術としてRailsやHibernate、Springなどさまざまなフレームワークなどで活用されています。 一方で、ORMが生成するSQL文はときに複雑に、あるいは非効率なものとなり、データベース処理の遅さにつながることもあります。 このとき、SQL文の生成と実行を明示的にコードとして記述する必要がないというORMの特徴が、なぜデータベース処理が遅くなったのか、どのようなSQL文が生成され、そのどこに原因があるのか、といった調査を難しくている面があり

イノベーション イノベーションを起こすためのスキルを習得し、業務に活かす方法を学びます。

この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb

新年あけましておめでとうございます。毎年年頭に更新している「私の情報収集法」を今年も公開します。何かの参考になれば幸いです。 インプットで参照している情報源（海外） 海外からの攻撃が主流となる中、海外情報をいち早く把握する事の重要性が増している気がしますので、今年は海外情報源から書きたいと思います。 昨年の記事では多くの海外サイトを紹介しましたが、試行錯誤の結果、まとめサイトでもある「morningstar SECURITY」や「DataBreaches.net」を押さえておけば、主要サイトが概ねカバーされると分かったので、今年は数を絞っています。 サイト キタきつね寸評 morningstar SECURITY 去年と変わりませんが、情報の更新頻度、そして関連ソースの網羅性という意味では、英語系のセキュリティニュースとしては最良の情報ソースの１つかと思います。私は「Daily Secur

技術部の笹田（ko1）と遠藤（mame）です。クックパッドで Ruby (MRI: Matz Ruby Implementation、いわゆる ruby コマンド) の開発をしています。お金をもらって Ruby を開発しているのでプロの Ruby コミッタです。 本日 12/25 に、ついに Ruby 3.0.0 がリリースされました。一昨年、昨年に続き、今年も Ruby 3.0 の NEWS.md ファイルの解説をします。NEWS ファイルとは何か、は一昨年の記事を見てください（なお Ruby 3.0.0 から、NEWS.md にファイル名を変えました）。 プロと読み解く Ruby 2.6 NEWS ファイル - クックパッド開発者ブログ プロと読み解くRuby 2.7 NEWS - クックパッド開発者ブログ Ruby 3.0 は、Ruby にとってほぼ 8 年ぶりのメジャーバージョンア

おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小

React界隈で話題になっている「React Server Components」についてまとめました！ どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得して

こんにちは。TAK(@tak_dcxi)です。 今回は SNS で頻繁に話題になる「font-size の指定はpxとremどちらを使うべきか？」問題について。 自分が観測している限りだと、 font-size の指定は px と rem どちらを使うべきか？ Web デザイナーはコーディングの知識があったほうがいいか？ jQuery はオワコンなのか？ 実装者はピクセルパーフェクトに拘らないとダメか？ h1 タグはどこに使うべきか？ あたりは四半期に一度は話題になっている感覚がありますね。 おそらくこの記事を読んでいる方や、もしくはタイムラインにこの記事の Twitter カードなんかが流れてきてウンザリしている方も多いことでしょう。僕も正直「またこの話題か…」という感想ですが、頻繁に話題になるということはそれだけ意見が割れているということなので、自分なりの見解をまとめるためにもこの記事