Web サイトをリリースする前に必ず確認したいチェックリスト ~ React / Next.js / Tailwind CSS 編 ~

はじめに

概要

fwywd の採用１次試験

レベル１：表示系

内容の確認

• ユーザーが読みたいと思える内容になっているか推敲
  • １次試験の自己紹介サイトの場合はみなさんのプロフィール情報に編集しましょう
  • 自己アピールをうまく書いておければポートフォリオとして活躍します

表示崩れの確認

• Google Chrome の Developer Tools で PC 版やスマホ版の解像度で確認
• Google Chrome, Firefox, Safari, Edge と各ブラウザで確認

文字のフォントや間隔の調整

• 文字の大きさ：text-sm など
• 文字の太さ：font-bold など
• 文字の色：text-white など
• 文字の間隔： tracking-wider など
• 文章の間隔： leading-5 など
• ホバー時： hover:opacity-75 など

CSS

• _app.tsx の global.css に Tailwind CSS 周りを設定
• Tailwind CSS を中心に書き、不要な CSS Modules を生み出していないか
  • 不要なグローバルの CSS はつくらない
  • style.module.css のようにモジュールとして読み込む
  • できれば sass をインストールして SCSS を使用
• tailwind.config.js の設定を使っているか
  • テキストや背景の色設定
  • 背景画像
• 余白：py-2, mx-1 など
• レイアウト：flex と grid の使い分けなど
• グリッド間の線：divide-x など
• 縦横の位置：flex + justify-center や items-center など
• レスポンシブ対応
  • 画面に合わせた横幅の指定：max-w-xs sm:max-w-sm lg: max-w-lg など
  • 横方向のマージン：mx-auto など
  • 順番の変更：order-2 など
