React・Next.jsでのポートフォリオ完全制作チュートリアル！手を動かして学ぼう！

フロントエンジニアの就職を目指している方や、転職を希望されている方は、ポートフォリオ制作に悩んでいるのではないでしょうか。

この記事では、React・Next.jsを使ったポートフォリオ制作の解説をします。

ポートフォリオの作成は、スキルを証明するのに役立ちます。

React・Next.jsをこれから学びたい方も、ポートフォリオを制作して転職したい方もぜひ参考にしてみてください。

hikarikoubou

実際にTech Mentorを受講しました。

毎月、現役エンジニアの方とメンタリングできるので、わからないことや不安なことをサポートしてくれます。

ReactやNext.jsでポートフォリオを作成中の方、Webアプリ開発に興味がある方におすすめの記事です。

ReactとNext.jsの違いとは

ReactとNext.jsは、サーバー機能があるかないかが大きな違いです。

JavaScriptを学んでいると、「React」と「Next.js」のどちらでポートフォリオサイトを作成しようか、悩む方が多いことでしょう。

ReactよりもNext.jsの方が学習コストが低く、難易度が低いです。

先ほどもお話したように、Reactは別にサーバーを用意する必要があります。

※SPAとは、一つのページだけで使えるWebアプリケーションのことです。例えば、GoogleMapやFacebook、Slackなどがあります。

表を見てもらえるとわかりますが、それぞれ特徴が異なります。

ここからは、さらにReactとNext.jsの違いを深掘りします。

Reactの特徴

はじめに、Reactの特徴は以下の通りです。

1. UIライブラリ
2. 仮想DOM
3. コンポーネントベース
4. 単一の方向のデータフロー
5. Flexibility

Reactを使用するメリットは、簡単に最先端のUXを作れることです。

世界中で人気があるので、ライブラリに用意されたコンポーネントは洗練されています。

また、拡張性があるので、あとから改良したいときも簡単に変更可能です。

他の特徴も解説します。

1. UIライブラリ

Reactは、UI（ユーザーインターフェース）に特化したライブラリです。

Webページのボタンやテキストボックスなどの見た目や動作を簡単にカスタマイズできます。

2. 仮想DOM

仮想DOMは、実際のWebページのDOM（Document Object Model）のコピーのようなものです。

Reactはこの仮想DOMを使って、実際のDOMよりも速く更新を行います。

WebページのDOMを直接更新すると、パフォーマンスが低下することが多いが、Reactの仮想DOMを使うことで、必要最小限の変更だけを実際のDOMに適用可能です。

3. コンポーネントベース

Reactは、UIをコンポーネント（小さな部品）に分割して構築します。

例えば、ヘッダーやフッター、ボタンなどを分けて設計可能です。

コンポーネントがあることで、コードの重複を避け、保守や拡張が容易になります。

また、コンポーネントごとに独立してテストできるので、バグの少ない安定したWebアプリケーションを作成するのに役立ちます。

4. 単一の方向のデータフロー

Reactのデータフローは一方向で、親コンポーネントから子コンポーネントへとデータが流れる仕組みです。

データフローが一方向なので、データの流れや状態の変更が予測しやすくなり、複雑なWebアプリケーションでも管理がしやすくなります。

5. 柔軟性

Reactは、他のライブラリやフレームワーク（Redux、React Routerなど）と組み合わせることが可能です。

ReactはUIの表示に特化しているため、データの管理やルーティングなどの他の機能を追加するために他のライブラリやフレームワークと組み合わせられます。

Webアプリケーションの要件に合わせて、最適な構成で設計できます。

Next.jsの特徴

次に、Next.jsの特徴です。

1. フレームワーク
2. サーバーサイドレンダリング
3. 静的サイト生成
4. APIルート
5. ルーティング
6. 組み込みの画像最適化
7. 環境変数

Next.jsは、React の上に構築されたフレームワークですので、Reactを活かしつつ、Webアプリケーションの構築に必要な機能が使えます。

SEOやルーティング、サーバーサイドレンダリングなどの追加の機能があります。

ReactはUIを構築するためのライブラリであり、Next.jsはReactをベースにしたフレームワークです。

ここからは、Next.jsの特徴を解説します。

1. フレームワークとしての機能

Next.jsは、Reactの上に構築されたフレームワークとして設計されています。

