【手で書いて覚える個人開発 #01】開発の準備：Mac に Node.js・VS Code・Git を入れる

この記事は、プログラミングをまったく知らない人が「AI に頼らず、自分の手でアプリやサイトを作れる」ようになるための連載（全85本）の第1回です。毎日1本ずつ公開します。

この記事でできるようになること

開発に使う3つの道具（Node.js・VS Code・Git）を Mac にそろえて、「こんにちは」と表示するプログラムを動かせるようになります。

3つの道具は何をするものか

料理にたとえると次のとおりです。

道具	たとえ	役割
VS Code	まな板と包丁	プログラムの文章（コード）を書くエディタ（文章を書くソフト）
Node.js	コンロ	JavaScript で書いたコードを、パソコンの上で実際に動かすソフト
Git	レシピの履歴ノート	書いたコードの変更を記録して、いつでも前の状態に戻せるようにする仕組み

この連載では、Node.js で JavaScript を動かし、VS Code で書き、Git で記録していきます。私が作っている音楽交流アプリ OTOMO や DTM 機材ガイド DTM PICKS も、同じ道具で作っています。

手を動かす

「コピーせず、自分で打つ」のがこの連載のルールです。打ち間違いに自分で気づく経験が、いちばんの上達になります。

1. ターミナルを開く

Mac の ターミナル（文字で命令を出すアプリ）を使います。Spotlight 検索（command + スペース）で「ターミナル」と入力して開いてください。詳しい使い方は次回（#02）で説明するので、今日は「命令を打って Enter を押すと答えが返ってくる場所」とだけ覚えれば大丈夫です。

以降、$ で始まる行は「ターミナルに打つ命令」です。$ は打たず、その後ろだけを打ちます。

2. Git を確かめる

$ git --version

バージョン（版の番号）が表示されれば、すでに使えます。表示されなかったり、「コマンドライン・デベロッパツールをインストールしますか」という画面が出たりしたら、画面の案内に従ってインストールしてください。

3. Node.js を入れる

1. ブラウザで公式サイト https://nodejs.org/ を開く
2. ダウンロードのページで LTS（長期サポート版。安定していて初心者向き）を選ぶ
3. ダウンロードしたインストーラの案内に沿って進める（次へ、次へ、で OK）

公式サイトの画面は更新されることがあります。「LTS と書かれたほう」を選ぶ、という点だけ覚えておいてください。

入れ終わったら、ターミナルを一度閉じて開き直し、確かめます。

$ node -v

v で始まる番号（例: v26.13.0）が出れば成功です。番号は人や時期によって違って大丈夫です。

4. VS Code を入れる

1. 公式サイト https://code.visualstudio.com/ を開く
2. Mac 用をダウンロードする
3. ダウンロードしたファイルを開き、VS Code を「アプリケーション」フォルダに移す
4. 「アプリケーション」から VS Code を起動する

5. Git に名前を教える

Git は「誰が変更したか」も記録します。最初に1回だけ、名前を登録します。

$ git config --global user.name "あなたの名前（英数字がおすすめ）"
$ git config --global user.email "あなたのメールアドレス"

確かめるには次を打ちます。

$ git config --global user.name

登録した名前が表示されれば OK です。

注意: ここで登録したメールアドレスは、のちに GitHub などへコードを公開したとき、変更の記録に残ることがあります。公開したくない場合は、GitHub が用意している「公開用のメールアドレス」を使う方法があります（第3段階で扱います）。

6. 「こんにちは」を表示させる

最後に、3つの道具を一緒に使います。

1. 好きな場所に my-first というフォルダを作る（Finder で作って OK）
2. VS Code で「ファイル」→「フォルダを開く」から、そのフォルダを開く
3. 新しいファイルを作り、hello.js という名前で保存する
4. 次の2行を自分で打つ

console.log("こんにちは、OTOMO");
console.log(1 + 2);

1. 保存する（command + S）
2. ターミナルで、そのフォルダまで移動して動かす

$ cd ~/Desktop/my-first
$ node hello.js

（my-first を Desktop 以外に作った場合は、cd の後ろをその場所に変えてください。）

次のように表示されたら成功です。

こんにちは、OTOMO
3

console.log(...) は「かっこの中身を画面に表示する」命令です。1 + 2 は計算されて 3 になります。

練習問題（答えを見ずに解いてみよう）

1. hello.js の1行目の「こんにちは、OTOMO」を、自分の好きな言葉に変えて動かしてみましょう。

2. practice.js というファイルを作り、次の2行を打って動かしてみましょう。

   const name = "DTM PICKS";
   console.log("サイト名: " + name);
   

   （const name = ... は「name という箱に文字を入れる」という意味です。くわしくは #10 で説明します。）

3. node -v と git --version の結果を、自分のメモに書いておきましょう（困ったときに、自分の環境を人に伝えやすくなります）。

よくあるエラーと直し方

command not found: node

zsh: command not found: node

意味: Node.js が見つからない、という意味です。

直し方: ① Node.js を入れ終わっていますか？ ② ターミナルを一度閉じて開き直しましたか？（入れる前から開いていたターミナルは、新しく入れた道具を知りません）

命令の綴りの打ち間違いでも、同じ形のエラーが出ます。たとえば nodee -v と打つと次のとおりです。

zsh: command not found: nodee

ReferenceError: namae is not defined

hello.js の中で、用意していない名前を使うと出ます。たとえば次のように書いた場合です。

console.log(namae);

実行すると、次のようなエラーが出ます（上の数行は場所の情報で、人によって違います）。

ReferenceError: namae is not defined

意味: 「namae なんて名前は知らない」という意味です。文字を表示したいときは " で囲んで console.log("namae") のようにします。箱の中身を表示したいなら、先に const namae = "..." で用意します。

Cannot find module '.../nofile.js'

Error: Cannot find module '/Users/.../nofile.js'

意味: 指定したファイルがその場所にない、という意味です。ファイル名の綴り、.js を付けたか、cd で正しいフォルダにいるか（今いる場所は pwd で確かめられます）を見直してください。

答え

答え

1. 1行目の " の中を書き換えて保存し、もう一度 node hello.js を打ちます。保存し忘れると、前の表示のままです。

2. 次のように表示されれば正解です。

   サイト名: DTM PICKS
   

3. 番号は人によって違うので、自分の画面に出た番号を書けていれば正解です。

次回予告

次回（#02 ターミナル入門：cd・ls・mkdir で迷わない）は、ターミナル入門：cd・ls・mkdir で迷わない。今日は呪文のように打った cd の意味を、文字の命令でフォルダを動けるようになるところまで、ていねいに説明します。