Zenn
🐥

Reactレクチャー4 (ポートフォリオ)

2021/10/14に公開
React
lecture
tech

今回やりたいこと

  • ポートフォリオがどういうものか理解する。
  • 前回の内容(React)を用いて、実際に簡単なページを作成する。
    • 要所々で、リンク、画像、アイコンなどの使い方も意識して書いていきましょう。
    • また、コンポーネントベースな書き方をしているので、そこにも慣れていきましょう。
    • 基本的に時間がかかるので、コピペでOKです。この資料に細かい説明は載せているので、随時そちらをみて理解を深めることを中心にレクチャーを受けてください。
  • github、vercelを用いて公開する。

期間は、来年の夏休み終わりくらい(2022年9月頃)を目安に作業を進めておいてください。
(早めに作っておいても、開発報告などで使えるので損はないです)
今回はReactを使用していますが、ご自身の好きな技術で作成してもらって構いません。

ポートフォリオとはなんぞや

ポートフォリオは、自分の履歴や能力を周囲に伝えるための作品集のことである。
基本的に以下の項目が書かれていることが多いです。

  • 自己紹介(名前、アイスブレイク、コンタクトページなど）
  • スキル(使用言語、ソフト、など）
  • 開発物
  • プロジェクト開発など参加している内容、役割
  • 活動歴(学会発表など、個人的に頑張っていること）

完成イメージ図

今回のコード

https://github.com/nyaruo/react-lecture2

環境構築

前回同様、Reactアプリを作成していきましょう。

$ cd Lecture
$ npx create-react-app portfolio-lecture

$ cd portfolio-lecture
$ npm start

localhost:3000で以下のような画面が表示されていれば成功です。

ファイル構成

portfolio-lecture
  ├── node_modules　 (npmで管理されるモジュール類がまとめてある)
  ├── public (公開フォルダ。 静的ファイルを格納)
　　 │   ├── favicon.ico　(タブに表示されるアイコン部分)
  │   └── index.html (重要: アクセス時に表示される部分)
  ├── src (基本的に触るのはここ。開発ファイル、JSXファイルはここに格納)
  │   ├── App.css (App.jsのスタイルシート)
  │   ├── App.js (重要: index.htmlに組み込み実際に画面を表示しているコンポーネント)
  │   ├── index.css (index.jsのスタイルシート)
  │   └── index.js (重要: アプリのベースとなるスクリプト)
  ├── .gitignore (githubにコードをあげる際に使用。不必要なファイルを指定)
  ├── package-lock.json (npm又はyarnに関する設定情報)
  ├── package.json (npmでパッケージ管理をするための設定情報)
  └── README.md (プロジェクトの説明情報、取扱説明書)

GitHubにファイルをアップロード

  1. Hello Worldを作成しよう
    前回と同じ内容なので説明は省きます。
    いらないコードを削除して、Hello Worldを表示してみましょう。
public/index.html
 <!DOCTYPE html>
 <html lang="en">
   <head>
    <meta charset="utf-8" />
    <title>React App</title>
   </head>
   <body>
    <div id="root"></div>
   </body>
 </html>
src/App.js
 import './App.css';

 function App() {
   return (
     <h1> Hello, World! </h1>
   );
 }
 export default App;
src/index.js
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';

 ReactDOM.render(
   <App />,
   document.getElementById('root')
 );

上記のように「Hello World」が表示されていれば成功です。

  1. Githubで新規リポジトリを作成しよう
    先ほど作ったHello Worldを一度アップロードしてみましょう。
$ cd ./portfolio-lecture
$ git init
$ git branch develop
$ git checkout develop
$ git add .
$ git commit -m "first commit"
$ git remote add origin 各自のリポジトリURLを貼り付け
$ git push -u origin develop
$ git checkout master
$ git merge develop

Githubにコードが表示されていれば成功です。

Vercelを用いてデプロイしてみよう

デプロイとはなんぞや

デプロイとは、開発したアプリケーションをサーバー上に配置して利用できるようにすることである。
アプリケーションを公開するためのリリースにおける工程の一つである。
ちなみに、ビルドは、デプロイをするために必要な実行ファイルを作成することである。

$ npm run build

をすることによって、デプロイをする際にエラーが起きないかどうか事前に確かめることができる。

Vercelのサインアップ

https://vercel.com/

上記のページへ飛んで、Githubと連携してください。

デプロイしてみよう

連携が出来たら、上記のような画面が出てくると思います。
左のImportGitRepositoryの方から、先ほどHello Worldファイルをアップロードしたリポジトリを選択してImportを推してください。

  1. Create a Team -> Skip
  2. Configure Project -> Deploy
  3. Deployで全てにチェックがつけば完了

上記のような画面になっていれば成功です。また、左のサイト画像部分をクリックすれば、公開されたページへ飛ぶことができます。

簡単なサイトを作成してみよう

基本となるページを作成

ファイル構成

portfolio-lecture
  ├── src 
  │   └── pages
  │        ├── Home.jsx
  │        ├── PageA.jsx
  │        └── PageB.jsx

3つのページを今回は使用します。それぞれ以下のコードを記述してください。

pages/Home.jsx
 const Home = () => {
   return (
     <p>Home</p>
   )
 }

 export default Home;
pages/PageA.jsx
 const PageA = () => {
   return (
     <p>PageA</p>
   )
 }

 export default PageA;
pages/PageB.jsx
 const PageB = () => {
   return (
     <p>PageB</p>
   )
 }

 export default PageB;

react-router-domをインポート

どの　URLでどのページ、コンポーネントを表示するかを指定できるパッケージ。

$ npm i -S react-router-dom
src/App.js
 import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
 import Home from "./pages/Home";
 import PageA from "./pages/PageA";
 import PageB from "./pages/PageB";

 function App() {
   return (
     <Router>
       <Switch>
         <Route path="/" exact component={Home} />
         <Route path="/pageA" component={PageA} />
         <Route path="/pageB" component={PageB} />
       </Switch>
     </Router>
   );
 }

 export default App;

import { Switch, Route, BrowserRouter as Router } from "react-router-dom";でreact-router-domからSwitch,Route,..といった機能をインポートしています。
import Home from "./pages/Home";では、Home.jsxをHomeという名前のコンポーネントとしてインポートしています。
また、その中の<Route path="/" exact component={Home} />では、pathでどのURLで表示するかを指定、component={}でどのコンポーネントを持ってくるかを指定しています。

$ npm start

実際に、http://localhost:3000/でHome　が表示、http://localhost:3000/pageA　でPageAが表示、http://localhost:3000/pageB　でPageBが表示されていることを確認してみましょう。

ナビゲーションバーを作成

ファイル構成

portfolio-lecture
  ├── src 
  │   └── components
  │        └── Navbar.jsx
components/Navbar.jsx
 import { NavLink } from "react-router-dom";

 const Navbar = () => {
     return (
         <>
             <NavLink to='/'>
                 Home
             </NavLink>
             <NavLink to='/pageA'>
                 PageA
             </NavLink>
             <NavLink to='/pageB'>
                 pageB
             </NavLink>
         </>
     );
 };

 export default Navbar;

Reactでリンクを用いるときは、NavLinkを使用する必要があります。

src/App.js
 import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
 import Home from "./pages/Home";
 import PageA from "./pages/PageA";
 import PageB from "./pages/PageB";
+ import Navbar from "./components/Navbar";

 function App() {
   return (
     <Router>
+       <Navbar />
       <Switch>
         <Route path="/" exact component={Home} />
         <Route path="/pageA" component={PageA} />
         <Route path="/pageB" component={PageB} />
       </Switch>
     </Router>
   );
 }

 export default App;

上記のように表示されていれば成功です。

ヘッダーを作成

先ほど作成したナビゲーションバーにスタイルを追加してヘッダーを作っていきます。

ファイル構成

portfolio-lecture
  ├── src 
  │   ├── assets
  │   │    ├── Header.css
  │   │    ├── Footer.css
  │   │    └── Navbar.css
  │   └── components
  │        ├── Header.jsx
  │        ├── Footer.jsx
  │

ナビゲーションバーにスタイルを適用

assets/Navbar.css
 .navMenu {
   display: flex;
   align-items: center;
 }

 .navItem{
   font-size: 1.25rem;
   color: gray;
   display: flex;
   align-items: center;
   text-decoration: none;
   padding: 0 2rem;
   height: 100%;
   cursor: pointer;
 }
components/Navbar.jsx
 import { NavLink } from "react-router-dom";
 import "../assets/Navbar.css";
 import "../index.css";
 
 const Navbar = () => {
     return (
         <>
	   <div className="navMenu">
             <NavLink to='/' className="navItem">
                 Home
             </NavLink>
             <NavLink to='/pageA' className="navItem">
                 PageA
             </NavLink>
             <NavLink to='/pageB' className="navItem">
                 pageB
             </NavLink>
	   </div>
         </>
     );
 };

 export default Navbar;

assets/Header.css
 .navBar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding-left: 3rem;
     background: white;
     height: 70px;
     display: flex;
     justify-content: space-between;
     border-bottom: solid 1px;
     --tw-bg-opacity: 1;
     border-color: rgba(229, 231, 235, var(--tw-bg-opacity));
   }
components/Header.jsx
 import Navbar from "./Navbar";
 import "../assets/Header.css";

 const Header = () => {
   return (
     <>
       <div className="navBar">
           <Navbar />
       </div>
     </>
   );
 };

 export default Header;

フッターを作成

components/Footer.jsx
import { NavLink } from "react-router-dom";
import "../assets/Footer.css";

const Footer = () => {
    return (
        <>
            <NavLink to="/" className="footer">
                    React Portfolio ©︎2021-2022
            </NavLink>
        </>
    );
};

export default Footer;

フッターにスタイルを適用

assets/Footer.css
 .footer {
     position: fixed;
     bottom: 0; 
     left: 0;
     width: 100%;
     height: 3rem;
     padding-top: 1.5rem;
     text-align : center;
     font-size: 1.125rem;
     --tw-text-opacity: 1;
     color: gray;
     border-top: solid 1px;
     border-color: rgba(229, 231, 235, var(--tw-bg-opacity));
 }

 .footer:hover {
     --tw-text-opacity: 1;
     color: rgba(156, 163, 175, var(--tw-text-opacity));	
 }

App.jsにHeader, Footerコンポーネントをインポート

src/App.js
 import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
 import Home from "./pages/Home";
 import PageA from "./pages/PageA";
 import PageB from "./pages/PageB";
 import Header from "./components/Header";
 import Footer from "./components/Footer";

 function App() {
   return (
     <Router>
       <Header />
       <Switch>
         <Route path="/" exact component={Home} />
         <Route path="/pageA" component={PageA} />
         <Route path="/pageB" component={PageB} />
       </Switch>
       <Footer />
     </Router>
   );
 }

 export default App;
src/index.css
 html {
   display: flex;
   justify-content: center;
   align-items: center;
   --tw-bg-opacity: 1;
   background-color: rgba(239, 246, 255, var(--tw-bg-opacity));
   flex-direction: column;
   min-height: 100vh;
   --tw-text-opacity: 1;
   color: rgba(75, 85, 99, var(--tw-text-opacity));    
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;	
 }

ここで一旦、ここまでのコードをgithubにアップロードして動作確認をしてみましょう。

$ git checkout develop
$ git add .
$ git commit -m "add Header & Footer Components"
$ git push -u origin develop
$ git checkout master
$ git merge develop

ここまでで、きちんとStateがReadyであることが確認できればOKです。

他のよく使う知識

ファイル構成

portfolio-lecture
  ├── public
  │   ├── favicon.ico
  │   └── index.html
  │

タブに表示されるサイト名、アイコンを変更

assets/index.html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>React Lecture</title>
   </head>
   <body>
     <div id="root"></div>
   </body>
 </html>

<title>タグ内でサイトの表示名を変更できる。


favicon.icoは、好きなアイコン(.ico)の名前をfaviconに変更して、public直下に置くことにより変更可能。

画像を貼り付ける

 import Image from "imagePath";
	
 <img
      className="スタイル"
      src={Image}
      width="横幅"
      height="高さ"
      alt="画像が表示されなかった場合に表示するテキスト"
 />

コンタクトアイコンを表示

Githubのアイコンを押したらGithubPageへ飛ぶようなアイコンを作成する場合。
FontAwesomeというWeb上でよく利用されるアイコンフォントを使うことができるパッケージを使用します。
今回使用するアイコンは、下記のBrandsStyle属性のアイコンです。
https://fontawesome.com/v5.15/icons/github

$ npm install @fortawesome/react-fontawesome
$ npm install @fortawesome/fontawesome-svg-core

FontAwesomeを使用するためのパッケージをインストール

$ npm install @fortawesome/free-brands-svg-icons

BrandsStyle属性のアイコンを使用するためのパッケージをインストール

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
	
 <a
    href="githubのURL"
    target="_blank"
    rel="noopener noreferrer"
 >
  <FontAwesomeIcon icon={faGithub} size="サイズ" color="アイコンの色" opacity="透明度" />	
 </a>

target="_blank"、rel="noopener"は新しいタブで外部リンク(Githubページ)を開くことを指定。

画像とアイコンを使ってみよう

実際に、使ってみましょう。

Home.jsx
 import Image from "../assets/avatar.png";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';

 const Home = () => {

   return (
     <>
       <p>Home</p>
       <img
         className="rounded-full"
         src={Image}
         width="240"
         height="240"
         alt="Avatar"
       />
       <a
         href="https://github.com/nyaruo"
         target="_blank"
         rel="noopener noreferrer"
       >
         <FontAwesomeIcon icon={faGithub} size="2x" color="gray" opacity="0.9" />
       </a>
     </>
   )
 }

 export default Home;

終わりに

ポートフォリオを作る上でのコーディングの手順とかはレクチャーみたいな感じで良いので、
自分の好きなスタイルとかを用いていい感じのサイトを作ってみてください。あと、最後の部分に画像の貼り付け方とか,アイコンの使い方とかポートフォリオを作る上で使いそうなコンポーネントは随時乗せていくので、この機会にReactを使ってポートフォリオを作ろうかなと思った人はぜひ参考にどうぞ。

最終的に、ポートフォリオは就活などで提出することがあるので、
3年生の夏休みごろには作っておくと良いかもしれません。

GitHubで編集を提案

Discussion