Next.jsをゼロからマスターする Part 2

2024年10月23日2024年10月28日

この講座では、Next.jsを触ったことがない人でも、実際に手を動かしながらNext.jsを学ぶことで、Next.jsの魅力を実感し、ウェブ開発の新たなステージへ進むお手伝いができれば嬉しいです。

今回は、Node.jsインストールと、Next.jsのプロジェクト作成について説明していきます。

OSの歴史: Unix / Apple / Windows

Unixシステムとディレクトリ

1969年にAT&Tベル研究所で開発されたUnixは、多くの現代OSの基礎となりました。
Unixは階層的なファイルシステムを導入し、「ディレクトリ」という概念を確立しました。
この構造により、ファイルとフォルダを効率的に整理・管理することが可能になりました。

AppleのOS

1984年、AppleはMacintoshと共に独自のGUIベースOSを導入しました。
2001年にmacOS（当初はMac OS X）をリリース。これはUnix系のDarwinカーネルを基にしています。
iOSは2007年にiPhoneと共に登場し、モバイルデバイス向けOSの革新をもたらしました。

MS-DOSとWindows

MS-DOSは1981年にIBM PCで導入され、コマンドライン主体のOSでした。
1985年にWindows 1.0がリリースされ、GUIを採用しましたが、MS-DOS上で動作していました。
Windows 95（1995年）から、独立したOSとしての地位を確立し、「フォルダ」という用語を普及させました。
現在のWindowsは、NTカーネルを基にした完全な32ビット/64ビットOSとなっています。

これらOSの発展により、ユーザーインターフェースやファイル管理の概念が大きく進化し、現代のコンピューティング環境が形成されました。

ディレクトリとフォルダについて

ディレクトリ (Directory)：主にUNIXやLinuxなどのオペレーティングシステムで使用される用語です。ファイルシステムの階層構造を表し、ファイルやサブディレクトリを含むことができます。

フォルダ (Folder)：Windowsなどのグラフィカルユーザーインターフェース（GUI）環境で一般的に使用される用語です。ディレクトリと同じ概念を表しますが、より視覚的なメタファーとして導入されました。

実質的には、ディレクトリとフォルダは同じものを指します。
両者の違いは主に以下の点にあります。

使用環境：ディレクトリはコマンドライン環境で、フォルダはGUI環境で多く使用されます。
歴史的背景：ディレクトリは古くからあるUNIXシステムの用語で、フォルダはデスクトップメタファーと共に登場した比較的新しい用語です。
視覚的表現：フォルダはアイコンなどで視覚的に表現されることが多いですが、ディレクトリは主にテキストベースで扱われます。

現代のコンピューティングでは、これらの用語は互換的に使用されることが多く、特にクロスプラットフォーム環境では両方の用語が混在して使われることがあります。

ターミナルソフトウェアの歴史と種類

Unixのターミナルソフトウェア

Unixシステムでは、初期からターミナルエミュレータが重要な役割を果たしてきました。

xterm： X Window Systemの標準ターミナルエミュレータとして1984年に登場し、現在も広く使用されています。
GNOME Terminal： GNOMEデスクトップ環境の一部として開発され、使いやすさと機能性を兼ね備えています。
Konsole：KDEデスクトップ環境用に開発されたターミナルエミュレータで、高度なカスタマイズが可能です。

MS-DOS系のターミナル

MS-DOSやWindows環境では、コマンドプロンプトが主要なターミナルインターフェースでした。

コマンドプロンプト (cmd.exe)：Windows NT以降のWindowsシステムで使用される標準的なコマンドラインインターフェース。
PowerShell：Microsoftが開発した高度なタスク自動化とシステム管理のためのシェル。

シェル

シェルは、ユーザーとオペレーティングシステムの間のインターフェースとして機能します。以下は代表的なシェルです。

bash (Bourne Again Shell)：1989年にリリースされ、多くのUnixシステムで標準シェルとなっています。
zsh (Z Shell)：bashの拡張版として1990年に登場し、高度なカスタマイズと機能拡張が可能です。
fish (Friendly Interactive Shell)：2005年に登場した比較的新しいシェルで、ユーザーフレンドリーな機能を多く備えています。

これらのターミナルソフトウェアとシェルは、コマンドライン操作の効率と快適さを向上させ、システム管理やプログラミングにおいて重要な役割を果たしています。
選択は個人の好みや作業内容によって異なりますが、多くの開発者が複数のツールを使い分けています。

ターミナルの基本的な使い方

pwdコマンドを追加します。
以下、6つの基本的なターミナルコマンドとその例です。

1. pwd (Print Working Directory)：現在のディレクトリのパスを表示します。

例: pwd

2. ls (List)：ディレクトリの内容を表示します。

例: ls または ls -l (詳細表示)

3. cd (Change Directory)：ディレクトリを移動します。

例:cd Documents(Documentディレクトリへ移動)　cd ..(親ディレクトリへ移動),cd -(直前のディレクトリへ移動),cd ~(ホームディレクトリへ移動)

