NextJS チュートリアル ポートフォリオ作成 Aboutページ編 わかりやすく解説

React
2022.08.21
この記事は約11分で読めます。

皆様こんにちは
この記事では、初学者の方向けに最新の、NextJSを使用したチュートリアルとしてポートフォリオサイトの作成を解説していきます。
今回は、前回に引き続き、Aboutページの作成を解説します。

この記事は続編となっています。
もし、この記事をご覧いただいている方でTopページ編・概要編をご覧いただいていない場合は、ぜひともそちらもご参照ください。

ポートフォリオ作成 全編

ポートフォリオ作成 Aboutページの解説

前回、Topページを作成する部分を解説板いましたので、その続きからご説明します。

前回に続いて、ディレクトリ構造はこの様になっております。

$ tree ./pages/components 

pages/components
├── modules
└── organisms
    ├── footer.tsx
    ├── header.tsx
    ├── top.tsx

// 略

.pages/components/organisms ディレクトリ内に新たに about.tsx を追加作成しましょう。作成したファイルを下記のように編集してください。


import Header from "./header";
import Footer from "./footer";
import React from "react";

const About:React.VFC = () =>{
    return(
        <>
            <Header />
            <div className="sm:mx-8 sm:my-6 sm:p-6 flex justify-center">
                <div className="grid grid-cols-2 gap-4 sm:w-4/5 md:w-4/5 items-center">
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="md:m-auto bg-gradient-to-r from-red-100 to-red-200 border-b-8 border-red-400 text-xl md:text-2xl py-5">名前</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="m-1 text-center text-xl md:text-2xl py-5">ShellVarng Jiro.</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="md:m-auto bg-gradient-to-r from-red-100 to-red-200 border-b-8 border-red-400 text-xl md:text-2xl py-5">所属</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="m-1 text-center text-xl md:text-2xl py-5">私立理系　大学院博士課程</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="md:m-auto bg-gradient-to-r from-green-100 to-green-200 border-b-8 border-green-400 text-xl md:text-2xl py-5">研究分野</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="m-1 text-center text-xl md:text-2xl py-5">インタラクション・画像認識・IoT</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="md:m-auto bg-gradient-to-r from-green-100 to-green-200 border-b-8 border-green-400 text-xl md:text-2xl py-5">進路</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="m-1 text-center text-xl md:text-2xl py-5">同大学院に進学予定</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="md:m-auto bg-gradient-to-r from-blue-100 to-blue-200 border-b-8 border-blue-400 text-xl md:text-2xl py-5">実績</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center py-5">
                        <p className="text-center m-1 text-xl md:text-2xl">Interaction2021　投稿・採録</p>
                        <p className="text-center m-1 text-xl md:text-2xl">DICOMO2021　投稿・採録</p>
                        <p className="text-center m-1 text-xl md:text-2xl">Interaction2022　投稿・採録</p>
                        <p className="text-center m-1 text-xl md:text-2xl">IPSJジャーナル GN特集号　投稿</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="md:m-auto bg-gradient-to-r from-blue-100 to-blue-200 border-b-8 border-blue-400 text-xl md:text-2xl py-5">実務</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="m-1 text-center text-xl md:text-2xl py-5">株式会社LDBにてイ経験あり</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="md:m-auto bg-gradient-to-r from-purple-100 to-purple-200 border-b-8 border-purple-400 text-xl md:text-2xl py-5">資格</p>
                    </div>
                    <div className="m-4 px-2 my-3 md:h-4/5 md:mx-3 md:px-2 md:py-2 text-center">
                        <p className="m-1 text-center text-xl md:text-2xl">TOEIC score 550</p>
                        <p className="m-1 text-center text-xl md:text-2xl">AWS 認定試験(予定)</p>
                    </div>
                </div>
            </div>
            <Footer />
        </>
    );
}

export default About;

Aboutページはこれだけになります。
今回はシンプルな構造です。

ページを中心で2つに分割して、左右に項目を配置するデザインとしました。
CSSフレームワークであるTailwindCSSのグリッドというスタイルを適用しています。グリッドは親要素に適用することで、自動的にサイトに対して、子要素を横に分割して配置してくれるとても便利なスタイルです。

このようなシンプルなコンポーネントで、プロップス（関数の引数のようなもの）を持たないものにも、TypeScriptによる型付けをしてます。
今回は React.VFC というすでに実装されている型を使用しています。この型はNextJSやReactJSにはよく使われています。関数コンポーネントを使う場合はこれを基本的には全てに適用してましょう。

ポートフォリオ作成 Aboutページ 実行

今回編集する部分はここだけなので、実際に実行してみましょう。

$ npm run dev

前回で解説したように、上記のコマンドを実行して、ローカルホストの3000ポートにアクセスしましょう。

ヘッダーのメニューからAboutページへ飛んでみましょう。そうすると、先程作成したページが表示されると思います。

まとめ

では今回のまとめに入ります。
今回は、初学者の方向けにNextJSのチュートリアルとしてポートフォリオ作成の解説を行いました。次回は、少し本格的なNextJSの内容となる予定ですので、ぜひ最終までご覧くだされば幸いです。

今回は以上となります。
お疲れさまでした。

タイトルとURLをコピーしました