Node.jsをインストールしてみよう

本チャプターではNext.jsで実際にコードを書いていく上で必要な環境構築を一緒に行なっていきます。 まずはNext.jsのベースとなるNode.jsをインストールします。その前にNode.jsとは何か簡単におさらいしておきましょう。
Node.jsとは従来Webブラウザなどクライアント側で動作していたJavaScriptを、サーバー側でも動作できるようにするためのプラットフォームです。
昨今ではNode.jsを利用したWeb開発・アプリ開発などが盛んになっており、その中の一つがNext.jsです。
簡単におさらいしたところで実際に開発環境を行なっていきしょう。

Windows,Macにインストールする

では実際に一般的なOSであるWindows, MacにNode.jsをインストールする方法について見ていきましょう。
ここではインストーラを使った方法について説明していきます。
まずNode.jsの公式サイトで提供されているインストーラをダウンロードしていきます。

WEBページにアクセスしたらLTSタブの自分の使っているOSに合ったインストーラを
クリックしてダウンロードしてください。この時ダウンロードしたバージョンを覚えておくと動作確認で便利です。 インストーラのダウンロードが終わったらあとは実行するだけです。セットアップウィンドウが開きますので画面の指示に従って
クリックしていくとインストールは完了します。

正常にインストールできているか確認

Node.jsのインストールが終了したらバージョン確認コマンドを使用して正常にインストールできているか確認していきます。
windowsであればコマンドプロンプト、MacであればターミナルのことをCLIと言います。CLIを用いて以下のコマンドをタイプしていきます。

上記コマンドを実行してダウンロードしたNode.jsのバージョンが表示されれば問題なくインストールされています。

例

$ node --version
18.12.1

また後述で解説しますが、Node.jsをインストールすると一緒にnpmというものもインストールされますのでこちらも確認しておきましょう。

例

$ npm --version
8.19.2

ここまでくればNode.jsのインストールは完了になります。お疲れ様でした。

パッケージ管理マネージャ「npm」について

「npm」とは、「Node Package Manager」の略称で、略称からも解るように、Node.jsのパッケージ（Package ）を管理する（Manager）ツールです。
パッケージとは予め用意された便利な機能をひとまとめにしたもので、 代表的なものでいえばWebアプリケーション開発で利用できるMVCフレームワークのExpress等です。 基本的にこの「npm」コマンドを使用してNext.jsのインストール等を行なっていきます。 次章では実際にコードを書いていく上で使用するVSCodeをインストールしていきましょう。

Visual Stdio Codeをインストールしよう

VSCodeとは、正式にはVisual Studio Codeといい、Microsoft社の提供する無償のコードエディタです。 コードエディタとは、ソースコードの編集を主な目的としたテキストエディタです。 本レッスンでは、こちらのエディタを使用して解説していきますのでインストールしていきましょう。

Windows,Macにインストールする

ではこちらもWindows, Macにインストールする方法について見ていきましょう。
まずVSCodeの公式サイトで提供されているインストーラをダウンロードしていきます。

WEBページにアクセスしたら自分の使っているOSに合ったインストーラを
クリックしてダウンロードしてください。 インストーラのダウンロードが終わったらあとは実行するだけです。セットアップウィンドウが開きますので画面の指示に従って
クリックしていくとインストールは完了します。

VSCode:拡張機能の導入

VSCodeはそのままでも便利なのですが、拡張機能を導入することによってより便利で使いやすくなります。 ここではVSCodeを使用するにあたって導入しておくと便利な拡張機能をいくつかご紹介します。 インストールはリンクをクリックしてinstallボタンを押すと自動でVSCodeが起動してインストールできます。

1.Japanese Language Pack for Visual Studio Code

VSCodeのインストール直後の言語は英語です。こちらの拡張機能はその英語表記を日本後表記に変更する拡張機能になります。こちらは日本語で開発する上で必須の拡張機能になりますので導入をお勧めします。

2.Prettier - Code formatter