4. mkdir (Make Directory)：新しいディレクトリを作成します。

例: mkdir new_folder

5. touch：新しいファイルを作成します。

例: touch newfile.txt

6. rm (Remove)：ファイルやディレクトリを削除します。

例: rm file.txt または rm -r folder (ディレクトリを削除)

これらのコマンドは、プロジェクト作成やファイル管理の基本となります。
特に、pwdコマンドは現在の作業ディレクトリを確認するのに役立ちます。

Macでは「ターミナル」、Windowsでは「Windows PowerShellまたはWindows Terminal」を立ち上げてディレクトリ(フォルダ)を作成して、その作成したフォルダに移動します。

1.現在のディレクトリのパスを pwd コマンドで確認します。
念のため、 ls コマンドでどのようなディレクトリの内容も確認します。

pwd
ls

2.lec という名前でレクチャー用のディレクトリを mkdirコマンドで作成し、 lec ディレクトリが作成されているかどうかを ls コマンドで確認します。

mkdir lec
ls

3.lec ディレクトリへ cd コマンドで移動し、移動できたかどうかを pwd コマンドでパスを確認してチェックします。

cd lec
pwd

エラーが出た場合は、エラーメッセージを読むことが重要です。

Node.jsのインストール

Node.jsを使ってNext.jsの開発環境を構築する手順です。

1. Node.jsのインストール：公式サイト（https://nodejs.org/）からNode.jsをダウンロードし、インストールします。LTS（Long Term Support）版を選択することをおすすめします。

2.インストールの確認：インストールが完了したら、以下のコマンドをターミナルで実行してNode.jsとnpmのバージョンを確認します。

node –version
npm –version

これらのコマンドが正常に実行され、バージョン番号が表示されれば、Node.jsが正しくインストールされています。

ChromeOSからのインストール方法は、「ChromebookでのNode.js開発環境のセットアップ」を確認してください。

Windowsのnpxコマンドのインストール

Windowsでnpxコマンドをインストールするには、以下の手順を実行してください。

Node.jsがインストールされると、自動的にnpm（Node Package Manager）がインストールされます。
ターミナルを開いて、次のコマンドを実行します。

npm i -g npx

npxが正しくインストールされたか確認するには、次のコマンドを実行します。

npx –version

Next.jsのプロジェクト作成

Next.jsのプロジェクト作成の手順を説明します。

1.コマンドラインツール（ターミナルやコマンドプロンプト）を開きます。
2.プロジェクトを作成したいディレクトリに移動します。
3.以下のコマンドを実行して、新しいNext.jsプロジェクトを作成します。

npx create-next-app@latest my-next-app
(“my-next-app”は、あなたのプロジェクト名です。好きな名前に変更できます。)

4.プロジェクト作成中に表示される設定オプションに答えます。
TypeScriptを使用するかどうかなど、いくつかの質問があります。

※注意：Next.jsのバージョン14.2.12を使用して、プロジェクトを作成した場合の事例です。バージョンが異なると、これらのステップが異なる場合があります。

ステップ	回答例 (デフォルト)	コメント
Need to install the following packages: create-next-app@14.2.12 Ok to proceed? (y) 以下のパッケージをインストールする必要があります： create-next-app@14.2.12 続行しますか？ (y)	Returnボタン	インストールを開始するための確認です。
?Would you like to use TypeScript?› No / Yes TypeScriptを使用しますか？	Yesを選択	Yes: TypeScriptを使用すると、型安全性が向上し、開発効率が上がります。 No: JavaScriptを使用します。柔軟性は高いですが、大規模プロジェクトでは型の管理が難しくなる可能性があります。感想: TypeScriptを使うことで、コンパイル時にコードのエラーを検出できます。バグを早期に発見できます。型情報が明示されることで、コードの意図が明確になり、他の開発者が理解しやすくなります。型情報があることで、テキストエディタの補完機能やリファクタリング機能が向上し、開発効率が上がります。
?Would you like to use ESLint?› No / Yes ESLintを使用しますか？	Yesを選択	Yes: ESLintを使用すると、コードの品質を保ち、一貫性を維持できます。 No: コード品質の自動チェックが行われませんが、設定の手間が省けます。感想: ESListを設定することで、コードの書き方に規則を持たせることができます。例えば、「長い行を分割する」「コンポーネントの命名規則」、「インデントのスペース数」「セミコロンの有無」「クォートの種類（シングルクォートかダブルクォートか）」など
? Would you like to use Tailwind CSS? › No / Yes Tailwind CSSを使用しますか？	Yesを選択	Yes: Tailwind CSSを使用すると、迅速かつ効率的にスタイリングを行えます。 No: 従来のCSSアプローチを使用します。より細かいカスタマイズが可能ですが、開発速度が遅くなる可能性があります。感想: CSSを直接書くのが得意ならTailwindCSSを使わない。複雑な装飾をしたいなら、TailwindCSSよりCSSがおすすめです。個人的にはTailwindCSSが好きです。
?Would you like to usesrc/directory?› No / Yes src/ディレクトリを使用しますか？	Noを選択	No: src/ディレクトリを使用しないことで、プロジェクト構造がシンプルになります。 Yes: src/ディレクトリを使用すると、ソースコードを他のファイルと明確に分離できます。感想: srcを使うか使わないかは、参加するプロジェクトによってどちらでも良い。個人的にはsrcを使わないです。あまり気にしない。
?Would you like to use App Router? (recommended)› No / Yes App Routerを使用しますか？（推奨）	Yesを選択	Yes: App Routerを使用すると、より柔軟でパフォーマンスの高いルーティングが可能になります。 No: 従来のPages Routerを使用します。シンプルですが、App Routerほど機能が豊富ではありません。感想: App RouterはNext.js 13から採用されました。Next.jsでは、もともとPages Routerが使われていました。App RouterとPages Routerは、どちらもファイルベースルーティングに関するものです。Next.js 14ではApp Routerが推奨されています。それぞれ書き方が違うので、Webで事例を検索する場合は、間違わないように注意が必要です。
?Would you like to customize the default import alias (@/)?› No / Yes デフォルトのインポートエイリアス（@/）をカスタマイズしますか？	Noを選択	No: デフォルトのインポートエイリアスを使用することで、標準的な設定を維持できます。 Yes: カスタムエイリアスを設定することで、より柔軟なインポート構造を作成できます。感想: プロジェクト内でインポートするファイルのパスを省略するときに@/を使います。あまり気にしない。

