開発環境とは — エディタ・ターミナル・実行環境

この記事は、開発環境を扱います。

開発環境は、エディタ・ターミナル・実行環境という 3 つのソフトウェアをまとめた呼び方です。

この 3 つを 1 つの画面にまとめたものが統合開発環境（IDE。Integrated Development Environment）で、代表的なものに Visual Studio Code・IntelliJ IDEA・Xcode があります。

• エディタ・ターミナル・実行環境の 3 つが、それぞれ何をするか
• ターミナルの名前が OS ごとに違うことと、画面の読み方
• 打ち込んだ 1 行をシェルがどう読み取り、どのファイルを探すか
• 渡された app.js を、実行環境が上から 1 行ずつ実行するまで

開発環境とは — エディタ・ターミナル・実行環境の 3 つ

開発環境（development environment。ソースコードを書き、コマンドで指示して動かすためのソフトウェアの組み合わせ）は、3 つをまとめた呼び方で、そういう名前のソフトウェアが 1 つあるわけではありません。

上の枠の 3 つは一度インストールすれば使い回せます。

毎回新しく作るのは、下の枠の my-app のようなフォルダだけです。

エディタは文字を書くだけの画面ではなく、ファイルの一覧もターミナルも同じ画面に並べて出せます。

手順書の「コードエディタ」「IDE」も、同じものと考えてかまいません。

3 つのソフトウェアは、1 台のパソコンの中でつながって動きます。

囲みの全体が 1 台のパソコンで、3 つはその中で役割を分けています。

エディタが作るのはファイルまでで、動かすのは実行環境です。

ターミナルは、その実行環境に「このファイルを実行して」と伝える入り口で、結果が出るのも同じターミナルです。

開発環境は 3 つのソフトウェアのまとまり

開発環境とは、書く・打ち込む・動かす、の 3 つを合わせた呼び方です。

書くのがエディタ、打ち込むのがターミナル、動かすのが実行環境で、この 3 つは一度インストールすれば次のアプリでも使い回せます。

ターミナル — Mac は「ターミナル」、Windows は「コマンドプロンプト」

ターミナル（terminal。コマンドを文字で打ち込み、結果を文字で受け取る画面のソフトウェア）は、OS に最初からインストールされています。

ただし、名前が OS ごとに違います。

名前は違っても、見え方はどれも同じです。

文字だけが並ぶ画面に 1 行打ち込み、Enter を押すと、すぐ下の行に結果が出ます。

実際の画面は、次のように行頭の記号の右へ 1 行打ち込み、その下に結果が返る形です。

pwd は今いるフォルダの場所を、ls はそのフォルダの中にあるものを返します。

$ pwd
/home/you/my-app

$ ls
app.js  package.json

ターミナルは、文字を打ち込んで結果を映すための画面です。

打ち込んだ 1 行を実際に読み取り、どのプログラムを動かすかを決めているのは、その画面の中で動くシェル（shell。打ち込まれた 1 行を読み取り、先頭の名前のプログラムを探して起動するプログラム）です。

手順書に出てくる bash や zsh は、このシェルの名前です。

シェルは、打ち込んだ 1 行を先頭と後ろの 2 つに分けて扱います。

シェルは先頭の node でプログラムを探し、後ろの app.js をそのプログラムに渡します。

このとき app.js を探すのは、シェルが今開いているフォルダの中だけで、これをカレントディレクトリ（current directory。シェルが今開いているフォルダ）といいます。

行頭のプロンプト（prompt。入力を受け付けていることを示す記号）の手前に、その名前が出ることが多くあります。

同じ node app.js でも、今いるフォルダが違うと結果が変わります。

app.js は my-app の中に置いてあります。

手順書がコマンドの前に cd を置くのは、この探す場所を変えるためです。

cd の後ろに移動先を書くと、そのあとの 1 行は移動した先のフォルダで動きます。

$ cd my-app

$ pwd
/home/you/my-app

打ち込む 1 行は、先頭に何を書いたかで起きることが決まります。

ここまでの内容は、手順書に出てくるコマンドを読むための最低限です。

もっと深く学びたい場合は、Linux 入門講座 で、ブラウザのターミナルにコマンドを打ちながら進む演習ができます。

パスとディレクトリ移動 から始めると、この記事の cd の話がそのまま続きます。

打ち込んだ 1 行を読むのはシェル

打ち込んだ 1 行を読むのは、画面ではなく中で動くシェルです。

うまくいかないときは、command not found なら先頭の名前が見つかっていない、Cannot find module なら後ろのファイルが今いるフォルダに無い、と分けて読みます。

実行環境 — app.js の中身を上から順に実行する

シェルから app.js を渡された実行環境は、その中身を上から 1 行ずつ読み、書いてある順番で実行します。

次の 3 行を node app.js で動かすと、画面には 2 行だけが出ます。

console.log("こんにちは");
const price = 1200;
console.log(price + " 円");

画面に出るのは、表示を指示した行の分だけです。

実行環境は上から 1 行ずつ読むだけ

実行環境がしていることは、app.js を上から 1 行ずつ読んで、書いてあるとおりにするだけです。

表示を指示した行だけが画面に文字を出し、読むのはシェルから渡された app.js だけです。