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


My github

技術垢

一番最初の画面を作成する

作成日: 2023-10-07T15:33:41.975Z

はじめに

Next.jsの環境構築等を前回はしました。今回からいよいよページを作成していきます。
ここで注意なのですが、私は非常にデザインが苦手です！！！(☜勉強しろ)
その点はご理解いただきたいです。

完成イメージ


完成ページはこんな感じです。(ちょーシンプル)
ここでお詫びなのですが現時点ではmicroCMSのリッチエディタによる画像レスポンシブが対応する方法が見つかっておりません。
PCでご覧になっている方は非常に見づらいかと思いますが、ご了承ください。ですので実際に実装してみて自分が実装したものを直接ご覧になって理解を深めってってください。私の方でももう少し調査をしてみます。

実装開始

1 文言ファイルに文言の登録

文言ファイルに上記文言を登録していきましょう。
ファイル名はja.tsでしたね。


// eslint-disable-next-line import/no-anonymous-default-export
export default {
    home:{
        title:"TODO APP",
        description:"自分だけのTODOを作成しよう！",
        buttonTitle1:"新規アカウント作成",
        buttonTitle2:"ログイン",
    }
}

文言はこのようにこのファイルに記述していきます。

2 link集のファイルにlinkのパスを記述する

linkName.tsがあると思うので以下のように記述します。

// eslint-disable-next-line import/no-anonymous-default-export
export default{
    signup:"/auth/signup",
    login:"/auth/login"
}

ルーティング用のパスをこのように書いておきます。

3 titleの部分とその下のフレーズのcomponentとして分ける

Reactの良いところはcomponent(部品)として分けてコーディングすることができることです。そうすることで共通で同じ部品を使い回ししたり、mainのファイルが短い行数で書かれることができます。これが利点かなと思っています。私、個人的には1ファイルが長く書いてあるとすごく気持ちが悪くなります。中には「別に気にしないし動けばいいんだよ」という人がいますが大規模開発になったらそれは通用しないのではないでしょうか？
話を戻して実装に移ります。「app」フォルダの中に「components」というフォルダを作ります。こいつはメインのtodoの部分でも使おうと思うので共通のcomponentを扱うここのフォルダに保存していきます。その下に「title」というフォルダを作りindex.tsxを作成してください。そして以下のように記述をしてください。

import ja from "../../../shared/ja";
const Title = () => {
    return (
        <div>
            <h1>{ja.home.title}</h1>
            <p>{ja.home.description}</p>
        </div>
    );
}

export default Title;

ここでまず注意ですが、この描画部分の関数名の最初の文字は必ず大文字で書いてください。もしuseStateなどのhooksを使うときにerrorに引っ掛かります。
コードを見てみると<h1>タグと<p>タグがありその中から文言ファイルにあるタイトル部分と詳細メッセージが呼び出されれています。

4 新規登録ページ、ログインページに遷移するボタンを作成する

次に「app」フォルダの下に「home」というフォルダを作成します。
ここにはそのページでしか使わないcomponentのソースコードを置いていきます。
では「routingButton」というフォルダを作成してその下にindex.tsxとstyle.css.tsというファイルを作成します。
まずはindex.tsxからです。

import { Button } from "@mui/material";
import Link from "next/link";
import styles from "./style.css";

interface props {
    linkName:string
    linkTitle:string
}
const RoutingButton = ({linkName,linkTitle}:props) => {
    return (
        <div className={styles.button}>
            <Link href={linkName}>
                <Button variant="text">
                    {linkTitle}
                </Button>
            </Link>
        </div>
    );
}

export default RoutingButton;

関数の引数には二つほど指定してあります。
これはmainであるこれは親のcomponentやメインのページから受け取るpropsというもので同じ部品なんだけど一部の文言が違うといった時に用います。今回はTypescriptで書いているのでinterfaceでそのpropsの型を定義します。propsはtype.tsには書かずにしたいと思います(実際の案件でもそうでした)。理由はまだわかっていないでのわかったら記事にでもしようかなと思います。
ルーティング部分は<Link>タグを使います。これはNext.jsが用意しているcomponentです。
そして、その子タグにはmuiで用意されたボタンを宣言します。これはクリックしたらリップルエフェクトでしたっけ？波紋のように「モワーン」という感じのアクションが起こります(語彙力なさすぎだろ🌱)。
この時点ではエラーが起こっているはずです。そうstylesheetを書いていません。
ということでstyle.css.tsを書いていきましょう。

import { style } from "@vanilla-extract/css";

const styles={
    button:style({
        margin:"20px"//ボタンとボタンの間を20pxくらい開けておく。marginBottomでも良いかも。
    })
}
export default styles;

cssみたいですが.tsで書けるのは本当に良いなと思います。
書き方は上記で書いた通りです。ボタンとボタンの間を開けたかったのでmarginを入れています。

5 page.tsxで作成したcomponent等を呼び出す

もう少しです。頑張っていきましょう。
「app」フォルダの中のpage.tsxで先ほど作ってきたcomponent等を呼び出していきましょう。

import ja from "@/shared/ja";
import RoutingButton from "./home/routingButton";
import Title from "./components/title";
import linkName from "@/shared/linkName";
import styles from "./style.css";

export default function Home() {
  return (
    <main className={styles.containar}>
      {/*タイトル部分*/}
      <Title/>
      {/*新規登録ページ遷移ボタン*/}
      <RoutingButton
        linkTitle={ja.home.buttonTitle1}
        linkName={linkName.signup}
      />
      {/*ログインページ遷移ボタン*/}
      <RoutingButton
        linkTitle={ja.home.buttonTitle2}
        linkName={linkName.login}
      />
    </main>
  )
}

ボタン部分に関してはpathとその表示するタイトルをpropsに渡しています。この書き方は多く使うので覚えておいてください。
1ファイルの記述量が少ないと気持ちが良いですね！
最後にstyleをあてて終わりにしましょう。「app」フォルダにstyle.css.tsを作成してください。

import { style } from "@vanilla-extract/css";

const styles={
    containar:style({
        width:"75%",//長さはブラウザの横の75% 
        margin:"150px auto",// 上に50pxで以外は中央よせに,
        textAlign:"center",//文字を中央に寄せる(デフォルトは中央添え)
    }),
}
export default styles;

これで中央に要素が寄せられたかと思います。
ボタンは現時点でクリックすると404 NOT FOUNDになってしまいますが
次回はそれらのページを作ってtodoのページまでルーティングする実装をしていこうと思います。

次回

新規登録ページの実装