【Ubuntu】Node.jsの設定からサンプルプロジェクト作成

※本サイトにはプロモーション・広告が含まれています。

(最終更新日:2023年8月)

✔当記事は以下のような方に向けて書かれています

「Ubuntu上でNode.jsを利用し始めたけれど、効果的な使い方がわからない」
「初心者にもわかりやすいNode.jsの導入方法や基本的な操作を知りたい」
「Node.jsに関する実用的な例やテクニックを見てみたい」

✔当記事で伝える内容

  • Ubuntu上でのNode.jsのインストール方法
  • Node.jsの基本操作とその活用法
  • Node.jsを使った実践的な例

当記事では、Ubuntu環境でのNode.jsの導入や基本操作に加えて、実際のシーンに応用可能な例まで、初心者にもわかりやすく詳細に解説していきます。

ぜひ最後までご覧ください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

Ubuntuの準備

ここでは、Ubuntuの準備についてお伝えします。

まずは環境構築からご覧ください。

  • Ubuntuのインストール方法
  • 必要なアップデートの確認とインストール
  • ターミナルの使い方の簡単な説明

Ubuntuのインストール方法

Ubuntuのインストールは、以下のような方法でおこなえます。

  • 公式ウェブサイトからISOファイルをダウンロードしてUSBメモリに書き込む
  • VirtualBoxなどの仮想環境にインストールする

インストールが完了すると、パソコンが再起動し、Ubuntuのデスクトップが表示されます。

必要なアップデートの確認とインストール

新しくUbuntuをインストールしたあとは、必要なアップデートを確認してください。

Ubuntuでは、頻繁に新しいPackageが用意され、セキュリティ面などの観点でアップデートを推奨します。

ターミナルで以下のコマンドを入力します。

sudo apt-get update

パスワードを入力すれば、システムが最新のパッケージリストをダウンロードします。

続けて以下を実行し、アップデート可能なパッケージがすべてアップデートされます。

sudo apt-get upgrade

実行すると、アップデートして良いかを聞かれます。

問題なければ「y」を押して、先へ進めてください。

ターミナルの使い方

Ubuntuのターミナルは、コマンドラインインターフェースを通じてシステム操作をおこなうツール

基本的なコマンドには以下のようなものがあります。

  • ls:ディレクトリの内容を表示
  • cd:ディレクトリを移動
  • touch:新しいファイルを作成
  • rm:ファイルまたはディレクトリを削除

これらのコマンドを組み合わせて、ファイルやディレクトリの操作をおこないます。

Node.jsのインストール方法

ここではNode.jsのインストール方法について見ていきましょう。

  • Node.jsとは
  • オプション1: apt-getを使用した簡単なインストール方法
  • オプション2:NodeSource PPAを使用した最新版インストール方法
  • オプション3: npackageを使用したバージョン管理付きインストール方法
  • インストール後のバージョン確認方法

Node.jsとは

Node.jsはJavaScriptをブラウザの外で実行するためのプラットフォーム。

これにより、JavaScriptを使ってサーバーサイドの開発が可能になります。

非同期I/Oとイベント駆動のモデルを採用しているため、高負荷な状況でもスケーラブルなネットワークアプリケーションを効率良く開発できます。

オプション1: apt-getを使用した簡単なインストール方法

Ubuntuのパッケージマネージャーであるapt-getを用いたインストールは簡単です。

ターミナルを開き、以下のコマンドを順に入力します。

sudo apt-get update
sudo apt-get install nodejs

この方法でインストールした場合、UbuntuのリポジトリにあるNode.jsのバージョンがインストールされます。

ただし、このバージョンは最新版とは限らず、古い可能性があります。

オプション2: NodeSource PPAを使用した最新版インストール方法

NodeSourceのPersonal Package Archive(PPA)を使用して、最新版のNode.jsをインストールする方法もあります。

以下のコマンドを順に入力します。

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

Node.js 14.xをインストールする例を示しましたが、必要に応じてバージョン番号を変更できます。

オプション3: npackageを使用したバージョン管理付きインストール方法

複数のNode.jsのバージョンを管理したい場合、nというツールを使用するのが良いでしょう。

以下のコマンドでnとNode.jsをインストールします。

sudo apt-get install -y build-essential
curl -L https://git.io/n-install | bash

この方法を用いると、n stableで最新の安定版を、n latestで最新版を、n ltsで最新のLTS版をインストールできます。

また、n [バージョン]で特定のバージョンを指定してインストールできます。

インストール後のバージョン確認方法

Node.jsをインストールした後、ターミナルでnode -vを実行すると、インストールしたNode.jsのバージョンを確認できます。

$ node -v
v16.13.2

はじめてのNode.jsプロジェクト作成

ここでは、Node.jsで初めてプロジェクトを作成する方法を説明します。

  • プロジェクトディレクトリの作成方法
  • package.jsonの作成と説明
  • 簡単なNode.jsアプリケーションの作成(Hello World)
  • アプリケーションの実行方法
  • 一般的なエラーとその対処方法