このため、Reactのコンポーネントベースの設計を保持しつつ、多くの追加機能が使用可能です。

Next.jsを使用すると、初期設定や設定の手間がなく、すぐにWebアプリケーションを開発できるようになります。

2. サーバーサイドレンダリング

Next.jsは、サーバー上で直接ページをレンダリングできます。

サーバーサイドレンダリングのメリットは、ページのロード時間が速くなるので、ユーザーは速くコンテンツにアクセス可能です。

ページの表示速度が早いので、SEOでも評価されます。

3. 静的サイト生成

Next.jsは、あらかじめページをビルドすることで、静的ファイルを生成可能です。

静的サイトは、サーバー上でのレンダリングが不要なため非常に高速に表示されます。

ページの読み込み時間の短縮は、ユーザーエクスペリエンスの向上に繋がります。

4. APIルート

Next.jsを使用すると、APIルートを直接アプリケーション内に作成可能です。

APIルートは、外部サービスやデータベースとの通信が簡単に行えます。

このため、フロントエンドとバックエンドが連携するのが簡単です。

5. ルーティング

Next.jsは、ファイルとフォルダの構造に基づく独自のルーティングシステムを持っています。

ファイルベースのルーティングは、ページの追加や変更が直感的で、設定不要でルーティングを管理できます。

これにより、開発のスピードが向上します。

6. 組み込みの画像最適化

Imageコンポーネントを使用すると、画像の最適化やレイジーローディングが手軽に実現できます。

画像の読み込みはWebページのパフォーマンスに大きく影響するため、ページの読み込み速度を向上させることは、ユーザーエクスペリエンスの向上に繋がります。

7. 環境変数の管理

.envファイルを利用して、Webアプリケーションの設定や情報を管理できます。

環境変数を適切に管理すると、セキュリティが向上し、Webアプリケーションの設定を柔軟に変更可能です。

React・Next.jsのポートフォリオの役割とは

ReactやNext.jsを使ったポートフォリオは、スキルや成果を紹介できるツールです。

ここでは、他の方のポートフォリオを紹介します。

Reactのポートフォリオ

海外の方のポートフォリオですが、Reactのポートフォリオを作成する際に参考にしてみてください。

• Sara Vieira
• Dan Abramov
• Kent C. Dodds

デザインやコード構造、パフォーマンスの最適化などさまざまな面が参考になります。

Next.jsのポートフォリオ

次に、Next.jsのポートフォリオを作成するのにおすすめのサイトです。

• Tim Neutkens
• Ahmad Awais
• Cassidy Williams

Next.jsのポートフォリオを作成する際に参考にしてみてください。

React・Next.jsのポートフォリオとポートフォリオサイトの違い

「ポートフォリオ」と「ポートフォリオサイト」の違いは、以下になります。

• ポートフォリオ：作成したWebアプリケーションやWebサイトなどの成果物
• ポートフォリオサイト：ポートフォリオなどの実績や自己紹介を掲載したサイト

ポートフォリオサイトにはプロフィールや料金を記載したり、ブログを運営したりして就職活動や営業にも活用できます。

この2つを作成するときのポイントを見ていきましょう。

React・Next.jsのポートフォリオを作成するポイント

はじめに、ReactとNext.jsのポートフォリオを作成するポイントは以下の通りです。

1. ポートフォリオの説明
2. コードの品質
3. デザインとユーザビリティ

ポートフォリオを作成する際に、3つのポイントを意識してみてください。

一つずつ解説します。

1.ポートフォリオの説明

ReactやNext.jsのスキルを証明するためは、具体的にポートフォリオの詳細を伝えるのが重要です。

Webアプリケーションがどのような技術を使い、問題を解決したのかを具体的に説明することで、スキルをアピールできます。

2.コードの品質

GitHubなどのプラットフォームにソースコードを公開し、品質や整理度を示しましょう。

また、適切なコメントやドキュメントも評価されます。

3.デザインとユーザビリティ

ポートフォリオは見た目の美しさだけでなく、ユーザビリティやアクセシビリティも考慮してください。

ReactやNext.jsを最大限に活用し、使いやすく、魅力的なインターフェースを作成するのがおすすめです。

React・Next.jsのポートフォリオサイトを作成するポイント

