Hello! Uchii.code
バナー画像

【Next.js】未経験からフロントエンドエンジニアになる方法 #9

2023-09-06に公開

バナー画像

まえがき

ここまでお読みいただきありがとうございます。今回の#9ではNext.jsの学習方法と基礎的な部分についてまとめます。前回のReactも含めここまでくるとフロントエンドエンジニアとしての技量がついてきてる頃かと思います。もしわからないことがあっても、自分で検索する力公式ドキュメントを読み解く力、こういった力がついてきているのではないでしょうか。

Next.jsはReactのフレームワークになります。Reactをさらに便利にし、用途に合わせて特化させたもの、というイメージでしょうか。改めて一度で理解する必要はないので、繰り返し学習していきましょう。

1.Next.jsとは何か?

Next.jsの画像

1-1.JavaScriptベースのReactフレームワーク

Next.jsは、JavaScriptを使用してWebアプリケーションを開発するためのフレームワークであり、Reactと統合されています。これにより、Reactのコンポーネントを活用しながら、より高度なWebアプリケーションを構築することが可能となります。Reactは、モダンで再利用可能なUIコンポーネントを作成するための強力なツールであり、Next.jsはこれをさらに強化しています。

1-2.サーバーサイドレンダリング(SSR)のサポート

Next.jsは、サーバーサイドレンダリング(SSR)をサポートすることで、初期表示の高速化やSEO向上を実現します。サーバーサイドレンダリングにより、ページの初回読み込み時にサーバーでコンテンツを生成し、クライアントに返すことができます。これにより、ユーザーエクスペリエンスが向上し、検索エンジンでのランキング向上も期待できます。

1-3.ルーティングの簡素化

Next.jsは、ルーティングを簡単に管理できる仕組みを提供します。ファイルベースのルーティングや動的ルーティングなど、多彩なルーティングオプションを利用できます。これにより、ページ間のナビゲーションをスムーズに実現できます。Reactではルーティングを自分で構築しなければならず、少し面倒な部分があるが、Next.jsはファイル構造でこれを解決してくれる

  • Next.jsはReactのフレームワーク
  • サーバーサイドでレンダリングするため、ユーザーのPCスペックに依存せず、表示速度がとにかく速い
  • Reactに比べて、ルーティング設計が容易

2.Next.jsの基本的な使い方

2-1.プロジェクトのセットアップ

Next.jsプロジェクトを始めるには、まずNode.jsをインストールしておく必要があります。Node.jsがインストールされていることを確認したら、以下のコマンドを実行してNext.jsプロジェクトをセットアップします。このコマンドは新しいNext.jsプロジェクトを作成し、必要な依存関係をインストールします。my-nextjs-appの部分はプロジェクトの名前で、任意に変更できます

npx create-next-app my-nextjs-app

2-2.ページの作成

Next.jsでは、ページごとにファイルを作成します。例えば、pagesディレクトリ内にindex.jsを作成すると、トップページができます。ルーティングはファイル名とディレクトリ構造に基づいて自動的に処理されます

// pages/index.js
import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>Next.jsの基本的な使い方</h1>
      <p>これはNext.jsのトップページです。</p>
    </div>
  );
}

export default HomePage;

2-3.ローカル開発サーバーの起動

開発中にプロジェクトをローカルで実行するには、次のコマンドを使用します。

これにより、Next.jsの開発サーバーが起動し、プロジェクトがブラウザで確認できます。コードの変更はリアルタイムで反映され、ホットリローディングにより開発プロセスがスムーズに進行します。これで、Next.jsの基本的な使い方を理解し、プロジェクトのセットアップからページの作成、開発サーバーの起動までが実現できます。

npm run dev

3.学習方法について

3-1.おすすめの学習方法

Next.jsの学習方法としておすすめの手順を紹介します。


まずは動画で基礎の部分と概念を学習しましょう。
①YoutubeのShin Codeさんの【初めてのNext.js入門!簡単なアプリ実装でNext.jsを基礎から学んでみよう】という動画がおすすめです。

②次に書籍をお勧めします。なぜこのタイミング書籍を用いるのか。それは、説明が飛ばされるということが少ないからです。動画教材だと肝心な部分が省かれて、理解が止まってしまうことがありますが、書籍はその悩みをカバーしてくれます。以下の書籍がお勧めです。

ここまで進めていただくと、Next.jsの概念、基本的な使い方を理解できます。あとは、ひたすら手を動かしアウトプットするのみです。毎度お馴染みの
Udemyで学習しましょう

プログラミング言語の人気オンラインコース

おすすめの講座を以下にまとめてみました。

まとめ

ここまで未経験からフロントエンドエンジニアになる方法としてロードマップ形式で紹介してきました。タイトルを追いかけるだけでも大体の学習の流れは掴めたかと思います。自分なりに試行錯誤し繰り返し学習していきましょう。改めて、学習する上でもポイントをまとめて終わりにしたいと思います。特に3番目は重要です。自分の中でキーとなる学習教材を3つくらい用意しましょう。それ以上は必要ないです。それらを繰り返し使用し基礎を抑えましょう。

  • わからないところはとにかくググる
  • 公式ドキュメント、英語の記事も翻訳して頑張って読む
  • 少ない学習教材を繰り返し利用する

G e t i n T o u c h