プロジェクトディレクトリの作成方法

まずはじめに、新たにプロジェクト用のディレクトリを作成します。

ターミナルで移動したいパスに移動した後、以下を入力しましょう。

mkdir [プロジェクト名]

package.jsonの作成と説明

次に、npm initを実行します。

これにより、package.jsonというファイルが作成されます。

{
  "name": "ondev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

このファイルはプロジェクトの情報(名前、バージョン、依存関係等)を記述する重要なファイルです。

簡単なNode.jsアプリケーションの作成(Hello World)

次に、簡単なNode.jsのアプリケーションを作成してみましょう。

例えば、以下のようなコードをapp.jsという名前のファイルに保存します。

console.log('Hello World');

アプリケーションの実行方法

作成したアプリケーションを実行するには、ターミナルで以下のように入力します。

node ファイル名

今回でいえば以下のとおり。

node app.js

“Hello World”という文字がターミナルに表示されるはずです。

一般的なエラーとその対処方法

Node.jsの開発中には、さまざまなエラーに遭遇することがあります。

“SyntaxError”は構文が正しくない場合に発生し、エラーメッセージで指摘された箇所の修正が必要です。

“ReferenceError”は未定義の変数を参照しようとしたときに発生し、変数のスコープや定義を確認する必要があります。

Node.jsのパッケージ管理

ここでは、Node.jsのパッケージ管理について説明します。

以下のトピックをカバーします。

  • npmとは
  • 代表的なパッケージ(Express, lodash)のインストール方法と簡単な使用例
  • パッケージのアップデートや削除方法

npmとは何か、その利用目的

npm(Node Package Manager)は、Node.jsのパッケージ(ライブラリやツールなど)を管理するためのツールです。

これにより、ほかの開発者が作成したコードを簡単にプロジェクトに組み込めます。

代表的なパッケージ(Express, lodash)のインストール方法と簡単な使用例

代表的なパッケージとしては、WebアプリケーションフレームワークのExpressや、JavaScriptのユーティリティライブラリのlodashです。

以下のようにしてインストールが可能。

npm install express
npm install lodash

その後、require('express')require('lodash')というコードを書くことで、これらのパッケージを使用可能です。

以下はexpressで簡単なアプリケーションの例になります。

const express = require('express');
const app = express();
const port = 3000;

app.get('/greeting', (req, res) => {
  res.send('Hello, World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

「node ファイル名」で実行し、ブラウザで、以下を打ち込むと画面にHello, World!が出力されます。

http://localhost:3000/greeting/

パッケージのアップデートや削除方法

パッケージのアップデートは以下のコマンドを用いておこないます。

npm update [パッケージ名]

パッケージを削除したい場合には、こちらです。

npm uninstall [パッケージ名]

開発環境の構築

ここでは、開発環境の構築方法について説明します。

  • テキストエディタの紹介
  • デバッグ方法の紹介(組み込みデバッガ、ブラウザデバッグ)
  • GitとGithubの紹介とインストール方法

テキストエディタの紹介

コードの編集にはテキストエディタが必要です。

Visual Studio Codeや、Atom、Sublime Textなどが人気の選択肢です。

これらは公式サイトからダウンロードし、Ubuntu上でインストールできます。

さまざまなプラグインをサポートしており、開発をより便利にする機能を追加できるのが特徴です。

デバッグ方法の紹介(組み込みデバッガ、ブラウザデバッグ)

デバッグはプログラミングの重要な一部です。

Node.jsには組み込みのデバッガがあり、以下を実行することで使用できます。

node inspect [ファイル名]

Google ChromeやFirefoxの開発者ツールにはJavaScriptのデバッグ機能が含まれており、ブレークポイントを設定してコードをステップ実行できます。

GitとGithubの紹介とインストール方法

Gitはバージョン管理システムで、コードの変更履歴を管理するもの。

Githubは、Gitのリポジトリをホスティングするサービスで、コードのバックアップや共同開発でとても便利。

sudo apt-get install git

インストール後、Githubのアカウントを作成し、SSHキーを設定すれば、リモートリポジトリとしてGithubを利用できます。

Gitについてはこちらでも詳しく解説しています。

Gitの基本まとめ|初心者でも必ずマスターできる
Git/GitHubについて学びたいですか?当サイトでは、現役エンジニアが実体験を元にGitのポイントを丁寧に解説。実際のコマンドなど手を動かしながら学べるので、Git初心者必見です。

まとめ

当記事でご説明したこと。

  • Ubuntuのインストール
  • Node.jsのインストール
  • Node.jsを使ったサンプルプロジェクトの作成
  • パッケージ管理
  • 開発環境の構築

これらの手順を踏むことで、Node.jsの開発環境が整います。

具体的なアプリケーションの開発も可能です。

これらの知識を活かして、自分自身のプロジェクトを実現してみてください。

Node.jsを使った開発を続けて、自分自身のスキルを高めていきましょう。

これまで学んだ知識が、あなたの開発ライフを豊かで充実したものにしてくれることを期待しています。

タイトルとURLをコピーしました