次に、ReactとNext.jsのポートフォリオサイトを作成するポイントです。

1. シンプルさ
2. レスポンシブデザイン
3. SEOの最適化
4. コンテンツの充実

React・Next.jsのポートフォリオサイトを作成する際は、以上の4つのポイントを参考にしてください。

1.シンプルさ

ポートフォリオサイトの目的は、スキルや経験などを伝えることです。

余計な装飾や情報は避け、必要な情報だけをシンプルに伝えるデザインを心掛けましょう。

2.レスポンシブデザイン

スマホやタブレットからのアクセスに対応できるように、レスポンシブデザインを実装し、どのデバイスからでも快適に閲覧できるようにしましょう。

3.SEOの最適化

Next.jsのサーバーサイドレンダリングの機能を活用して、SEOを最適化しましょう。

営業活動をするのであれば、検索エンジンからの流入が期待できます。

4.コンテンツの充実

プロフィールや料金、ブログなどの専門性を伝えるコンテンツを充実させるのも効果的です。

信頼できるポートフォリオサイトの作成を心がけましょう。

React・Next.jsのポートフォリオを作る学習方法

初学者の方は、React・Next.jsを使用したポートフォリオ制作は、以下の順で学習するのがおすすめです。

• HTML・CSS・JavaScript
• React・Next.js・TypeScript
• アプリケーションを作成
• ポートフォリオ制作
• ポートフォリオサイト制作

ここでは、React・Next.jsのポートフォリオを作成するための学習手順を詳しく紹介します。

プログラミングを学習している方や転職を目標にしている方は、学習していないところから進めて、ポートフォリオサイトの完成を目指してください。

HTML・CSS・JavaScript

ReactとNext.jsは、基本的なHTMLやCSS、JavaScriptの知識が必要です。

3つの言語の基本を理解すると、ReactとNext.jsの学習がスムーズに進みます。

React・Next.js・TypeScript

HTML・CSS・JavaScriptを学習して、基礎ができたら次はReactとNext.js、TypeScriptの学習に進みます。

それぞれの特徴は以下の通りです。

ReactとNext.jsだけでなく、他のフレームワークやライブラリを学習するとプログラミングの知識が増えます。

Webアプリケーションを作成

次に、実際に手を動かして小さなWebアプリケーションを作成してみましょう。

基礎的なプログラミング言語、フレームワークやライブラリを学んだ後は、実際にWebアプリケーションを作成すると理解が深まります。

作成するWebアプリケーションに悩んでいる場合は、ToDoリストやツイートアプリなどがおすすめです。

簡単なものから始めることで、ReactやNext.jsの機能や動作を理解できます。

ポートフォリオ制作

いくつか簡単なWebアプリケーションの制作経験を積んだら、ポートフォリオ制作を行います。

今まで作成したものもポートフォリオとして紹介できますが、さらにアピールするために、難易度が高いものを作成しましょう。

• Airbnb
• Netflix
• Facebook
• Instagram

以上の4つは、Reactで開発されたサービスです。

ポートフォリオの作成で困った方は、既存サービスの特化版アプリ（カフェ特化のInstagramなど）にアレンジするのもおすすめです。

ポートフォリオサイト制作

最後に、作成したポートフォリオを紹介するポートフォリオサイト制作を行います。

デザインやUI/UXの知識を活かして、ポートフォリオサイトをみる方に良い印象を与えられるようにしましょう。

このように、一歩ずつ学習を進めることで、ReactとNext.jsを使用したポートフォリオの制作は難しくありません。

もし、ポートフォリオ制作やプログラミング学習に悩んだ時は、無料カウンセリングで相談するのもおすすめです。

実践！Reactを使ってポートフォリオサイトを作るチュートリアル

ここからは、実際にReactを用いてポートフォリオサイトを作成する手順を紹介します。

Reactを使ってポートフォリオサイトを作るポイントは以下の4つです。

• 開始前の準備
• 新しいReactアプリの作成
• 主要コンポーネントの作成と組み込み
• スタイリングとレスポンシブデザインの考慮点

実践を通して、Webアプリケーションの制作技術も身につけましょう。

開始前の準備

まず、開発を始める前の基本的な準備をします。

• 環境のセットアップ
• エディタの選択
• ディレクトリの作成

1.環境のセットアップ

