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

React
2022.08.23
この記事は約19分で読めます。

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

本記事はシリーズとなっております。
もし、概要ページや前回のページをご覧になってない方は、ぜひ下記に示す解説記事を順番にご覧いただければ幸いです。

ポートフォリオ作成 全編

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

まず、Skillsページ本体を作成していきます。

$ tree ./pages/components 

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



// 略

現時点でのディレクトリの構成はこのようになっています。
では、./app/pages/components/organisms/  ディレクトリ内に skills.tsx ファイルを新たに作成してください。
作成できましたら、次のように編集しましょう。

import React from "react";
import Image from "next/image";
import { skillCardContents } from "../../api/variable";
import Header from "./header";
import Footer from "./footer";
import SkillCard from "../modules/skillCard";
import "devicon";
import { skillTypes } from "../../api/type";


const Skills:React.VFC = () =>{
    return(
        <>
            <Header />
            <div className="flex justify-center bg-indigo-50">
                <div className="min-h-screen flex flex-wrap justify-center items-center mx-3 my-3 md:mx-6 md:my-5">
                    {skillCardContents.map((contents:skillTypes)=> {
                        return (
                            <SkillCard contents = {contents} key={contents.id}/>
                        );
                    })}
                </div>
            </div>
            <Footer />
        </>
    );
}

export default Skills;

上記がサイトに表示されるページの本体になります。
ここで、TSX内にJavaScriptの構文を使っています。このmapは配列のメソッドであり、全要素に対して任意の処理を行うことが可能です。

mapメソッドはReactやNextでとても良く使われるメソッドの一つです。Webサイトには同じようなUIを繰り返し表示させるということがあります。
そのような時、mapメソッドを使用することが多いです。ReactやNextをこれから勉強していく方はチェックしておきましょう。

ポートフォリオ作成 SkillCardの解説

続いて、Skillsページに表示させるカードUIを作成していきます。
./app/pages/components/modules/ ディレクトリ内に skillCard.tsx ファイルを作成してください。
作成したファイルは下記のように編集してください。

import React from "react";
import "devicon";
import Rating from '@mui/material/Rating';
import { skillTypes } from "../../api/type";

const SkillCard:React.VFC = ({contents}:{contents:skillTypes}) =>{
    return(
        <div className="p-4">
            <div className={contents.color}>
                <div className="flex justify-center items-center mx-3 my-3">
                    <span className={`${contents.image} text-9xl p-1`}></span>
                </div>
                <div className="m-0 p-0 border-t-2"></div>
                <div className="mx-3 my-2">
                    <div className="mx-2">
                        <p className="mx-2 my-3 p-0 text-4xl">{contents.title}</p>
                    </div>
                    <div className="mx-5 mt-1 p-0">
                        <Rating 
                            name="read-only" 
                            value={contents.stars} 
                            readOnly
                        />
                    </div>
                    <div className="mx-3 my-2 p-0">
                        <p className="mx-2 p-0 text-lg">{contents.description}</p>
                    </div>
                </div>
            </div>
        </div>
    )
};

export default SkillCard;

上記がCardUIとなるコードになります。
Skillsページにてmapメソッドで繰り返し表示させる部分です。

このコンポーネントは親コンポーネントから、propsを渡されて変数として使っています。このpropsにもTypeScriptの型付けを行います。

ポートフォリオ作成 変数・型解説

最後に、Skillsページで使う変数と型について解説します。
./app/pages/api/ ディレクトリ内にある type.ts ファイルと variable.ts ファイルをそれぞれ次のように編集してください。

export type skillTypes = {
    id: number
    image: any
    title: string
    stars: number
    description: string
    color:string
};

export type skillCardCol = {
    red: string;
    blue: string;
    indigo: string;
    green: string;
}

export type topImage = {
    id: number;
    image: any;
}

export type urls = {
    urlBlog:string;
    urlGit:string;
    urlTwitter:string;
}

import {workTypes,skillTypes,importImage,hobbysTypes,hobbysdescType,worktechTypes,topImage,skillCardCol, urls} from './type';

export const webTitle: string = "Jiro's Portrait Site";

export const url: urls= {
    urlBlog:"https://www.s-gakuenblog.com/",
    urlGit:"https://github.com/POD-azlamarhyu",
    urlTwitter:"https://twitter.com/Inc_capitalist",
};

export const copyright: string = "shell varng 2022";

export const topImages:topImage[] = [
    {   
        id:0,
        image:require("../../public/topimage1.png").default,
    },
    {   
        id:1,
        image:require("../../public/topimage2.png").default,
    },
    {   
        id:2,
        image:require("../../public/topimage3.png").default,
    },
    {   
        id:3,
        image:require("../../public/topimage4.png").default,
    }
];

//ここからが新しい編集部分
const skillCardCol:skillCardCol = {
    red:`bg-gradient-to-r from-fuchsia-500 to-fuchsia-200 w-full md:w-132 md:h-80 m-auto rounded-xl shadow-2xl transform hover:scale-110 transition-transform`,
    blue:`bg-gradient-to-r from-blue-500 to-blue-200 md:w-132 w-full md:h-80 m-auto rounded-xl shadow-2xl transform hover:scale-110 transition-transform`,
    indigo:`bg-gradient-to-r from-indigo-500 to-indigo-200 w-full md:w-132 md:h-80 m-auto rounded-xl shadow-2xl transform hover:scale-110 transition-transform`,
    green:`bg-gradient-to-r from-gray-500 to-gray-200 w-full md:w-132 md:h-80 m-auto rounded-xl shadow-2xl transform hover:scale-110 transition-transform`
}

