TERUSIの技術勉強まとめ(コーディング編)

フロントエンド側の環境構築

作成日: 2023-10-07T06:47:27.583Z

はじめに

今までの章はバックエンド(サーバーサイド)側を実装していました。今回からはフロントエンドということで画面の方を作成していきたいと思います。バックエンドからデータを受け取り表示したり画面から送った内容をバックエンドに送信したりといった部分を実装していこうと思っています。今回は環境構築についてです。

主に使っていく技術

主に使っていくものは

Next.js
material-ui
vanilla-extract

です。

1 Next.js

公式には

Next.js is a React framework for building full-stack web applications.

と書いています。訳すと「Next.jsはフルスタックwebアプリケーションを構築するReactのフレームワークです」となります。
細かな部分は詳しく説明はできないのですが(☜もっと勉強しろ！！)UI構築のためのJavascriptライブラリであるReactをもっとよくしたもの
と私の頭の中ではそう思っています。Reactをよく知らない人はドキュメントを眺めてみてください。
Reactとの大きな違いはSSRやSSGの機能が実装することができて初期表示が早いという点です。
今回はそのNext.jsを使っていきます。
公式ドキュメント

2 material-ui

これはGoogleが公開しているデザインに「material design」というものがありますがそれに従って作られたReactのUIパーツです。実際の案件に入ってしまうと使う部品が少なくなると思いますが、今回はこちらを利用していきたいと思います。
公式ドキュメント

3 vanilla-extract

こちらはcssをTypescriptで書くことができるものです。実行時にcssに変換するのではなくbuild時にcssに変換するのでパフォーマンス等が向上されるんだとか。気がついたらこいつを使うようになっていたので今回もこちらを使っていきたいと思います。
公式ドキュメント
どうでも良いですがこのアイコンのカップケーキ？美味しそうですね。

環境構築

まずは、「server」というフォルダがある階層に移動してください。

1 Next.js

階層に移動したら以下のコマンドを実行してください。

$npx create-next-app@latest frontend

このコマンドを実行するといくつかの質問がされます。
その際は以下のように答えてください。

Typescriptを使いますか？・・・yes
ESLintを適用しますか？・・・yes
Tailwind CSSを使いますか？・・・no
srcディレクトリを適用しますか？・・・yes
App router を適用しますか？・・・yes
importエリアをカスタマイズしますか？・・・no

今回はこちらで答えてください。
Tailwindを今後使いたい人はそこをyesにしてもらっても全然大丈夫だと思いますが、アンチと推しがいるのでここも議論すると面白いかもしれません。
質問に答えるとプロジェクトが作成されます。完了すると「frontend」というディレクトリが出来上がっているのでそちらに移動してください。
そしてそこでvscodeを立ち上げましょう。

2 packegeのinstall

packegeインストールの前にyanrにしたい人はこのタイミングでyarnにしましょう。
今回は以下のコマンドを実施しpackegeをinstallします。

$yarn add yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react @vanilla-extract/css @vanilla-extract/next-plugin

material ui関連のものとvanilla-extract関連のpackageをinstallしました。
今回のコーディングでは使いませんが、次回以降使っていきたいと思います。

3 next.config.jsonの編集

vanilla-extract関係のpackageをinstallしたらnext.config.jsonを編集します。

/** @type {import('next').NextConfig} */


const {
    createVanillaExtractPlugin
  } = require('@vanilla-extract/next-plugin');
  const withVanillaExtract = createVanillaExtractPlugin();

const nextConfig = {}

module.exports = withVanillaExtract(nextConfig)

これで前準備は終わりです。

Next.jsはじめの一歩

Next.jsのプロジェクトの「src」を見てみましょう。
そこに「app」というディレクトリがあるのでそこを開きます。
中にcssが2つあると思うので全部消してしまって大丈夫です。

layout.tsxの編集

まずlayout.tsxを開きます。以下のように編集してください。

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Todo',
  description: 'あなただけのTodoアプリです。',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body className={inter.className} style={{margin:0}}>{children}</body>
    </html>
  )
}

ここにはhtmlに必要なhtmlタグやbodyタグが書いておりまた、アプリのタイトルやその詳細を設定することができます。
先ほどglobal.cssを消したのでimport文の最初の1行目が消えています。また、titleやdiscription等を書き換えてあります。
またbodyタグでデフォルトで余計なmarginが入っているのでそちらも消しました。

page.tsx

ここがURLにて最初にアクセスされるページとなります。
ではこのファイルを編集してみましょう。

export default function Home() {
  return (
    <main>
      <div>
            <h1>TODO APP</h1>
            <p>自分だけのTODOを作成しよう！</p>
        </div>
    </main>
  )
}

以上のコードを書いたら以下のコマンドを実行してローカルサーバーを立ち上げましょう。

$yarn dev

ブラウザでhttp://localhost:3000にアクセスすると先ほど書いた文が画面に出てきます。これではじめの一歩は終わりです。

フォルダ構成

フォルダ構成について説明します。
複数人プロジェクトになった時に一人一人が管理しやすく修正しやすいコードにするためにファイルやフォルダを分けることが大事になると思います。ファイルを分けることによって1ファイルに対するソースコードの量が減ります。1ファイルに1000行も書いてあったら吐き気がしますよね？そうならないようにここでしっかりとルールを決めておきましょう。

フォルダ構成は上記画像のようにします。

appフォルダ

まずはappフォルダから見ていきましょう。

components

複数のページに適応したい部品(component)はこちらのフォルダに置いておきます。
その下にコンポーネント名のフォルダを置いてその下にindex.tsxとstyle.css.tsを置く構成にします。

home

ここは最初のトップページのコンポーネントでそのページしか使わない場合のものをこちらに配置します。
構成は上記componentsと同じ形で作っていきます。

その他のルーティングページ

Next.jsを触ったことがある人はわかるかもしれませんが「app」フォルダのところに任意の名前のフォルダを作りその中にpage.tsxを作るとその任意のフォルダがルーティングのエンドポイントとなります。ここでルールを含めたポイントを記述しておきます。

appディレクトリの下にフォルダを作りpage.tsxを作るとそのフォルダ名がそのままURLのエンドポイントとなる
そのページでしか使われない部品はそのフォルダの中に部品名のフォルダを作成しindex.tsxとstyle.css.tsを作成する

正直これは今後やりながら覚えていきましょう。
このルーティングのやり方もNext.jsの特徴の一つになります。

apiフォルダ

こちらはAPIへのアクセスをする関数を記述しようと思います。

sharedフォルダ

type.ts

形定義を宣言するファイルにしたいと思っています。

data.ts

静的なデータはここで保存をしようと思います。

ja.ts

文言はこちらで管理をしようと思います。
appディレクトリの.tsxファイルで文言を書かずに
文言の部分は文言のファイルでと管理します。

linkName.ts

ルーティングの時のリンクの名前はここに保存しておきます。

といった感じで今後はこのルールでコーディングしていこうと思っています。
今回のセクションはここまでです。

次回

ホームの画面を作成する。