Next.js開発環境構築（App Router, TypeScript, Tailwind CSS対応）
Next.js（App Router）にTypeScript・Tailwind CSS・shadcn/uiを組み合わせた開発環境の構築手順です。Prettier・ESLint・husky・lint-staged・npm-run-all・Storybookの設定までを備忘録として残します。
記事一覧
21位 22位 gulpでEJSをHTMLにコンパイルする環境を作る
テンプレートエンジンのEJSを、gulpでHTMLにコンパイルする環境の作り方です。パッケージのインストールからgulpfile.jsの書き方、JSONのデータの読み込みまでをまとめます。
23位 JavaScriptライブラリの用途別まとめ
JavaScriptのライブラリを、カルーセル・ライトボックス・スクロールエフェクト・アニメーション・グラフ・エディタ・シンタックスハイライトなどの用途別に、ライセンスとリポジトリを添えて一覧にしています。随時更新しています。
24位 Google タグ マネージャーの初回設定手順とGA4の連携方法
Google タグ マネージャーのアカウントとコンテナを作成してサイトに設置し、「Google タグ」にGA4の測定IDを設定して連携する手順を解説します。
25位 counter()とcounters()でCSS自動採番をシンプルに実装する
CSSのcounter()とcounters()を使って、見出しやリストに番号を自動で振る方法を、サンプルコードと出力例で説明します。数字のフォーマットの指定と、3桁以上の0埋めの方法も扱います。
26位 macOSにGitをインストールする
Homebrewを使って、macOSに新しいバージョンのGitをインストールする方法です。Macに標準で入っているGitとの見分け方と、HomebrewのGitが使われるようにパスを通す手順も解説します。
27位 GA4から取得したデータをmicroCMSに送信して、人気記事ランキングを実装する
Next.jsとmicroCMSで作ったサイトに、GA4の表示回数をもとにした人気記事ランキングを表示します。Google Cloudのサービスアカウントの準備から、microCMSへの送信、Vercel Cron Jobsでの定期実行、ページへの出力までを解説します。
28位 Fractalでスタイルガイドを作ってみる #1 ― インストールから始め方まで
スタイルガイドジェネレーターのFractalを使って、Webサイトのコンポーネントをまとめたスタイルガイドを作ります。1回目は、FractalとFractal CLIのインストールと、newコマンドでプロジェクトを作って開発サーバーを起動するまでを説明します。
29位 HHKBでDIPスイッチを触らずにモードを切り替える
HHKB Professional HYBRIDで、WindowsとmacOSのモードをショートカットキーで切り替える方法です。本体背面のDIPスイッチを触らずに切り替えられます。
30位 Next.jsでAuth.js認証を実装する
Next.js（App Router）で、Auth.js（NextAuth.js v4）を使ったGitHubとGoogleのソーシャルログインを実装する手順です。環境変数の設定、ログインページとマイページの作成、各プロバイダのOAuthアプリの設定までを説明します。
31位 Fractalでスタイルガイドを作ってみる #2 ― プロジェクトを0から始める方法と最もシンプルなコンポーネントの作成
Fractalのプロジェクトを、newコマンドを使わずに0から作る方法を説明します。ディレクトリの構成、fractal.config.jsの設定、最もシンプルなコンポーネントとドキュメントのインデックスページの作成、開発サーバーの起動までを扱います。
32位 ローカル環境にWordPressを構築できるLocalのインストール方法
ローカル環境にWordPressの検証環境を作るなら、Localを使うと簡単に構築できます。Localのダウンロードとインストール、WordPressのサイトを作るまでの手順を解説します。
33位 Shopifyで開発ストアを構築する
Shopifyの環境構築で使う、開発ストアの作り方を説明します。Shopifyペイメントのテストモードでテスト決済をする設定と、テスト用のクレジットカード番号も記載しています。
34位 Google アナリティクスの初回設定手順
Google アナリティクス（GA4）は、アカウント、プロパティ、データストリームの順に作成し、Google タグをページに設置すると計測を始められます。手順を画面つきで解説します。
35位 CSSのカスケードレイヤー「@layer」の使い方
CSSのカスケードレイヤー（@layer）は、スタイルをレイヤーに分けて、どのレイヤーを優先するかを決められる機能です。レイヤーの作り方、順番の指定、@importでの読み込み、詳細度との関係を解説します。
36位 macOSにHomebrewをインストールする
macOSのパッケージマネージャーHomebrewのインストール方法です。インストール済みかを確かめる方法から、インストール後にパスを通す手順、動作確認までを解説します。
37位 カスタムプロパティにSassの変数を渡すと変数のままコンパイルされてしまう
CSSのカスタムプロパティの値にSassの変数を書くと、変数名のまま出力されます。Sassがカスタムプロパティの値を書かれたとおりに出力するためで、インターポレーション #{} を使うと変数の値を渡せます。
38位 GA4で特定のIPアドレスを除外する
GA4で社内などからのアクセスを除外するには、データストリームの「内部トラフィックの定義」にIPアドレスを登録し、データフィルタを有効にします。設定の手順を解説します。
39位 text-decorationでマーカー（蛍光ペン風の下線）を引く方法
文字にマーカーを引くCSSを、linear-gradientを使う方法とtext-decorationを使う方法で比較します。text-decorationなら、線の太さと位置をpxで指定できます。Safariでの注意点も紹介します。
40位 buttonタグにはtype="button"をつけるべし
buttonタグのtype属性を省略すると、既定値はsubmitになります。フォームの中で意図せず送信されないように、送信以外のボタンにはtype="button"を明示しましょう。