export const skillCardContents:skillTypes[] = [
    {
        id: 0,
        image: "devicon-python-plain colored",
        title: "Python 3",
        stars: 4,
        description: "最も触れている言語の一つです．",
        color: skillCardCol.blue,
    },
    {
        id: 1,
        image: "devicon-c-plain colored",
        title: "C lang",
        stars: 1,
        description: "ポインターでメモリ管理の勉強を行うため，使ってました．",
        color: skillCardCol.blue,
    },
    {
        id: 2,
        image: "devicon-csharp-plain colored",
        title: "C#",
        stars: 2,
        description: "主にWindows開発とUnityでのゲーム開発で使っています．FPS作りたい．",
        color: skillCardCol.blue,
    },
    {
        id: 3,
        image: "devicon-javascript-plain colored",
        title: "JavaScript",
        stars: 4,
        description: "フロントエンドの開発で主に使っています．",
        color: skillCardCol.red,
    },
    {
        id: 4,
        image: "devicon-typescript-plain colored",
        title: "TypeScript",
        stars: 3,
        description: "JSと並行して型付になれるため勉強していきます．",
        color: skillCardCol.red,
    },
    {
        id: 5,
        image: "devicon-java-plain colored",
        title: "Java",
        stars: 2,
        description: "主に研究でのAndroid開発に使っています．",
        color: skillCardCol.blue,
    },
    {
        id:6,
        image: "devicon-ruby-plain colored",
        title: "Ruby",
        stars: 3,
        description: "大学の授業のほか，サーバサイド言語の習得のため学んでいます．",
        color: skillCardCol.blue,
    },

    {
        id: 7,
        image: "devicon-android-plain colored",
        title: "Android",
        stars: 2,
        description: "研究のほか，個人開発でアプリの方面も触っています．",
        color: skillCardCol.green,
    },
    {
        id: 8,
        image: "devicon-react-original colored",
        title: "React JS",
        stars: 4,
        description: "フレームワークの中で最も触っています．",
        color: skillCardCol.green
    },
    {
        id: 9,
        image: "devicon-nextjs-plain-wordmark colored",
        title: "Next JS",
        stars: 4,
        description: "フレームワークの中で最も触っています．SSGやSSRをするためにやっています．",
        color: skillCardCol.green,
    },
    {
        id: 10,
        image: "devicon-django-plain-wordmark colored",
        title: "Django",
        stars: 4,
        description: "サーバサイドのフレームワークとして使っています．Pythonが最もなれているのでこれを選びました．",
        color: skillCardCol.green,
    },
    {
        id:11,
        image: "devicon-rails-plain colored",
        title: "Ruby on Rails",
        stars: 1,
        description: "日本はRailsが実務で使われていることが多いので勉強しています．",
        color :skillCardCol.green,
    },
    {
        id: 12,
        image: "devicon-unity-original colored",
        title: "Unity",
        stars: 2,
        description: "ゲームエンジンとして使っています．",
        color: skillCardCol.green,
    },
    {
        id:13,
        image: "devicon-postgresql-plain colored",
        title: "PostgreSQL",
        stars: 4,
        description: "データベースでOSSなので使っています．SQLは実務でかなり鍛えられました．",
        color: skillCardCol.indigo,
    },
    {
        id: 14,
        image: "devicon-git-plain colored",
        title: "Git",
        stars: 4,
        description: "ソースコード管理に使ってます．",
        color: skillCardCol.indigo,
    },
    {
        id:15,
        image: "devicon-github-original colored",
        title: "GitHub",
        stars: 4,
        description: "Gitのウェブサービスとして使ってます．",
        color: skillCardCol.indigo,
    },
    {
        id:16,
        image: "devicon-tensorflow-original colored",
        title: "Tensorflow",
        stars: 3,
        description: "機械学習で使っています．",
        color: skillCardCol.blue,
    },
    {
        id:17,
        image: "devicon-tailwindcss-plain colored",
        title: "Tailwind CSS",
        stars: 4,
        description: "フロントエンドで重宝しています．かなりの頻度で使っていますので結構覚えました．",
        color: skillCardCol.red,
    },
    {
        id:18,
        image: "devicon-bulma-plain colored",
        title: "Bulma",
        stars: 2,
        description: "フロントエンドでサブのCSSフレームワークとして使ってます．最近はあまり使ってません．",
        color: skillCardCol.red,
    },
    {
        id:19,
        image: "devicon-sass-original colored",
        title: "SASS (SCSS)",
        stars: 2,
        description: "CSSをより効率的に書くために使ってます．",
        color: skillCardCol.red,
    },
];
//ここまで

type.ts ファイルには型を宣言しています。variable.ts ファイルにはWebページ表示する画像や文字を宣言しています。もちろん、skills.tsx ファイルに変数を宣言することも可能です。今回は、コンポーネントと変数を分けています。

画像については、deviconというライブラリを使用して表示しています。

ポートフォリオ作成 実行

ここまできましたら、実際に実行して確認してみましょう。

$ npm run dev

前回で解説したように、上記のコマンドを実行して、ローカルホストの3000ポートにアクセスしましょう。ヘッダーのメニューからSkillsページへ飛んでみましょう。そうすると、先程作成したページが表示されると思います。

まとめ

では本日のまとめに入ります。
本日は初学者の方向けにポートフォリオ作成について解説いたしました。

次回はWorksページについて解説いたしますので、ぜひ御覧ください。
お疲れさまでした。

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