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

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

はじめに

概要

fwywd(フュード) ではプロとして働く実力を養うことができる採用試験無料で公開しています。
リリースから3週間ほど経ち、早速1次試験をクリアして応募してくださる方が嬉しいことに出てきました。
応募いただいた方には fwywd(フュード) チームから良い点や更に改善できる点のヒントをまとめたフィードバックを個別にお送りしています。
今回はそのフィードバックを通して見えてきた Web サイトをリリースする前に必ず確認したいチェックリストを紹介します。
React / Next.js / Tailwind CSS を使って Web サイトや Web アプリケーションを作っていきたいという方に参考になると幸いです。

fwywd の採用1次試験

まずはじめに fwywd(フュード) で公開している採用の1次試験の内容を簡単に紹介します。
React / Next.js / Tailwind CSS を使って、準備されたデザインで1ページの自己紹介サイトを作っていただきます。
introduction
フロントエンド実装に慣れている人には簡単ですが、日頃はバックエンドを中心に書いている人にとっては Tailwind CSS を含めた CSS の書き方の勉強が必要となります。
また、HTML / CSS のフロントエンド実装に慣れている人には React / Next.js を学んでいただく必要があります。
問題設定こそ簡単ですが、どのような役割の人にとっても学びのハードルが少しある良い問題となっています。
2次試験以降はフロントエンドも含めたバックエンド実装を課している中で、わざわざフロントエンドの実装も習得していただきたい理由があります。
新規事業の Web アプリケーションを作り込む際は日々の機能追加に耐える能力が必要であり、フロントエンドからバックエンドまで、どのパートも対応できる幅広い力がある方が圧倒的に有利です。
そのため、fwywd(フュード) のチームで働く初期のエンジニアには、フロントエンドからバックエンドまですべて対応できるようになって欲しいと考えています。
今回はこの一見簡単そうに見える1ページの Web サイトでも、プロとして意識して臨むとどのような点まで配慮しておくと良いのかを紹介します。
recruitment

レベル1:表示系

ここは基本的なことであり、見た目で判断可能なことばかりです。
Tailwind CSS でよく使うクラスの一例も併せて紹介します。
fwywd(フュード)の1次試験ではレベル1がクリアできていれば合格できるはずです。

内容の確認

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

表示崩れの確認

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

画像

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

レベル2:SEO 系

それでは、及第点としての合格の先にあるチェックリストを確認していきましょう。
クオリティの高い合格を目指す人はレベル2以降も挑戦してみましょう。

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 で文字をエンコード
  • SVG はコードの見た目が複雑になりがちなため、コンポーネント化推奨
  • ボタンはなるべく自作せずに公式ページ参照:例. はてぶ参照
  • 各デバイスごとにシェアしやすい位置にボタンを配置

サイトマップ

レベル3:パフォーマンス系

デプロイ前は Google Chrome の Developer Tools にある Lighthouse で確認します。
デプロイ後は Contents Delivery Network (CDN) へのキャッシュも考慮したパフォーマンス測定ができるため、PageSpeed Insights を使うと良いでしょう。
この場合、キャッシュを考慮して計測は2回行いましょう。

画像

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

リンク

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

CSS

  • duration でアニメーションの時間を調整する
  • @headlessui/react で動作付きの実装にも挑戦する
  • Tailwind CSS を使用する場合は本番環境で Purge CSS を有効にする
  • 不要なクラス名の増加を抑えるためになるべく Tailwind CSS を利用
  • グローバルに CSS を読み込まず、CSS Modules を使う
  • 読み込んで使用しているクラスを意識して必要な分だけ実装

パッケージ

動作

レベル4:プロジェクト管理系

Git

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

GitHub

静的検証ツール

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

レベル5:実装系

命名規則

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

環境変数

ディレクトリ

TypeScript

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

おわりに

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

Web サイトは昔から存在し、HTML と CSS を書いて FTP (File Transfer Protocol) でサーバーにアップロードするといった時代もありました。
今でも構造上の仕組みが変わっていないのですが、その手順が大幅に変わっており、当時よりも学習コストはかなり増えています
その一方で、多彩な動作を表現できたり、読み込み速度といったパフォーマンスの良い Web サイトを作ることができるようになっています。
カスタマイズ性学習コストのトレードオフは常に存在しています。
今回はたかが Web サイト1ページの構築でしたが、新しい技術の React / Next.js / Tailwind CSS を使うと、これだけ確認しておきたいことがありました。
最初からすべて覚えておく必要はありませんので、レベル別に覚えていきましょう。
React や Next.js に関わる方の知見になっておりましたら幸いです。
今回も長文をお読みいただきまして、誠にありがとうございました。
株式会社キカガク 代表取締役会長
吉崎 亮介
twitter: @yoshizaki_91

RSS フィードで fwywd の技術記事を購読しよう

fwywd(フュード) のシェアボタンにある RSS フィードを利用すれば、新しい記事が出るたびに自動的に通知を無料で受け取ることができます。
Slack への連携はたったの5分で行うことができ、以下の記事でその手順を具体的に紹介しています。
ぜひ、fwywd(フュード) が日々更新する技術記事をキャッチアップしていただけると嬉しいです。
subscribe-rss-feed

fwywd では開発メンバーを募集しています

recruitment
fwywd では採用試験を無料で公開しています。
採用への応募の有無を問わず、Web アプリケーションの開発を学びたい多くの方にとって有益な試験内容となるように設計しています。 ぜひ、fwywd の面白い採用試験を覗いてみてください。