useState の初期値 ―― 変化する Props の値を固定する
この記事は、以下の記事で述べたライフタイムのうち、 2. レンダー, 3. コンポーネント に関連する内容です。 両方を合わせて読むと、より理解が深められると思います。 はじめに: 止まらないデータの流れを意図的に止めることが可能 React の、特に Function Component の良いところといえば「ステートを更新したのに表示が更新されない」ようなバグを防ぐという思想が強く押し出されていることですよね？（圧） React の元開発者である Dan Abramov 氏のブログの「壊れにくいコンポーネントを書く」ことについての投稿を見れば、そのような側面がよく分かると思います。 const SomeComponent: FC = () => { const [count, setCount] = useState<number>(0); // 再レンダリングのたびに、下の式が実行さ
Next.js App Router (app ディレクトリ) の逆引き辞典
2023/05/05 追記 v13.4.0 をもって App Router は安定版になりました！ https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 （v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました！） ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ
大塚流フロントエンド開発の歩き方
フロントエンド開発は考えることが多い。とくに 0 -> 1 の場合だと、何からはじめたらいいのか？が全然わからず、途方にくれてしまうこともあるでしょう。実際、ぼくがそうでした。 そして、そういった情報はなかなか検索しても出てこない。設計方法や実装方法みたいなものはたくさんあるのに。なので、書いてみました。 これは、ぼくがいくつかのフロントエンド開発を経て「これを最初に知っていれば、もうちょっとうまくできたかも？あの失敗がなかったかも？？」をまとめたものです。 フロントエンド開発に不慣れな方の参考になれば、これ幸いです。 まずは仕事のゴールを確認する プロジェクトや各フェーズごとに仕事のゴールは異なるため「何をもって仕事が完了したと言えるか？」を確認する。たとえば、要件定義フェーズであれば「画面仕様書が完成する」とか、開発フェーズであれば「API結合試験がすべて完了し、バグチケットがすべてク
JSConf JP 2022 公開資料・Twitterリンクまとめ
2022/11/26(土)で開催された JSConf JP 2022に関する、現時点での公開資料と Twitter アカウントリンクをまとめました。 よろしければご活用ください。 ※2022/11/28追記 ねぎしさんからいただいたコメントを元に、各講演に時間指定をした YouTube リンクを追記しました。 （時間指定をすると流石に動画埋め込みはできないようだったので、リンクでご容赦ください🙏） はじめに 登壇者名は敬称略させていただいています。 Twitter アカウントについては、ご本人が当イベントで登壇されることに言及されている、スライドに記載など、確認できたものを記載しております。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ動画 当イベントは、3つのトラックに分かれて講演が行われました。 その3つともアーカイブ動画が残っているので、後から見直すこ
TypeScript で仕様が一目瞭然な定数ファイルを書く
オブジェクトの中に、定数をフラットに列挙しただけの定数ファイルを書いていませんか？ 私は、フロントエンドの開発において、 JavaScript の簡潔なオブジェクト記法 TypeScript による型チェック / IDE 等による入力補助 を活用した保守性の高い定数ファイルの書き方を日夜研究しているので、4つのポイントに着目して解説しようと思います。 ▼ Enum 的な記述についてまとめた記事です。本記事を読んだあとで、こちらもチェックしてみましょう。 （2024/10/15 訂正）「オブジェクト-キー」形式（genre.name）より 「疑似的な名前空間」形式（genre_name）が無難 この記事においては、以下のようなオブジェクトに定数たちをまとめることを推奨していました。この形式を 「オブジェクト-キー形式」 と呼ぶことにします。 object.key の形式にすることによって、E
Googleのソフトウェアエンジニアリングから学ぶコードレビュー
オライリー・ジャパンから「Googleのソフトウェアエンジニアリング」という翻訳の書籍が発売され、その中からコードレビューに関する箇所を読んで学んだことの紹介です。 サブタイトルの持続可能という表現が良い この本のサブタイトルは「持続可能なプログラミングを支える技術、文化、プロセス」です。 この持続可能（sustainable）の部分がとても響くものがあって、持続可能とするためにはどうしたら良いだろうか？ これを根源的な欲求として持ち、コードとコードレビューに向き合うのが本書では語られています。 実は、原著のサブタイトルは「Lessons Learned from Programming Over Time」で、 持続可能という直接的な表現はありません。 Over Time が刻を超越して、転じて持続していく様子につながると感じます。 持続可能の表現は、本文序文に sustainable
VSCode のおすすめ拡張機能と便利な設定、キーバインド集 2022
主にフロントエンドを開発している、ぼくがかんがえたさいきょうのVSCodeを紹介します。 便利な設定, キーバインド集だけでも参考にしていただけると幸いです。 2023年度版 拡張機能 まずは言語問わず使えるものを紹介していきます。 Japanese Language Pack for Visual Studio Code vscodeを日本語にする。 Path Intellisense ファイル名を autocompletes します。 GitLens — Git supercharged commit単位でのファイル比較、最新のcommit内容表示 REST Client vscode上でgetやpostなどのHTTPリクエストを送信できます。 また、GraphQLにも対応しているみたいです。 Todo+ コメントにToDo: を入れるとToDoを作成することができる。 例外処理を入れ
こんにちはMUI！ 新しくなったMaterial UI v5
どうもよしです。久しぶりの投稿になります。 元々、Material Design をベースとした UI コンポーネントライブラリである、Material UI の v5 が遂にリリースされました！ v4 からどう変わったのか自分でも試すなど、さらっと見てみたので、ここにまとめてみました。 ※2023/11/25 MUI の更新に伴い、MUI v5.0系のドキュメント参照したほうが良い部分はリンクを差し替えました。 Material UI とは？ 元々、Google の Material Design をベースに開発された、UI コンポーネントライブラリです。 Material UI の概要や v4 の機能に関しては、以前に記事を書いていますので、よろしければそちらをご参照ください。 ※今回の記事は、主に以下の公式ブログ記事をもとにしています。引用文の出典もそちらです。 そのため、すでにそち
React向けUIコンポーネントライブラリ、Material UI(v4)の紹介
注意書き あらかじめ言っておくのですが、今回はそこまで実践的なことは書いていません。 というのも、Material UI の機能を紹介するにしても、できることが多すぎてどこを抜粋するか悩んでしまったためです（苦笑） 公式ドキュメントを見ていただくとよくわかるのですが、あらゆる使用例、サンプルコード（JS、TS ともに）およびプレビュー表示が豊富に載っています。さらっと見ていくだけでも、こんなコンポーネントも用意されているのかと発見があって楽しいくらいです。 なので、提供されているコンポーネントに関しては、大まかな概要を紹介する程度にとどめます。 もし興味がわいた方はぜひ公式ドキュメントを見てみてください。 各コードには CodeSandbox へのリンクもあるので、お気軽に試せますよ。 2021/09/16時点で、5系が beta リリースされています 2021/09/16に5系がリリース
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
