Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。

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.

ES2020 でimport.metaがリリースされた。 この機能を使うと、モジュールのメタ情報を取得することができる。 例えば、当該モジュールのパスを取得することができる。 モジュールのメタ情報を取得する機能であるため、CommonJS や Script モードで使用するとエラーになる。 import.metaでどのような情報を取得できるか、Node.js、Deno、ブラウザで試してみた。 それぞれのバージョンは以下の通り。 Node.js: 14.7.0 Deno: 1.2.2 Google Chrome: 84.0.4147.105 Node.js 前述の通り CommonJS だとエラーになるため、ES Modules で使う必要がある。 // SyntaxError: Cannot use 'import.meta' outside a module console.log(im

記事執筆時点での最新版の Node.js では、モジュールシステムとして ES Modules を使うことができる。 また、CommonJS で書かれたモジュールを ES Modules で読み込むこともできる。 Node.js のモジュールシステムは複雑すぎて苦手意識があったので、整理した。 この記事の内容は、Node.js のv14.7.0で動作確認している。 Node.js のモジュールシステムはバージョン毎に挙動が大きく変わるので、注意が必要。 そのファイルは CJS なのか ESM なのか Node.js で使えるモジュールシステムとして、ES Modules（以下、ESM）の他に CommonJS（以下、CJS）があり、CJS がデフォルトになっている。 Node.js におけるモジュールシステムを理解するためにはまず、Node.js が各ファイルをどのモジュールシステムとして

💎 ハイブリッド Vue フレームワーク Vue 3 で次のアプリケーションを構築し、ハイブリッドレンダリング、パワフルなデータフェッチなどの新機能を体験してください。Nuxt 3 は、Web 開発をシンプルかつパワフルにするオープンソースのフレームワークです。 GitHub で ❤️ する 新機能を搭載 Nuxt 3 は、より小さなコアで再設計され、より速いパフォーマンスとより優れた開発者経験のために最適化されています。 🪶 より軽く 最新のブラウザで最大 75 倍、サーバーデプロイとクライアントバンドルサイズを小さくしました。 🐇 より速く nitro（ナイトロと呼ぶらしい）による動的なサーバーのコード分割でコールドスタート（ハードウェアが初期化された状態から再起動すること）を最適化しました。 ❎ ハイブリッド soon ISG（Incremental Static Genera

I've created and consumed many API's over the past few years. During that time, I've come across good and bad practices and have experienced nasty situations when consuming and building API's. But there also have been great moments. There are helpful articles online which present many best practices, but many of them lack some practicality in my opinion. Knowing the theory with few examples is goo

webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ

% npm i audited 1292 packages in 5.692s 113 packages are looking for funding run `npm fund` for details found 2 high severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details vulnerabilities を訳すと「脆弱性」です。やばいですね。 npm audit コマンドを使うと、脆弱性に問題のあるパッケージを一覧できます。 % npm audit === npm audit security report === ... (中略) found 25 vulnerabilities (2 low, 23 high) in 1293 scanned package

ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。

Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +

JavaScript npm パッケージのセキュリティをチェックして必要なら対応する※当サイトにはプロモーションが含まれています。 1. npm パッケージのセキュリティ以下の 2つのコマンドを取り上げます。 npm audit コマンドあるプロジェクトのディレクトリ内で使用している npm パッケージのセキュリティをチェックするには、npm auditコマンドを使います。 npm auditコマンドを実行して問題のあるパッケージが見つかった場合、通常はパッケージを更新して対応することになります。 npm outdated コマンド脆弱性を持ったバージョンのパッケージの使用を避けるには、日頃からパッケージを更新することが大切です。更新可能なパッケージを表示するには、npm outdatedコマンドを使います。 2. 実際にこれらのコマンドを利用してみる実際に2つのコマンドを使った時の様子を

これからの構成管理は Ansible で！ DevOps の要！ Infrastructur as Code！

# 時間差トランジション トランジションフックを使用することで、リストの要素を表示するタイミングをずらす時間差トランジションが行えます。 このコンテンツは、コードが長すぎて書籍から削ったものなので、若干説明も入っています。 # デモ # 使用している主な機能 リストトランジション 205ページ トランジションフック 212ページ 算出プロパティ computed 120ページ # ソースコード ソースコード # 動的なリストを作成 まずは、トランジションを適用する動的なリストを準備しましょう。 リストへの要素の追加と削除、current プロパティの倍数の要素のみを抽出する機能を実装しています。 <template> <div class="example"> <p> <button @click="doAdd">追加</button> <button @click="current=1"