こちらの拡張機能は代表的なJavaScript・TypeScriptのコードフォーマッター拡張機能です。こちらの拡張機能では「改行」や「半角空ける」といったルールを自分の好みに合わせて定義することができます。またコードの変更を上書き保存するたびに自動でフォーマットを適用するように設定することも可能です。

3.ES7+ React/Redux/React-Native snippets

こちらの拡張機能はReactでよく使うコードのまとまりをすぐに呼び出せるようになる拡張機能です。

機能の一部

ここにあげた拡張機能はごく一部です。 他にも文字の色を変更したり、見た目を変えたりする拡張機能があります。 まだまだ便利な拡張機能はたくさんありますので自分好みに自由にカスタマイズしてみてください。
これで環境構築の解説を終わりますがうまくできましたでしょうか？
次のチャプターでは実際に本チャプターで軽く触れた「npm」コマンド等を使用してNext.jsがインストールされたプロジェクトを作成し、 Hello Worldという文字を表示するプログラムをNext.js(React)で実装していきます。

Next.jsプロジェクトを作成してみよう

本チャプターからNext.jsの基礎知識を実際に手を動かしながら学んでいきます。
まずはNext.jsがインストールされたプロジェクトの作成を行なっていきます。 CLIを用いて作業用ディレクトリで下記のコマンドを実行してください。 sample-appはプロジェクト名です。こちらは任意の名前で構いません。

$ npx create-next-app sample-app

上記を実行してSuccess! Created sample-app at プロジェクトのパスが表示されればプロジェクトの作成は完了です。

? Would you like to use TypeScript with this project? … No / Yes ? Would you like to use ESLint with this project? … No / Yes
バージョンによって上記のように聞かれる場合がありますが、どちらともYesで問題ないです。1つ目の質問はプロジェクトでTypeScript(Javascriptの上位版)を使用するかどうか、
2つ目の質問はESLint(コードを整形してくれる)を使用するかどうかの質問です。
TypeScriptとESLintの使用方法についてはこちらの講座では説明を省かせていただきますのでご興味のある方はご自身で調べてみてください。

アプリを立ち上げる

無事プロジェクトの作成がうまくいったらビルドして開発用サーバを起動してみましょう。 cd sample-appで作成したプロジェクトのディレクトリに移動します。 移動できたらnpm run devで開発用サーバを起動できます。
http://localhost:3000/にアクセスして下記の様な画面が表示されればサーバの起動は成功です。

ディレクトリ構成を見てみる

create-next-app で作成した直後のディレクトリ構成を簡単に解説すると以下の様になります。

Web サイトのトップページを表示するファイルは、pages/index.tsxです。Next.js の開発サーバーを起動した状態で、このファイルの内容を書き換えると、自動的に Web ブラウザがリロードされます。 (Fast Refresh) Fast Refresh機能については次章で解説します。
ディレクトリの中身を見てみればお分かりいただけると思いますが特徴的なのは、HTMLファイルが存在しないということです。 Next.js ではこのようにコードの主体は JavaScript ファイルです。 原則HTMLはJavaScriptのコード上で生成する様に記述し、レンダリングにてHTMLを生成し表示します。 少し難しい考え方ですが、今はNext.jsではHTMLファイルは使用しない程度での理解で問題ありません。 上記のことを踏まえてHello Worldを表示させるプログラムを作成していきます。

Hello Worldを表示させよう

それでは実際にindex.tsxを編集してHelloWorldを表示させていきましょう。

index.tsx

const Hello = () => {
  return (
    <h1>Hello World</h1>
  )
}
                    
export default Hello

npm run devを実行していればindex.tsxを更新するとブラウザに自動で更新内容が反映されます。 これはNext.jsが持つFast Refreshという機能です。ページをリロードすることなく更新が即反映されるので開発者にとって効率化につながる非常に便利な機能です。 http://localhost:3000/にアクセスして下記の様な画面が表示されればHello Worldの表示は完了です。 表示するまでの簡単な流れとして、

上記のような流れでWebブラウザに表示されています。

この流れはNext.jsでは基本の動きですので是非覚えておきましょう。