皆さんこんにちは。
前回に引き続き、チュートリアルの解説を行います。この記事では、初学者の方向けに最新の、NextJSを使用したチュートリアルとしてポートフォリオサイトの作成について解説しています。
今回は、第三回でSkillsページの作成を初学者の方向けにわかりやすく解説していきます。
本記事はシリーズとなっております。
もし、概要ページや前回のページをご覧になってない方は、ぜひ下記に示す解説記事を順番にご覧いただければ幸いです。
ポートフォリオ作成 全編
- ポートフォリオ作成 概要編(No.1)
- ポートフォリオ作成 Topページ編(No.2)
- ポートフォリオ作成 Aboutページ編(No.3)
- ポートフォリオ作成 Skillsページ編(No.4) <<< 今回の記事
- ポートフォリオ作成 Worksページ編(No.5)
- ポートフォリオ作成 Hobbysページ編(No.6)
ポートフォリオ作成 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ページについて解説いたしますので、ぜひ御覧ください。
お疲れさまでした。