#1 JavaScriptで学ぶ環境構築の基本

Webページに動きをつける言語として知られるJavaScriptですが、実は近年ではWebブラウザの外、つまりパソコン上で単独のプログラムとして動かすことも一般的になっています。この記事では、パソコン上でJavaScriptを学ぶための環境構築、いわゆる「Node.js」のインストールから、動作確認、基本的な使い方、そしてつまずきやすいポイントまでを、実際に表示されがちなエラーメッセージも交えながら解説します。

ブラウザだけでもJavaScriptは動く

実はJavaScriptだけなら、特別なインストールをしなくても動かせます。パソコンに入っているWebブラウザの開発者ツール(F12キーなどで開く画面)にあるコンソールに直接コードを打ち込めば、その場で実行結果を確認できます。alert("こんにちは")のようなブラウザならではの機能もすぐ試せるので、「とりあえず動かしてみたい」という最初の一歩には向いています。

ただし、ブラウザのコンソールは1行ずつ試すのには便利ですが、複数のファイルに分けてプログラムを組んだり、後で見返せる形で保存したりするのには不向きです。本格的に学習を進めるなら、次に紹介する「Node.js」を使う方法がおすすめです。

Node.jsのインストール

Node.jsは、ブラウザの外でJavaScriptを実行できるようにするソフトウェアです。公式サイト(nodejs.org)にアクセスすると、たいてい2種類のバージョンが並んでいます。「LTS」と書かれた方が長期サポート版で、安定して動くことを優先した番号です。もう一方の最新版は新機能を試せる反面、変更が入りやすいので、学習用途では基本的にLTSを選んでおけば困りません。

インストールが終わったら、ターミナル(Windowsならコマンドプロンプトやターミナルアプリ、Macならターミナル.app)で次のコマンドを実行してバージョンを確認しましょう。

node --version

ここで v20.11.0 のような数字が表示されれば成功です。npmも一緒にインストールされているので、npm --version も併せて確認しておくと安心です。

インストール直後によく出るエラーと対処法

環境構築で一番つまずきやすいのが、実はこの最初の動作確認の段階です。実際によく見かけるエラーと、その原因・対処法をまとめます。

  • 'node' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。(Windows)
    これはNode.jsがインストールされていない、もしくはインストール直後でPATH(コマンドの居場所をOSに教える設定)がまだ反映されていない状態です。多くの場合、インストーラー実行後にターミナルを一度完全に閉じて開き直すだけで解決します。それでも直らない場合は、パソコンを再起動してみてください。
  • command not found: node(Mac/Linux)
    意味はWindowsの場合とほぼ同じで、「nodeという命令が見つからない」というエラーです。Homebrewなど別の方法でインストールした場合、シェルの設定ファイル(.zshrcなど)にパスの追記が必要なことがあります。公式サイトのインストーラーを使い直すと解決するケースも多いです。
  • npm ERR! code EACCES / permission denied(Mac/Linuxで発生しがち)
    npmで何かをグローバルにインストールしようとしたときに、権限がなくて弾かれるエラーです。あわてて sudo(管理者権限)を付けて強引に実行する人もいますが、後々トラブルの元になりやすいので、まずはnodeのインストール方法自体を見直す(後述のnvmを使うなど)のがおすすめです。
  • SyntaxError: Cannot use import statement outside a module
    最近の書き方である import 文をNode.jsでそのまま使おうとすると出るエラーです。Node.jsは初期状態だと少し古い書き方(require)を前提にしているため、importを使いたい場合は package.json に "type": "module" を追記するか、ファイルの拡張子を .mjs にする必要があります。「なぜかコピペしたコードだけ動かない」というときはこれが原因のことが多いです。
  • ReferenceError: document is not defined
    ブラウザ用のコード(画面のボタンを操作するコードなど)をそのままNode.jsで実行しようとすると出ます。documentやwindowはブラウザが用意している機能であり、Node.js単体には存在しません。逆に、ブラウザのコンソールでrequireを使おうとするとUncaught ReferenceError: require is not definedのようなエラーになります。「今どちらの環境で動かしているか」を意識するのが、このエラーを避ける一番の近道です。

ファイルを実行してみる

拡張子が.jsのファイルを用意し、次のように実行します。

node ファイル名.js

