コーディング開始！

2022-06-06Hack Util Apps 開発記録

さて、 Next.js についてはある程度理解もできたし、作り始めるか！

わからないところがあればググればいっしょ（笑）

ということで実際に Hack Util Apps の作成が始まりました。

初回から：

プロジェクト作成

最初はまず、プロジェクトを作成しました。ということで

npx create-next-app test_project

というコマンドを実行しました。

なぜ test_project なのかというと、まだ開発段階だからです。あと、この Hack Util Apps という名前が正式に決まったわけでもないからです1。

そして、プロジェクトを作成すると、元からある pages/indes.js と styles/Home.module.css と styles/global.css があるわけです。

私は、まずデザインの作業から始めたので、この三つのファイルの編集と加工にうつりました。

TypeScript 移行

次の章でデザインについて話すんですが、その前に一つだけ重要なことを話します。

デザインを始めたのですが、その後、私は保守性のために、 TypeScript を使って作成したかったので、 TypeScript を導入しました。

そして、 TypeScript を導入したんですが、途中からの導入もとても楽でした。なんと、

yarn add --dev typescript @types/react @types/node

という一行のコマンドだけでできるんです！

あとは全て Next.js と VSCode が勝手にセットアップしてくれるんです！！

この瞬間僕は改めて Next.js を神だと思いました。

デザイン

ウェブといえばやっぱりウェブデザインです。 Hack Util Apps の制作はまずデザインから始まりました。

とにかく先にデザインを早く終わらせて、あとは楽をしたかったので、基本 src/pages/index.js だけでデザインを作っていました。結局どこのページも同じなので。

ということで、まずは src/components/layout.js から作り始めました。なぜ layout.js から作り始めるのかというとそれはとても簡単です。全てのページで簡単に同じレイアウトにするためです。

当時は、スティッキーなヘッダ、開閉可能な左側サイドバ、コピーライトとその他リンクが載ったフッタ、そして横幅いっぱいのメインコンテナ、というレイアウトを考えていました。（そして、実際にそうなるように作りました。）

Layout

Layout コンポーネントは、上の文でも言っている通りに、 src/components/layout.js に配置しました。

layout.js は、全てのページの一番外側になるような React コンポーネントとして作りました。

layout.js の中身は大体こんな感じです。（完成後）

  • div.container
    • Head （next/head）
    • Header （自作コンポーネント）
    • Sidebar （自作コンポーネント）
    • div.mainContainer
      • DarkModeButton
      • main.main
    • Footer （自作コンポーネント）

個々の細かな仕様などは次回話そうと思います。

次回予告

今回はコーディングの始まりと、デザインについての大雑把な説明をしました。

次回からは実際に layout.js (layout.tsx2) の中身についての細かい仕様について話そうと思います。

最後まで読んでいただきありがとうございました。

次回：

脚注

  1. 実際に決まったのは、後ほど favicon.ico を作ってから
  2. さあ、ここで勘のいい方はお気づきかもしれませんが、拡張子が .js から .tsx に変わっています。そうです。 layout.js の中身を作っていく最中で TypeScript に移行したんです。

Hack Util Apps 開発記録Hack Util Apps,HUA

Posted by Probmkr