特集
【Reactはオンライン学習可能？】おすすめの勉強法とReactが学べるオンラインプログラミングスクール4選
Reactは、フロントエンド開発で人気のあるライブラリの一つです。 Reactを使った採用は求人数も多く、給与も高いので、これからプログラミングを学習する方やすでにプログラミング学習を始めている方にとって魅力があります。 […]
フロントエンジニアの就職を目指している方や、転職を希望されている方は、ポートフォリオ制作に悩んでいるのではないでしょうか。
この記事では、React・Next.jsを使ったポートフォリオ制作の解説をします。
本記事の対象の方ポートフォリオの作成は、スキルを証明するのに役立ちます。
React・Next.jsをこれから学びたい方も、ポートフォリオを制作して転職したい方もぜひ参考にしてみてください。
実際にTech Mentorを受講しました。
毎月、現役エンジニアの方とメンタリングできるので、わからないことや不安なことをサポートしてくれます。
ReactやNext.jsでポートフォリオを作成中の方、Webアプリ開発に興味がある方におすすめの記事です。
ReactとNext.jsの違いとは
ReactとNext.jsは、サーバー機能があるかないかが大きな違いです。
JavaScriptを学んでいると、「React」と「Next.js」のどちらでポートフォリオサイトを作成しようか、悩む方が多いことでしょう。
ReactよりもNext.jsの方が学習コストが低く、難易度が低いです。
先ほどもお話したように、Reactは別にサーバーを用意する必要があります。
| 名称 | React | Next.js |
| 構造名 | ライブラリ | フレームワーク |
| サーバ機能 | なし | あり |
| 学習コスト | 高い | 低い |
| 特徴 | SPA拡張しやすい ソースコードが理解しやすい | SEOに強い 面倒な設定不要ですぐ使えるファイルベースルーティング機能 |
※SPAとは、一つのページだけで使えるWebアプリケーションのことです。例えば、GoogleMapやFacebook、Slackなどがあります。
表を見てもらえるとわかりますが、それぞれ特徴が異なります。
ここからは、さらにReactとNext.jsの違いを深掘りします。
Reactの特徴
はじめに、Reactの特徴は以下の通りです。
- UIライブラリ
- 仮想DOM
- コンポーネントベース
- 単一の方向のデータフロー
- 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の特徴です。
- フレームワーク
- サーバーサイドレンダリング
- 静的サイト生成
- APIルート
- ルーティング
- 組み込みの画像最適化
- 環境変数
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のポートフォリオを作成する際に参考にしてみてください。
デザインやコード構造、パフォーマンスの最適化などさまざまな面が参考になります。
Next.jsのポートフォリオ
次に、Next.jsのポートフォリオを作成するのにおすすめのサイトです。
Next.jsのポートフォリオを作成する際に参考にしてみてください。
React・Next.jsのポートフォリオとポートフォリオサイトの違い
「ポートフォリオ」と「ポートフォリオサイト」の違いは、以下になります。
- ポートフォリオ：作成したWebアプリケーションやWebサイトなどの成果物
- ポートフォリオサイト：ポートフォリオなどの実績や自己紹介を掲載したサイト
ポートフォリオサイトにはプロフィールや料金を記載したり、ブログを運営したりして就職活動や営業にも活用できます。
この2つを作成するときのポイントを見ていきましょう。
React・Next.jsのポートフォリオを作成するポイント
はじめに、ReactとNext.jsのポートフォリオを作成するポイントは以下の通りです。
- ポートフォリオの説明
- コードの品質
- デザインとユーザビリティ
ポートフォリオを作成する際に、3つのポイントを意識してみてください。
一つずつ解説します。
1.ポートフォリオの説明
ReactやNext.jsのスキルを証明するためは、具体的にポートフォリオの詳細を伝えるのが重要です。
Webアプリケーションがどのような技術を使い、問題を解決したのかを具体的に説明することで、スキルをアピールできます。
2.コードの品質
GitHubなどのプラットフォームにソースコードを公開し、品質や整理度を示しましょう。
また、適切なコメントやドキュメントも評価されます。
3.デザインとユーザビリティ
ポートフォリオは見た目の美しさだけでなく、ユーザビリティやアクセシビリティも考慮してください。
ReactやNext.jsを最大限に活用し、使いやすく、魅力的なインターフェースを作成するのがおすすめです。
React・Next.jsのポートフォリオサイトを作成するポイント
次に、ReactとNext.jsのポートフォリオサイトを作成するポイントです。
- シンプルさ
- レスポンシブデザイン
- SEOの最適化
- コンテンツの充実
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の知識が必要です。
| 言語名 | 役割 |
| HTML | Webページの構造を作る言語 |
| CSS | デザインやレイアウトを指定する言語 |
| JavaScript | 動きを作る言語 |
3つの言語の基本を理解すると、ReactとNext.jsの学習がスムーズに進みます。
React・Next.js・TypeScript
HTML・CSS・JavaScriptを学習して、基礎ができたら次はReactとNext.js、TypeScriptの学習に進みます。
それぞれの特徴は以下の通りです。
| 名称 | 特徴 |
| React | コンポーネントベースでの開発におすすめ |
| Next.js | 静的サイト生成サーバーサイドレンダリング |
| TypeScript | バグの早期発見に活躍するJavaScriptに静的な型を追加した言語 |
ReactとNext.jsだけでなく、他のフレームワークやライブラリを学習するとプログラミングの知識が増えます。
Webアプリケーションを作成
次に、実際に手を動かして小さなWebアプリケーションを作成してみましょう。
基礎的なプログラミング言語、フレームワークやライブラリを学んだ後は、実際にWebアプリケーションを作成すると理解が深まります。
作成するWebアプリケーションに悩んでいる場合は、ToDoリストやツイートアプリなどがおすすめです。
簡単なものから始めることで、ReactやNext.jsの機能や動作を理解できます。
ポートフォリオ制作
いくつか簡単なWebアプリケーションの制作経験を積んだら、ポートフォリオ制作を行います。
今まで作成したものもポートフォリオとして紹介できますが、さらにアピールするために、難易度が高いものを作成しましょう。
- Airbnb
- Netflix
以上の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つがあります。
| コンポーネント名 | 役割 |
| Header | サイトのトップ部分に配置されるコンポーネント |
| Footer | サイトの最下部に配置されるコンポーネント |
| About | 自己紹介やスキル、経験を紹介するセクション |
| Projects | 実際に作成したプロジェクトや作品を展示するセクション |
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. 作成したディレクトリに移動します。
cd next-portfolio
以上の手順を行うと、新しいNext.jsアプリが作成されます。
基本的なページの構築
次に基本的なページを構築します。
1. 【pages】ディレクトリに【about.js】という新しいファイルを作成します。
2. 以下のようにコードを記述してください
jsx
function About() {
return (
<div>
<h1>About Me</h1>
<p>This is my personal portfolio site built with Next.js!</p>
</div>
);
}
export default About;
このコードは、【/about】ルートにアクセスすると表示される単純なページを作成します。
以上が、基本的なページを構築する方法です。
スタイリング
Next.jsは、CSS Modulesやstyled-jsxなどの多くのスタイリングオプションをサポートしています。
ここでは、CSS Modulesを使用します。
1. 【styles】ディレクトリをプロジェクトのルートに作成します。
2. 【styles/Home.module.css】ファイルを作成し、スタイルを追加します。
3. 追加したファイルを使用して、ページのコンポーネントをスタイルします。
以上がスタイリングです。
画像の追加
Next.js10以降、画像の最適化が組み込まれています。
- 【public】ディレクトリに画像を追加
- 【Image】コンポーネントを使用してページに画像を追加
例：<Image src="/your-image.jpg" alt="Description" width={500} height={500} />
以上が画像の追加方法です。
静的データの取得
Next.jsの【getStaticProps】関数を使用して、ビルド時に静的データを取得できます。
1. ページコンポーネントの下に【getStaticProps】関数を追加します。
2. この関数から返されたデータは、ページコンポーネントの【props】として渡されます。
以上で、基本的なポートフォリオサイト作成の完成です。
必要に応じて追加の機能やスタイリングを追加して、ポートフォリオサイトをカスタマイズしてください。
もし、ポートフォリオサイトの作成や転職方法で分からないことや相談したいことがあれば、無料のカウンセリングがおすすめです。
さまざまな専門分野に特化した講師が在籍しているので、学習方法や転職方法をアドバイスできます。
Reactについてよくある質問
次に、Reactに関連する初学者のよくある質問を紹介します。
- JSXとは何ですか？
- ReactとjQueryの違いは何ですか？
- Reactの「virtual DOM」とは何ですか？
- Reactの「コンポーネント」とは何ですか？
Reactについてよくある質問を理解すると、より深く学べるので、参考にしてください。
JSXとは何ですか？
JSXはJavaScriptの拡張構文で、Reactコンポーネント内でHTMLのようにタグを書くことができます。
これによりコードが読みやすくなり、デザインとロジックを一緒に書きやすくなります。
例：<Button color="blue">Click Me</Button>
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開発におすすめです。
| 場面 | 内容 |
| SSR （Server Side Rendering） | コンテンツがサーバー側でレンダリングされ、クライアントに完全なページとして送信される場面でのSEO最適化やパフォーマンス向上が求められる |
| 静的サイト生成 | ブログやドキュメントなど、コンテンツが定期的に更新されるがリクエストごとに動的なレンダリングが不要なサイト |
| APIルート | APIを直接Next.js内で作成し、サーバーレス関数としてデプロイする |
| パフォーマンス最適化 | 高速なWebサイトを作成したい場合の画像やサーバーサイドレンダリングなどの最適化 |
作成するWebサイトにより、Next.jsを使用するかReactを使用するか検討してください。
Next.jsをホストするためのおすすめの方法は何ですか？
Next.jsは、サーバーサイドとクライアントサイドの両方で動作するフレームワークであり、多くのホスティングプラットフォームで動作します。
特に人気のあるのは、以下の通りです。
- Vercel
- Netlify
- AWS Amplify
- DigitalOcean App Platform
以上の4つは、Next.jsをさまざまなWeb開発に適応させることができます。
まとめ：React・Next.jsでポートフォリオを作成しよう！
Reactでポートフォリオを作成する際には、以下のポイントが重要です。
- 基本を理解する
- コンポーネント設計
- 更新とメンテナンス
HTMLやCSS、JavaScriptの基本をしっかりと押さえておくことが、ReactやNext.jsをより深く理解するために必要です。
また、技術の進化やスキルの向上に合わせて、ポートフォリオも定期的に更新していきましょう。
ReactやNext.jsなどのスキルを向上させるには、何度も手を動かして実践し、テストすることが大切です。
他にも、メンターをつけることが成長に繋がります。
ReactやNext.jsに興味を持った方は、まずは個別説明会に申し込んでみてください。
現役エンジニアが、お悩みをヒアリングし、あなたに合った具体的なアクションプランをご提示いたします。
ReactやNext.js、Webアプリ開発に興味のある方は、お気軽にお申し込みください！
お話しできることを楽しみにしております😄