ブラウザを開かなくても、ターミナル上で直接JavaScriptのコードを動かせるのが確認できるはずです。もしError: Cannot find module 'ファイル名.js'のようなエラーが出た場合は、ターミナルの現在地(カレントディレクトリ)がファイルの保存場所とずれていることがほとんどです。cd フォルダ名で目的のフォルダに移動してから、もう一度試してみてください。

npmというパッケージ管理の仕組み

Node.jsにはnpmというパッケージ管理ツールが標準で付属しています。他の人が作った便利な機能(ライブラリ)を、npm install ライブラリ名というコマンドで簡単に取り込めます。プロジェクトごとにpackage.jsonという設定ファイルを作っておくと、使っているライブラリの一覧を管理できて便利です。

npm install を実行した際に npm ERR! code ENOENT や Could not read package.json のようなエラーが出ることもありますが、これは単純に package.json がそのフォルダにまだ存在しないというサインです。npm init -y を先に実行して土台となる設定ファイルを作っておくと解消します。

つまずきやすいポイント・よくある質問(FAQ)

Q. ブラウザとNode.js、どちらで学ぶべき?

どちらか一方を選ぶ必要はありません。目に見える動きをすぐ確認したいときはブラウザのコンソール、ファイルとして保存しながらじっくり書きたいときはNode.js、というように使い分けている人が多いです。最初のうちはブラウザで文法に慣れて、少し長いコードを書くようになったらNode.jsに移る、という流れでも問題ありません。

Q. nvmは最初から使うべき?

nvm(Node Version Manager)は、複数のバージョンのNode.jsを切り替えて使うためのツールです。便利ではありますが、学習を始めたばかりの段階では必須ではありません。まずは公式サイトからLTS版をひとつインストールして慣れることを優先し、「別のプロジェクトで違うバージョンが必要になった」というタイミングで導入を検討すれば十分です。

Q. インストールしたのに、次の日にはコマンドが使えなくなっていた

ターミナルアプリを複数種類使っている場合(標準のターミナルとVS Code内蔵のターミナルなど)、設定の反映範囲がずれてこのような状態になることがあります。焦って再インストールする前に、まずは別のターミナルアプリでも試してみると、実は片方だけの設定漏れだったというケースがよくあります。

エディタ・IDEについて

コードを書くためのエディタは何を使ってもJavaScript自体は動きますが、初めのうちは「Visual Studio Code(VS Code)」を選んでおくと、情報量が多く困ったときに調べやすいという声をよく聞きます。もちろんこれが絶対の正解というわけではなく、使いやすさは人それぞれなので、他のエディタに慣れている場合は無理に乗り換える必要はありません。

JavaScriptならではの注意点、他言語との違い

JavaScriptは元々ブラウザ専用の言語として生まれた経緯があり、Node.js環境とブラウザ環境では使える機能が一部異なります。学習中に「このコードが動かない」と感じたら、今どちらの環境で実行しているのかを確認してみてください。この「実行できる場所が2種類ある」という特徴は、他の多くのプログラミング言語とは少し毛色が違う点です。例えばPythonであれば、基本的には「Pythonをインストールしたパソコン上」という一つの場所で動かすことを前提に学習が進みますが、JavaScriptは「ブラウザ」と「Node.js」という2つの実行場所を行き来しながら学ぶことになります。どちらの言語にも一長一短があり、優劣というよりは「前提としている動作環境の数が違う」という設計上の個性だと捉えると、エラーに出会ったときにも落ち着いて対処しやすくなるはずです。

まとめ

JavaScriptの環境構築は、Node.jsをインストールするだけで完了しますが、実際にはPATHの設定漏れや、ブラウザ用コードとNode.js用コードの混同など、細かなつまずきポイントがいくつか存在します。まずはnode --versionでインストールを確認し、エラーが出たときは「今どちらの環境で動かしているか」「ファイルの場所は合っているか」を順に確認していくと、原因を切り分けやすくなります。焦らず一つずつ試していきましょう。

本ページはプロモーションを含みます。

参考書籍(PR)

JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。

コメント

コメントを投稿

このブログの人気の投稿

#11 Rustで学ぶエラーハンドリングの基本