Node.jsとnpm（Node Package Manager）をインストールしてください。

Reactアプリの開発に必要です。

2.エディタの選択

Visual Studio Code、Atom、Sublime Textなど使いやすいテキストエディタを準備してください。

Reactで開発をする場合は、Visual Studio Codeの拡張機能が種類が多いのでおすすめです。

3. ディレクトリの作成

作業用のフォルダをPC上に作成してください。

そのフォルダの中で開発を行うと、ファイル管理がスムーズになります。

新しいReactアプリの作成

【create-react-app】というツールを使用して、新しいReactアプリケーションを作成します。

ターミナルやコマンドプロンプトを開き、以下のコマンドを入力します。

npx create-react-app my-portfolio

実行すると、【my-portfolio】という名前のReactアプリが作成されます。

主要コンポーネントの作成と組み込み

次に、サイトの主要なコンポーネントを作成します。

例えば、コンポーネントは以下の4つがあります。

4つのコンポーネントを作成し、App.jsに組み込むことで、Webサイトの基本的な構造ができます。

スタイリングとレスポンシブデザインの考慮点

デザインは、サイトの印象を大きく左右します。

CSSを用いて見た目を整えますが、Webサイト全体で同じフォントや色を使用したり、レスポンシブデザインにする必要があります。

以上が、Reactを用いたポートフォリオサイトを作成する基本的な制作フローです。

細かい部分や実際のコーディングテクニックは、チュートリアルやドキュメントを参照しながら進めてください。

実践！Next.jsを使ってポートフォリオサイトを作るチュートリアル

次に、Next.jsを使ってポートフォリオサイトを作成する方法です。

Next.jsは、サーバーサイドレンダリングや静的サイト生成などの多くの機能を持っています。

• 開始前の準備
• 新しいNext.jsアプリの作成
• 基本的なページの構築
• スタイリング
• 画像の追加
• 静的データの取得

ポートフォリオサイトをNext.jsで作成する方法を紹介します。

開始前の準備

まずは、Next.jsの開発を始める前の基本的な準備をします。

• Node.jsのインストール
• Yarn or npm

以上の2つは、Next.jsで開発をするのに必要です。

1.Node.jsのインストール

Next.jsはNode.js上で動作するため、Node.js公式サイトから最新バージョンをダウンロードしてインストールしてください。

2.Yarn or npm

これは、パッケージマネージャーです。

Node.jsをインストールすると、npmも自動的にインストールされます。

また、Yarnからもインストール可能です。

新しいNext.jsアプリの作成

新しいNext.jsアプリを作成する手順は以下の通りです。

1. ターミナルまたはコマンドプロンプトを開きます。

2.【npx create-next-app next-portfolio】コマンドを実行します。

これにより、【next-portfolio】という名前の新しいNext.jsアプリが作成されます。

3. 作成したディレクトリに移動します。

以上の手順を行うと、新しいNext.jsアプリが作成されます。

基本的なページの構築

次に基本的なページを構築します。

1. 【pages】ディレクトリに【about.js】という新しいファイルを作成します。

2. 以下のようにコードを記述してください

このコードは、【/about】ルートにアクセスすると表示される単純なページを作成します。

以上が、基本的なページを構築する方法です。

スタイリング

Next.jsは、CSS Modulesやstyled-jsxなどの多くのスタイリングオプションをサポートしています。

ここでは、CSS Modulesを使用します。

1. 【styles】ディレクトリをプロジェクトのルートに作成します。

2. 【styles/Home.module.css】ファイルを作成し、スタイルを追加します。

3. 追加したファイルを使用して、ページのコンポーネントをスタイルします。

以上がスタイリングです。

画像の追加

Next.js10以降、画像の最適化が組み込まれています。

1. 【public】ディレクトリに画像を追加
2. 【Image】コンポーネントを使用してページに画像を追加

以上が画像の追加方法です。

静的データの取得

Next.jsの【getStaticProps】関数を使用して、ビルド時に静的データを取得できます。

1. ページコンポーネントの下に【getStaticProps】関数を追加します。

2. この関数から返されたデータは、ページコンポーネントの【props】として渡されます。

以上で、基本的なポートフォリオサイト作成の完成です。

必要に応じて追加の機能やスタイリングを追加して、ポートフォリオサイトをカスタマイズしてください。

