Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
![Next.jsの考え方](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae8c3e7f858cf158026c71b26b9d3ec38e7c39c3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AD4qcBOx--%2Fg_center%252Ch_280%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci80MDI3ZWQyZGM4LnBuZw%3D%3D%252Cw_200%2Fv1627283836%2Fdefault%2Fog-base-book_yz4z02.jpg)
TypeScript を学習中の方に勧められる練習問題集として手頃なものがないなと思い、作ってみました。 TS の問題集としてはtype-challenges がよく話題に上がりますが、実用上あそこまでの型パズルを使うことはあまりないため、最初に取り組むにはハードルが高いです(もちろん知っていたら便利ではありますが、初学者向けではない)。 想定読者 JavaScript を書くことには慣れている TypeScript はこれから・まだ慣れていない TypeScript の基本的な型についてはすでに知っている はじめに JavaScript の機能に関する問題は扱いません。TypeScript の型システムに関する問題のみ扱います。 そもそも TypeScript についてよくわかっていない場合、サバイバル TypeScriptなどで学習から始めてみてください。 「型がつけられると何が嬉しい
Next.js と TypeScript のプロジェクトに ESLint と Prettier を併用して静的解析と VSCode の保存時に自動フォーマットを実行します。 Prettier (プリティア) とはコードフォーマッターで、ソースコードを整形してくれます。 デフォルトで HTML/JavaScript/CSS/JSON/YAML の他、 JSX、TypeScript や Markdown、GraphQL、styled-components など様々な形式に対応しています。 ESLint 単体コードフォーマットが可能なのですが、Prettier では ESLint では整形出来ないコードも整形してくれます。 今回、 Prettier はコードフォーマット、ESLint は構文チェックツールとして併用します。 環境macOS Big Sur 11.6Next 12.0.3React
仕事でNext.jsを使用しており、コード整形のためのPrettierを使っています。 導入方法や設定方法についてまとめました。 ほとんどの方はeslintと併用されている方がほとんどだと思うので、併用するための設定方法などについてもまとめます。 インストール eslint-config-prettierを入れることで、Eslintと被るルールに対して、Prettierを優先することができます。 # npmの場合 $ npm install -D prettier eslint-config-prettier # yarnの場合 $ yarn add -D prettier eslint-config-prettie Prettierの設定を行う 次にPrettierの設定を行っていきます。 .prettierrcが無い場合は、プロジェクトルートに自分で作成してください。 .prettie
どうも、株式会社iCAREフロントエンドエンジニアのoreoです。 弊社フロントエンドは、Vue.js, TypeScriptで開発をしています。あるPRで、弊社技術顧問の方から、下記レビューを頂きました。 リファクタするときに気になったんですが、不要なところに?がついているのを散見しましたキャスト! | ? | asはどれも危険なコードでレビュワーの負担も大きくなるので、きちんと必要なところだけに入れるように気をつけてみてください 今まで?や!を安易に使っていたので、彼らの挙動について整理してみたいと思います! ?について オプションパラメーター(?) 概要 引数にオプションパラメーターをつけると、その引数が省略可能になります。例1.1で、test()を実行した場合、Expected 1 arguments, but got 0. と怒られますが、オプションパラメーターをつけると(例1.
注釈 本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。 書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 GitHub上で連絡 をお願いします 1 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。 1 https://github.com/future-architect/typescript-guide/pulls
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎(gfx)さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと(どちらかというと既存のプロジェクトに)導入するための
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く