5.プロジェクトの作成が完了したら、以下のコマンドでプロジェクトディレクトリに移動します。

cd my-next-app

6.最後に、以下のコマンドでNext.jsの開発サーバーを起動します。

npm run dev

これで、ブラウザで「http://localhost:3000」にアクセスすると、新しく作成したNext.jsアプリケーションが表示されます。

Node.jsのnpm（Node Package Manager）について

npmは、Node.jsのパッケージ管理システムです。以下がその主な特徴と機能です。

パッケージの管理：JavaScriptライブラリやツールをインストール、更新、削除できます。
依存関係の解決：プロジェクトに必要なパッケージとその依存関係を自動的に管理します。
スクリプト実行：package.jsonファイルに定義されたスクリプトを実行できます。
バージョン管理：パッケージのバージョンを指定し、互換性を維持できます。

npmは、Node.jsのインストール時に自動的に含まれており、コマンドラインから簡単に使用できます。

npmのグローバルインストール

npmを使用してパッケージをグローバルにインストールする方法と、その特徴について説明します。

グローバルインストールとは： パッケージをシステム全体で利用可能にするインストール方法です。
コマンド： npm install -g パッケージ名を使用します。
インストール先ディレクトリ：

Windowsの場合：C:\\Users\\ユーザー名\\AppData\\Roaming\\npm\\node_modules
macOSの場合：/usr/local/lib/node_modules
または /opt/homebrew/lib/node_modules (Homebrewでインストールした場合)
Linuxの場合：/usr/local/lib/node_modules または /home/ユーザー名/.npm-global/lib/node_modules

利点： コマンドラインツールやグローバルに使用したいパッケージに適しています。
注意点： プロジェクト固有の依存関係には通常、ローカルインストールを使用します。

グローバルインストールは便利ですが、プロジェクトの移植性や版数管理の観点から、可能な限りローカルインストールを優先することが推奨されます。また、グローバルインストールのディレクトリは、Node.jsのインストール方法やシステム設定によって異なる場合があります。

npxコマンドについて

npx（Node Package Execute）は、Node.jsに付属するコマンドラインツールで、npm（Node Package Manager）パッケージを簡単に実行できるようにします。

主な特徴と使用方法は以下の通りです。

一時的なパッケージ実行： パッケージをグローバルにインストールせずに、一時的に実行できます。
最新バージョンの使用： 常に最新バージョンのパッケージを使用できます。
ローカルパッケージの実行： プロジェクト内のローカルにインストールされたパッケージを簡単に実行できます。
バージョン指定： 特定のバージョンのパッケージを実行できます。

npxの使用例：
npx create-react-app my-app
npx cowsay “Hello, World!“
npx -p @angular/cli ng new my-angular-app

npxは特に、CLIツールの一時的な実行や、プロジェクト初期化スクリプトの実行に便利です。
Node.js開発において、パッケージの柔軟な実行を可能にする強力なツールです。

いかがでしたでしょうか？今回は、Node.jsのインストールからNext.jsのプロジェクト作成まで、一連の流れを体験しました。
Node.jsをインストールすることで、JavaScriptをサーバーサイドで実行できる環境が整いました。
そして、Next.jsのプロジェクトを作成することで、モダンなウェブアプリケーションの開発に必要な基盤ができました。

次回は、Visual Studio Code（VSCode）をインストールします。
VSCodeは、プログラミングに非常に便利なエディタで、さまざまな拡張機能を活用することで、開発効率を大幅に向上させることができます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！