• Tailwind CSS の JIT 対応：w-[800px], bg-[#59d3d4] など

画像

• width と height を指定して縦横に変な歪みがないか
• alt を指定して画像非表示にも対応
• アイコン
  • Tailwind CSS では heroicons が推奨されている
  • flaticon などで他のアイコンを探すと良い
• 解説用は Skitch などで手順を見やすく加工できていると良い

レベル２：SEO 系

meta タグ

• Next.js での設定：Head
• 基本的な設定：_document.tsx
• 可変な設定：PageHead などを作り、引数にデフォルトの値を必ず指定
• ファビコン favicon.ico を設定
• 画像やファビコンは ${domain}/ogp.png や ${domain}/favicon.ico などわかりやすいと親切かつディレクトリ構造が判別されにくい

OGP 画像

• 画像サイズ：1200px x 630px
• 文字の 20% ルールはなくなったが、なるべく文字は小さい方が統計的に良い
• freepick などでベースとなる画像を探すと良い
• Facebook
  • Facebook OGP Debugger で確認
• Twitter
  • Twitter Card Validator で確認
  • Twitter は画像が相対パスでは取得されないため注意（絶対パスを使用）

シェアボタン

• 各ページに対応するリンクが表示されるか確認
• シェア時の初期の文言やハッシュタグを設置しておく
• 日本語や記号は encodeURIComponent で文字をエンコード
  • 参考：Twitter のシェアリンクに指定したテキストを JavaScript でエンコードする方法
• SVG はコードの見た目が複雑になりがちなため、コンポーネント化推奨
• ボタンはなるべく自作せずに公式ページ参照：例. はてぶ参照
• 各デバイスごとにシェアしやすい位置にボタンを配置

サイトマップ

• クローラーから効率的な検索のために設置
  • 参考：Next.js に next-sitemap を導入して超手軽にサイトマップ sitemap.xml を生成しよう
• 購読されやすいように RSS フィードを設置
  • 参考：Next.js に feed を導入して RSS と Atom のフィードを生成しよう
• Google Search Console に sitemap.xml と feed.yaml, atom.yaml を設定しておく

レベル３：パフォーマンス系

画像

• next/image による最適化
  • 以下のような処理が自動化される
  • 解像度が無駄に大きすぎる画像は適切なサイズに加工
  • 画像の圧縮
  • WebP などの形式も検討
  • デバイスの解像度に合わせて出し分ける
  • 非同期で取得され初期画面の表示を邪魔しない
  • ビューポートに入ったタイミングでの遅延読み込み
• next/image での確認事項
  • レスポンシブ対応の場合に config に指定
  • 外部ドメインを使用する場合 config に指定
  • 画像が粗い場合は quality を指定
  • 背景画像に使用する場合は objectFit を指定
  • ロゴなど初期表示から欲しい場合は loading を eager に指定

リンク

• next/link を内部リンクでは使用
  • プリフェッチが有効になり、ページ遷移が速い

CSS

• duration でアニメーションの時間を調整する
• @headlessui/react で動作付きの実装にも挑戦する
• Tailwind CSS を使用する場合は本番環境で Purge CSS を有効にする
  • これを忘れると Page SpeedInsights で確認時に「使用していない CSS の削減」と提案がある
  • 参考：Configure Tailwind to remove unused styles in production
• 不要なクラス名の増加を抑えるためになるべく Tailwind CSS を利用
• グローバルに CSS を読み込まず、CSS Modules を使う
• 読み込んで使用しているクラスを意識して必要な分だけ実装

パッケージ

• dependencies と devDependencies を区別する
  • 開発 dev 時にのみ必要な場合は yarn add --dev *** と --dev オプションをつける
• 不要なパッケージの読み込みの除去
  • 手動で探すのは困難であるため VSCode などエディタの力を必ず借りる
• chunk が大きい場合は非同期での読み込みなど検討
  • 参考：Next.js 製ブログページのパフォーマンスを向上させるために実施したこと

動作

• memo や callback を使って、不要な親要素のレンダリングを防ぐ
  • 参考：React.memo でトップページのレンダリングを最適化する
• スムーズなスクロールなどユーザーとしての使いやすさを意識
  • 参考：react-scroll を導入し超簡単に画面内のスクロールを実装しよう
• 検索機能を付けて記事の探しやすさを向上
  • 参考：React / Next.js に algolia を導入して検索機能を追加しよう
• Google Analytics や Tags を導入
  • 参考：Next.js(TypeScript) に Google Analytics を導入し、PV を計測する方法

レベル４：プロジェクト管理系

Git

• 最新の Git にバージョンを上げる
  • git switch などを使う
• Visual Studiuo Code の Source Tree で GUI 管理
  • git add . といった操作を避ける
• .gitignore で不要なファイル形式のコミットを避ける
  • Next.js のプロジェクト作成時に標準で作成される
  • gitignore.io で Windows, macOS, Linux の OS 環境向けも追加しておきたい

GitHub

• GitHub とは SSH で通信するように設定
  • なるべく HTTPS は使わない（毎度手間がかかるためパスワード認証を避ける）
• 開発を始める前に Project を作る
  • ToDo リストを書き出す
  • 着手するときに Issue に変換する
  • Pull Request で fix を使い、イシュー番号と紐付けることでマージして閉じる
• 小規模な場合はブランチモデルとして GitHub Flow を採用する
  • 参考：GitHub でデフォルトのブランチを main から develop へ変更した後に main ブランチを削除から守る方法
• 不要なブランチはマージ後に削除し、ローカルも定期的に削除
  • 参考：git で main と develop 以外のブランチを一括削除するワンライナーのコマンド
• README.md に必要な情報を記載
• package.json もプロジェクト名などを変更しておくと良い

静的検証ツール

• ESLint と Pretier、必要に応じて Stylelint を導入（超推奨）
  • Visual Studio Code の拡張機能もインストール
  • 保存と同時に ESLint が適用されるように設定
  • JavaScript はシングルクォーテーションに統一
  • セミコロンを最後につける
  • インデントは 2
• husky で pre-commit 時の確認
  • ESLint のフォーマット確認を最低限入れておき、従っていないコードはコミットさせない
  • テスト駆動開発時にはテストの通過も pre-commit で必須とする

レベル５：実装系

命名規則

• コンポーネントはファイル名含めてパスカルケース：PageHeader.jsx
• 変数や関数名はキャメルケース：searchClient.js

環境変数

• .env ファイルに格納して必要に応じて .gitignore の対象にする
  • 参考：Next.js における環境変数 (env) の基本的な設定方法

ディレクトリ

• 相対パスから src を基準としたパスに変更
  • 参考：【Next.js】特定のディレクトリを基準にし、絶対パスでモジュールをインポートする方法

TypeScript

• JavaScript に慣れてきたころに TypeScript へ移行を推奨
  • Visual Studio Code や ESLint との相性が良い
  • サーバーでの動作前にコード上の問題が発見できる
  • １次試験で合格した後に２次試験に入る前に１次試験の内容を TypeScript 化することを推奨
  • ２次試験ではバックエンドの内容などに加えて TypeScript も必須になるため、難易度の低いうちに習得しておくと良い

おわりに

たかが Web サイト、されど Web サイト