Webサイト作成で必要な情報をまとめる

2022-01-15
Next.js
Tailwind CSS
TypeScript

はじめに

課題１で学んだこと、吉崎さんのコードレジューから学んだことなどを盛り込んで、課題２のブログサイト作成をまとめていきます。

作成の流れよりも、必要な情報を盛り込んでいますので目次から確認したい項目をみていってください。

全外の流れ

Next.js で Tailwind CSS を使えるようにする

Eslint | Prettier を使えるようにする

開発環境を整える

GitHub の使い方

tailwind.config.js で使用頻度の高い色などを設定

レイアウトの配置確認は簡易的なデザインでチェック

新規ファイルの作成

まずは新規ファイルを作成します。一連の流れは、こちらの記事を確認してください。

Esllint | Prettier の導入と、GitHub | Vercel へのデプロイまでをまとめています。

ここまでは基本部分として、環境構築をしてしまいましょう。

開発環境を整える

新規ファイルを作成したら、そのままWebサイト作成に入るのではなく、開発環境を整えてきましょう。

ここは吉崎さんのコードレビューからの学びです。

まずは基本的な開発環境を整えることに時間を使っています。要はそれだけ開発環境を整えることは重要なのです。

VS Code

settings.json ファイルへ直接しています。都度、.vscodeフォルダ作成 ➝ settings.json ファイルを作成するのでもどちらでも構いません。

Vs Code の settings.json ファイルの場所

追加する内容

{ // デフォルトのフォーマッタを prettier に設定 "editor.defaultFormatter": "esbenp.prettier-vscode", // ファイル保存時、prettier による自動フォーマット "editor.formatOnSave": true, // ファイル保存時、ESLint による自動フォーマット "editor.codeActionsOnSave": { "source.fixAll": true } }

VS Code の便利機能

話はちょっと脱線しますが、便利なショートカットがあるので１つでも多く使えるようにしていきたいと思います。

キカガクさんの記事で、ショートカットの特集がありました。是非、こちらを確認してみてください。

.gitignore

Git へ意図的にリポジトリしないファイルを設定するもの。

ただ、どれを除外していいのかはわからないので .gitignore で検索し、生成されたコードを貼り付けるだけです。

Windows | macOS | Linux の３つで問題ないです。

// 以下を追加 ### Linux ### *~ # temporary files which can be created if a process still has a handle open of a deleted file .fuse_hidden* # KDE directory preferences .directory # Linux trash folder which might appear on any partition or disk .Trash-* # .nfs files are created when an open file is removed but is still being accessed .nfs* ### macOS ### # General .DS_Store .AppleDouble .LSOverride # Icon must end with two \r Icon # Thumbnails ._* # Files that might appear in the root of a volume .DocumentRevisions-V100 .fseventsd .Spotlight-V100 .TemporaryItems .Trashes .VolumeIcon.icns .com.apple.timemachine.donotpresent # Directories potentially created on remote AFP share .AppleDB .AppleDesktop Network Trash Folder Temporary Items .apdisk ### Windows ### # Windows thumbnail cache files Thumbs.db Thumbs.db:encryptable ehthumbs.db ehthumbs_vista.db # Dump file *.stackdump # Folder config file [Dd]esktop.ini # Recycle Bin used on file shares $RECYCLE.BIN/ # Windows Installer files *.cab *.msi *.msix *.msm *.msp # Windows shortcuts *.lnk

GitHub の使い方

Issues

やることを細分化し、タスク管理していきましょう。

使い方は非常に簡単です。

Issues から New issue を作成

この流れで、先にやることを細分化していきます。

ブランチ作成からマージまでの流れ

ブランチを作成する理由は、自分の作業だけのテーブルを作り、他の方、またメインデータに影響を与えないようにすることです。こちらでイメージを掴んでいきましょう。

実際の流れをみていきましょう。今回は作成したIssues の #1 を例にしていきます。

// feature/#1 でブランチ作成 $ git switch -c feature/#1 // 空のコミットを作成。コミット名はIssue の題名でOK $ git commit --allow-empty -m '.gitignoreの設定' // GitHub へ一度送る $ git push origin feature/#1

GitHub 上での流れは以下の通りです。

Vs Code で作業が終了したら

ステージされている変更、へこれからGitHub へ送りたいファイルが入っていればOKです。

ここから私はターミナル上で操作していきます。

$ git commit -m 'コミット名' $ git push origin feature/#1

GitHub の Pull Requests を見ると今コミットされた変更箇所が見れるようになっています。

本来ならここでレビューしてもらい、承認してもらう流れがあります。

一連の流れ

これで作成していたIssue がクローズされていき、Issues が減っていきます。

GitHub 上では変更が反映されていますが、ローカルで作業しているPCには変更点が反映されていません。

変更された内容を、自分のPCにも反映させていきます。

// main に戻す $ git switch main // ローカルへデータを移動 $ git pull

これがブランチ作成から一連の流れです。

あとは作成したIssues を潰し込んでいくだけです！

Tailwind CSS の環境構築

繰り返し使うフォント色、背景色、背景画像などを新しく命名することで、コードが書きやすく、コード量も減っていきますので、ここで設定していきます。

また公式ドキュメントにカラーを設定したい場合はこうするんだよっと、下の方に記載されているので都度ドキュメントで調べて設定していきます。

├── README.md ├── next-env.d.ts ├── next.config.js ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── src ├──

色の設定

theme: { extend: { // 以下追記 colors: { 'font-black': '#384359', 'font-green': '#008c8d', } }, },

‘名前’ : ’指定色’ で簡単に設定できます。実際に変更されているか確認してみます。

作成した’font-green’ がちゃんと反映されていますね！

背景画像の設定

extend: { colors: { 'font-black': '#384359', 'font-green': '#008c8d', }, // 以下追記 backgroundImage: { 'pc-hero': "url('/bg-hero.png')" } },

最初のレイアウト確認はざっくりやろう

例えば以下のHeader を作成するとき、画像を入れて、ボタンを設置して…ではなく、簡単な文字などで確認していきます。

export default function Header(): JSX.Element { return ( <> <p>画像</p> <p>投稿</p> <p>ログアウト</p> </> ); }

３つの要素を作った後、これを完成形のHeaderにように横に並び替え、左右に寄せたい…

export default function Header(): JSX.Element { return ( <div className='flex'> <p>画像</p> <p>投稿</p> <p>ログアウト</p> </div> ); }

これで横並びへ変更ができました。あとは左右に分けたい…

export default function Header(): JSX.Element { return ( <div className='flex justify-between'> <p>画像</p> <p>投稿</p> <p>ログアウト</p> </div> ); }

だいぶイメージに近づいてきたな…あとは「画像」と「投稿・ログアウト」の２つに分けたいな…

export default function Header(): JSX.Element { return ( <div className='flex justify-between'> <p>画像</p> <div> <p>投稿</p> <p>ログアウト</p> </div> </div> ); }

お、左右の両端に分かれた！けど、投稿とログアウトを divタグで括ったことで縦になってしまった…これを横並びに変えたいな…

export default function Header(): JSX.Element { return ( <div className='flex justify-between'> <p>画像</p> <div className='flex'> <p>投稿</p> <p>ログアウト</p> </div> </div> ); }

イメージに近づいてきました！あとは、投稿とログアウトの間にスペースが欲しい…

export default function Header(): JSX.Element { return ( <div className='flex justify-between'> <p>画像</p> <div className='flex'> <p className='mr-5'>投稿</p> <p>ログアウト</p> </div> </div> ); }