もし、ポートフォリオサイトの作成や転職方法で分からないことや相談したいことがあれば、無料のカウンセリングがおすすめです。

さまざまな専門分野に特化した講師が在籍しているので、学習方法や転職方法をアドバイスできます。

Reactについてよくある質問

次に、Reactに関連する初学者のよくある質問を紹介します。

• JSXとは何ですか？
• ReactとjQueryの違いは何ですか？
• Reactの「virtual DOM」とは何ですか？
• Reactの「コンポーネント」とは何ですか？

Reactについてよくある質問を理解すると、より深く学べるので、参考にしてください。

JSXとは何ですか？

JSXはJavaScriptの拡張構文で、Reactコンポーネント内でHTMLのようにタグを書くことができます。

これによりコードが読みやすくなり、デザインとロジックを一緒に書きやすくなります。

ReactとjQueryの違いは何ですか？

ReactとjQueryは両方ともJavaScriptライブラリですが、目的と使用方法が異なります。

Reactは、ユーザーインターフェースを構築するために使用されます。

jQueryはDOM操作やアニメーションなど、さまざまな用途に使われます。

Reactが現代の単一ページアプリケーションの構築に向いている一方、jQueryはより一般的なWebページに使われることが多いです。

Reactの「virtual DOM」とは何ですか？

Virtual DOMは実際のDOMの軽量なコピーで、Reactが変更を検出して、高速で更新する仕組みです。

ユーザーが何かアクションを取ったとき、Reactは先にVirtual DOMで変更を行い、実際のDOMに反映します。

これにより、高速なページ更新が可能です。

Reactの「コンポーネント」とは何ですか？

コンポーネントは、Reactの中心的な概念です。

それぞれのコンポーネントは、Webページの一部分です。

例えばボタンやメニューなどを表して、コンポーネントを組み合わせて、ページ全体を構築します。

Next.jsに関するよくある質問

次に、Next.jsに関するよくある質問を紹介します。

• Next.jsでの画像最適化はどうしますか？
• Next.jsはどのような場面で便利ですか？
• Next.jsをホストするためのおすすめの方法は何ですか？

Next.jsに関する疑問を一つずつなくしていきましょう。

Next.jsでの画像最適化はどうしますか？

Next.jsには組み込みの【Image】コンポーネントが含まれており、使用するとさまざまな場面で最適化できます。

これらを使用するためには、【Image】コンポーネントをインポートして、画像のソースを【src】属性に指定する必要があります。

Next.jsはどのような場面で便利ですか？

Next.jsは、さまざまな場面でのWeb開発におすすめです。

作成するWebサイトにより、Next.jsを使用するかReactを使用するか検討してください。

Next.jsをホストするためのおすすめの方法は何ですか？

Next.jsは、サーバーサイドとクライアントサイドの両方で動作するフレームワークであり、多くのホスティングプラットフォームで動作します。

特に人気のあるのは、以下の通りです。

1. Vercel
2. Netlify
3. AWS Amplify
4. DigitalOcean App Platform

以上の4つは、Next.jsをさまざまなWeb開発に適応させることができます。

まとめ：React・Next.jsでポートフォリオを作成しよう！

Reactでポートフォリオを作成する際には、以下のポイントが重要です。

• 基本を理解する
• コンポーネント設計
• 更新とメンテナンス

HTMLやCSS、JavaScriptの基本をしっかりと押さえておくことが、ReactやNext.jsをより深く理解するために必要です。

また、技術の進化やスキルの向上に合わせて、ポートフォリオも定期的に更新していきましょう。

ReactやNext.jsなどのスキルを向上させるには、何度も手を動かして実践し、テストすることが大切です。

他にも、メンターをつけることが成長に繋がります。

ReactやNext.jsに興味を持った方は、まずは個別説明会に申し込んでみてください。

現役エンジニアが、お悩みをヒアリングし、あなたに合った具体的なアクションプランをご提示いたします。

TechMentor

ReactやNext.js、Webアプリ開発に興味のある方は、お気軽にお申し込みください！
お話しできることを楽しみにしております😄

hikarikoubou

Webライター

フリーランス独立中の30代。最近はBBQをするのが趣味。AI技術に興味があり、初学者にもおすすめの活用方法を発信します。