Rustのエラーハンドリングは、他の言語のような「例外」という仕組みを持たず、`Result`という型を使った独自の考え方が中心になります。この記事では、Rustにおけるエラーハンドリングの基本を解説します。 Result型という考え方 失敗する可能性がある処理は、`Result`という「成功か失敗かを表す型」を返します。 fn divide(a: i32, b: i32) -> Result<i32, String> { if b == 0 { return Err(String::from("0では割れません")); } Ok(a / b) } 成功時は`Ok`、失敗時は`Err`という形で結果を包んで返します。 matchで結果を扱う match divide(10, 0) { Ok(result) => println!("結果: {}", result), Err(message) => println!("エラー: {}", message), } ?という便利な記号 Rustには、`Result`がエラーだった場合に、その場で関数の呼び出し元にエラーを伝えて処理を中断できる`?`という記号があります。 fn calculate() -> Result<i32, String> { let result = divide(10, 0)?; Ok(result) } Rustならではの注意点 他の言語の「エラーが起きても気づかずに進んでしまう」という問題を防ぐため、Rustは`Result`の中身を確認しない限り、警告を出す仕組みになっています。エラーの可能性を無視できない設計こそが、Rustの安全性を支えています。 まとめ Rustのエラーハンドリングは`Result`型が中心で、`match`や`?`を使って結果を扱います。エラーの可能性を無視できない設計に慣れていきましょう。 本ページはプロモーションを含みます。 参考書籍(PR) Rustをもっと学びたい方には「 実践Rust入門[言語仕様から開発手法まで] 」がおすすめです。...
続きを読む

#16 TypeScriptで学ぶ辞書型(マップ)の基本

TypeScriptの辞書に相当する仕組みは、JavaScriptと同じですが、キーと値の型をあらかじめ決めておけるのが特徴です。この記事では、TypeScriptにおける辞書の扱い方を解説します。 型付きのオブジェクト interface Person { name: string; age: number; } const person: Person = { name: "太郎", age: 20 }; キーの型が決まっていない辞書 キーの名前が事前に決まっていない辞書のような使い方をしたい場合は、次のように書きます。 const scores: { [key: string]: number } = {}; scores["太郎"] = 90; Mapを使う場合 const person = new Map<string, string>(); person.set("name", "太郎"); `Map<string, string>`のように、キーと値それぞれの型を指定できます。 TypeScriptならではの注意点 型付きのオブジェクト(`interface`)を使うと、存在しないキーにアクセスしようとした際に、実行前の段階でエラーとして教えてもらえます。データの形が決まっている場合は、キーが自由な辞書よりも`interface`を使うほうが安全です。 まとめ TypeScriptの辞書は、形が決まっているなら`interface`、自由なキーを扱うなら`{ [key: string]: 型 }`や`Map`を使います。用途に応じて型の付け方を選びましょう。 本ページはプロモーションを含みます。 参考書籍(PR) TypeScriptをもっと学びたい方には「 プロを目指す人のためのTypeScript入門 」がおすすめです。
続きを読む

#19 Goで学ぶテスト(単体テスト)の基本

Goはシンプルな文法が魅力ですが、書いたコードが正しく動くかどうかは別問題です。この記事では、Goで書いたコードを自動でチェックする「テスト」の基本を解説します。 なぜテストを書くのか コードを修正するたびに、関連する機能が壊れていないかを手作業で確認するのは大変です。テストを用意しておけば、コマンド一つで動作確認ができ、安心してコードを直せるようになります。 Go標準のテスト機能 Goには追加のライブラリを入れなくても使える testing パッケージが標準で備わっています。テスト対象のファイルと同じディレクトリに、名前の末尾が _test.go のファイルを作ります。 // add.go package main func add(a int, b int) int { return a + b } // add_test.go package main import "testing" func TestAdd(t *testing.T) { result := add(2, 3) if result != 5 { t.Errorf("add(2, 3) = %d; want 5", result) } } テスト関数の名前は Test から始める決まりです。ターミナルで go test と実行すると、 _test.go 内の Test から始まる関数がすべて自動で実行されます。 複数パターンをまとめてテストする Goでは、複数の入力パターンをスライス(配列のようなもの)にまとめて、まとめてテストする書き方(テーブル駆動テスト)がよく使われます。 func TestAddCases(t *testing.T) { cases := []struct{ a, b, want int }{ {2, 3, 5}, {0, 0, 0}, {-1, 1, 0}, } for _, c := range cases { if got := add(c.a, c.b); got != c.want { t.Errorf("add(%d,...
続きを読む