情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Node.jsで始めるプログラミング入門講座 第5回 ハローワールド 後編

2016/10/14

この記事は「Node.jsで始めるプログラミング入門講座」という連載記事の5つ目の記事です。

その他の記事に関しては下を参照してください。

実演

前回でソースコードに関する説明が概ね終わりましたので、実際に「ハローワールド」のソースコードを作成してみましょう。これは「例題」ですから、是非皆さんも一緒に試してみてください。

まず、「メモ帳」を起動してください。起動方法は皆さんに任せます。

起動したら、下に再掲した「ハローワールド」のソースコードを「メモ帳」にそのまま入力してください。

console.log('Hello, world!');

次に、これをファイルとして保存します。

「メモ帳」の「ファイル」メニューの「名前を付けて保存」をクリックしてください。

そうすると、「名前を付けて保存」というダイアログボックスが表示されます。

保存時には気を付けなければならないことが何点かあります。

まず、「ファイル名」を入力しますが、この「ファイル名」には拡張子を付けるようにします。今回はJavaScript言語で書かれたソースコードなので.jsという拡張子を付けます。

拡張子を付け忘れた場合、保存されるファイルの拡張子は.txtとなってしまいますので注意してください。拡張子が.txtのファイルを保存してしまった場合、保存されたファイルの拡張子を変更するか、ファイルの保存をやり直してください。

それから、「文字コード」を選択します。これも忘れやすいので注意してください。文字コードというのはテキストをパソコンに保存する時にどのような形式で保存するかということです。「メモ帳」の場合、デフォルトでは「ANSI」という文字コードが選択されていて、他にも幾つかの選択肢がありますが、必ず「UTF-8」を選ぶようにしてください(「ANSI」や「UTF-8」が何を表しているかは少なくとも今は詳しく知る必要はありません)。

「文字コード」を選択し忘れたか、選択を間違えた場合、ソースコードを実行した際に文字化けが発生することがあります。

文字化けとは下のような意味不明な文字列が表示される現象のことです。

このような現象が発生した場合、「文字コード」の選択が間違えている可能性があります。保存したソースコードを「メモ帳」などで開いて正しい文字コード(「UTF-8」)で保存し直すと正常な表示となるかもしれません。

「文字コード」を選択し終わった時点で「名前を付けて保存」ダイアログボックスは下のようになっているはずです。

この状態で「保存」ボタンをクリックしてファイルの保存を行います。

すると、下のようにファイルが保存されるはずです。

これで「ハローワールド」のソースコードを保存することができました。

次回以降ソースコードを掲載する場合にはソースコードの保存手順まで重ねて書くことはありません。

ソースコードの保存は今後毎回のように必要になってきますので、しっかりと手順を覚えるようにしてください。

なお、上は「メモ帳」における手順でしたが、他のテキストエディタの場合は若干手順が異なるかもしれません。「メモ帳」以外のテキストエディタを使用したい方は各自で手順を調べてください。

ハローワールドの実行

さて、「ハローワールド」のソースコードを保存することができましたが、しかし、これだけでは何も起きません。

作成したプログラム(ソースコード)がどのように動くか観察するためには作成したプログラムを実行しなければなりません(第2回で書いたように、Node.jsはインタープリタ方式の「翻訳ソフト」でありプログラミングプラットフォームでした。そのため、Node.jsではソースコードがプログラムそのものです。参考のため下に図を再掲します)。

Node.jsのプログラムを実行するにはNode.jsを起動し、Node.jsにどのプログラムを実行するのかを教えてやらなければなりません。

第3回でNode.jsが正常にインストールされているかチェックするためにコマンドプロンプトというソフトを使用しましたが、Node.jsのプログラムを実行するためにもコマンドプロンプトを使用します

第3回ではコマンドプロンプトにnode -vという命令を与えることでNode.jsのバージョンを表示させましたが、Node.jsのプログラムを実行させるためにはnode hello-world.jsのようにnodeの後にスペースを空けてからプログラムのソースコードのファイル名を与えます。

このような命令をコマンドプロンプトに与えることでNode.jsが起動し、更に、指定したファイルのソースコードが実行されます。

では、実際に「ハローワールド」を実行してみましょう。

まず第一に、コマンドプロンプトを起動しなければなりません。第3回で紹介したようにコマンドプロンプトは「ファイル名を指定して実行」から起動することもできますが、今回は別の方法を試しましょう。

まず、「エクスプローラ」で「ハローワールド」のソースコードを保存したフォルダに移動してください。

その状態で「エクスプローラ」のフォルダやファイルの一覧が表示されている部分の何もないところを「シフト」キーを押しながら右クリックしてください。

そうすると、右クリックメニューが開きます。そして、そのメニューの中に「コマンドウィンドウをここで開く」という項目があるはずですので、それをクリックします。

そうすると、お馴染みの真っ黒いコマンドプロンプトが表示されたかと思います。

そして、注目してほしいのはプロンプトに記載されているフォルダのパス(カレントワーキングフォルダのパス)です。このパスは「エクスプローラ」で表示していたフォルダのパスと同じになっているはずです。

つまり、「ハローワールド」のソースコードが保存されているフォルダのパスです。

「エクスプローラ」からコマンドプロンプトを起動すると「エクスプローラ」で表示していたフォルダがコマンドプロンプトのカレントワーキングフォルダとなります。

カレントワーキングフォルダは作業中のフォルダを表すのでした。

なので、たとえば、node hello-world.jsという命令をコマンドプロンプトで実行するとカレントワーキングフォルダのhello-world.jsというファイルに保存されているソースコードが実行されます

つまり、最初からソースコードが保存されているフォルダでコマンドプロンプトを起動すればカレントワーキングフォルダを変更する必要がなくなる訳で、この起動方法は特定のフォルダで作業しなければならない場合には便利です。

現在コマンドプロンプトは下のようになっているはずです(勿論、カレントワーキングフォルダは「ハローワールド」のソースコードをどのフォルダに保存したかによって異なるはずです)。

C:\work\prog>

この状態でnode hello-world.jsという命令を実行して「ハローワールド」を実行してみましょう。

コマンドプロンプトでnode hello-world.jsと入力して「エンター」キーを押します。

C:\work\prog>node hello-world.js
Hello, world!

上のようにHello, world!という文字列が表示されたでしょうか?

おめでとうございます。

あなたは人生初の自身で書いたプログラムの実行に成功しました。

そして、このプログラムは

  • 画面に「Hello, world!」という文字列を表示する

という「ハローワールド」の課題の要件を満たしていることが分かります。

つまり、「ハローワールド」の課題は無事クリアされました。

もし上のようにプログラムを実行してHello, world!と表示されなかった場合には何かが間違えている可能性があります。

ソースコードの内容が間違えているか、コマンドプロンプトに入力した命令が間違えている可能性が高いです。

注意深く確認してもう一度試してみましょう。

ソースコードの内容

最初に言ったように今回の「ハローワールド」の課題の目的はソースコードの作り方やソースコードをソフトとして実行する方法を解説することがメインであり、ソースコードの内容やソースコードの書き方(組み上げ方)に関しては次回以降詳しく解説していきたいと思っています。

なので、今回ソースコードの内容についてはソースコードというものがどのように組み上げられるかを少しだけ説明するに留めましょう。

ソースコードはプログラミング言語という言語の一種を使って書かれるものでしたが、この点は日本語や英語などで書かれる文章と大差ありません。まず、ソースコードと日本語や英語で書かれた文章の共通点を見ていきましょう。

文章とは幾つかの文から構成されるものです。同じようにソースコードもまた幾つかの「文」から構成されます

そして、文は更に細かい言葉の単位、すなわち、単語に分解することができます。普段日本語などで話をしたり、文章を書いたりする時にはあまり意識しないかもしれませんが、文というのは単語を規則的に、すなわち、「意味のある文」となるように組み合わせることによって作られます。

たとえば、日本語の「私は猫を飼っています。」という文は下のような単語が組み合わされたものです。

  • 飼っ
  • ます

また、英語の「I have a cat.」という文は下のような単語が組み合わされたものです。

  • I
  • have
  • a
  • cat
  • .

ソースコードの「文」の場合も同じで、日本語や英語で言う単語のような構成要素を組み合わせることによって1つの「文」が形成されます(この構成要素をトークンと言ったりします)。

たとえば、上の「ハローワールド」のソースコード(下に再掲しました)をトークンに分解すると下のようになります。

console.log('Hello, world!');
  • console
  • .
  • log
  • (
  • '
  • Hello, world!
  • '
  • )
  • ;

このように分解してみると、プログラミングというのも日本語や英語の文章を書くようなもので、「単語」を組み合わせて「文」を作っていけば良いのだということがお分かりいただけるかと思います。

つまり、プログラマはプログラミング言語の「単語」と「単語の組み合わせ方」を覚えていかなければならないということです。それはある意味で「新しい言語を覚える」ということでもあります。

もしかしたら、英語などの外国語の習得が苦手だった方は身構えてしまうかもしれませんが、英語のような文の作り方に曖昧な点や慣用的な面が沢山ある自然言語と比べて、プログラミング言語のような言語は「文」の作り方が明確に定義されていますので、「文」の作り方自体を覚えるのはそれ程難しくないかと思います。慣れてくると逆に厳格過ぎて融通が利かなさ過ぎるとさえ感じるかもしれません。

寧ろ、プログラミングにおいて本当に難しいのは「文」の作り方を覚えることではなく、プログラミングにおける「モノの考え方」を理解することだと私は思います。

なので、プログラミングはプログラミング言語を覚えていくことだとは思わない方が良いでしょう。

それから、このことは第2回から何度も繰り返していますが、ソースコードはパソコンに対する命令なのでした。

つまり、ソースコードは命令をある種の文章として記述しているのです。

ということは、ソースコードの文章というのは命令文だということです。

日本語の文章は命令文の他にも説明文とか感想文とか寓話とか説話とか色々な種類のものがある訳ですが、ソースコードは全て命令文(の羅列)です。

プログラミング言語には命令文以外の文の書き方は最初から用意されていません。

「ハローワールド」のソースコードであるconsole.log('Hello, world!');も命令文(の羅列)です(実は、このソースコードはただ1つの命令文だけを含んでいるソースコードです。より複雑なプログラムのソースコードは通常2つ以上の命令文を含んでいます)。

さて、「ハローワールド」のソースコードについてもう少し話しましょう。

console.log('Hello, world!');を強引に初心者の方でも分かりやすい形で日本語に「翻訳」するとこうなります。

  • 画面に「Hello, world!」という文字列を表示せよ。

日本語訳とソースコードを照らし合わせて対応付けてみてください。

勘の鋭い方なら気付くかもしれませんが、ソースコードの最後に付いている;は日本語で言う句点のようなものです。つまり、;は1文の終わりを示す記号です

そして、それ以外の部分がこの命令文の本体となっています。

つまり、console.log('Hello, world!')というのはパソコンに対する1つの命令を表している訳です。そして、その命令の内容を分かりやすく表すと「画面に「Hello, world!」という文字列を表示せよ」となる訳です。

ここで気付いていただきたいのが、命令文は不変部分と可変部分に分かれているということです。

「画面に「Hello, world!」という文字列を表示せよ」という命令文の場合、「画面に~を表示せよ」という部分は言わば命令文のベースとなっている部分です。

逆に「「Hello, world!」という文字列」の部分は画面に何を表示するかという「具体的なもの」を表す部分となっています。

この具体的な部分は容易に置き換えることができるということが肝要です。

たとえば、命令文の「「Hello, world!」という文字列」という部分を「「私は猫が好きです」という文字列」に置き換えても命令文は成り立ちます。

極端な話、「「asdfghjkl;:]」という文字列」のような意味を為さないように見える無作為なものに置き換えたとしても、命令文自体は変わらず成り立ちます。

しかし、命令文のベース自体が「asdfghjkl;:]」のようなよく分からないものに置き換わってしまったとしたら最早命令文は成り立ちません。

このように、命令文には置き換えられる部分と置き換えられない部分があります

そして、console.log('Hello, world!')において「画面に~を表示せよ」という置き換えられない部分を表しているのはconsole.log(と最後の)で、「「Hello, world!」という文字列」という置き換えられる部分を表しているのは'Hello, world!'です。

詳細は次回以降に譲りますが、取り敢えず今回は命令文は置き換えられる部分と置き換えられない部分に分けられるということを覚えておいてください。

そして今回最後に覚えておいていただきたいのは、同じ結果となる命令の書き方は1通りとは限らないということです。同じ結果を引き起こす命令は幾つもあるかもしれないのです。

たとえば、「右に90度回転せよ」という命令と「左に270度回転せよ」という命令は過程は違っていても結果は同じになります。

これと同じことがプログラミングの世界でも起こり得ます。

そのため、10人のプログラマに同じ課題を与えた場合、全てのプログラマの書くソースコードが全く同じになるとは限りません。それどころか、全てのプログラマの書くソースコードが全て違っている可能性さえあります。

これは利点でもあり欠点でもあるのですが、プログラミングというものは案外自由度の高いものであるということです。

プログラミングにおいては、「単語」や「単語の組み合わせ方」のレベルまでは厳格に決まっており、ルールに反した「文」を含むソースコードを書いてもそのソースコードは動きません。しかし、「どのような命令文を記述して所望の結果を実現するか」というレベルではプログラミングは真に自由です(これは幾分理想論です。「真に自由である」ということは大層危険ですから、現実にはこの危険を減らすために何らかの制約が掛けられるのが普通ですし、制約の掛け方にも様々なものがあります。要は、実際にはプログラマが余りにも自由奔放な命令文を書けないように様々なプロテクトが掛かっているということです)。

だからこそ、プログラミングには創意工夫の余地があるということにもなりますし、プログラマ間の技量的な差にも繋がります。

プログラマはプログラムを早く完成させられるに越したことはありませんが、早く拵えることができればそれで良いという訳ではありません。

プログラムの良否には様々な観点や評価項目があり、プログラマは総合的に優れているプログラムを作成する能力を涵養していくべきなのです。

上の「右90度回転」と「左270度回転」の例で言えば、たとえ「右に90度回転する」という結果を得るために、左に270度回転するプログラムのソースコードの方が遥かに早く書き上げられるのだとしても、左に270度回転するプログラムを作るべきとは限りません。プログラムを作る時間は短くても、プログラムを実行して結果を得るまでに掛かる時間は長いかもしれません。

逆に、プログラムを実行して結果を得るまでに掛かる時間は右に90度回転するプログラムの方が短くても、今度はもっと別の観点や要件を加味すると左に270度回転するプログラムの方が優れていて、総合的に判断すると左に270度回転するプログラムを作成すべきかもしれません。

プログラマは思った通りの結果を生み出すプログラムを書けさえすれば良いというものではありません。

正しいプログラムが書けるようになるというのはプログラマの1つ目のゴールでしかありません

寧ろそこからどれだけ優れたプログラムを作れるようになれるかが、優れたプログラマと凡庸なプログラマを分け隔てる関門となっていくのです。

今回はここまで

今回はここまで

お疲れ様でした。

前回と今回は「ハローワールド」という有名な問題に取り組みながらプログラミングの実際的な基礎について解説しました。

次回以降ソースコードにおける特定の構成要素に的を絞ってプログラミングの解説をしていきたいと思います。

まずは、プログラミングにおけるデータの取り扱いにおける基礎的な部分について見ていきたいと思っています。

総論についてはかなり詳しく解説しましたので、各論の解説に入っていく準備は十分に整っているかと思います。

あでぃおすぐらっしあー。

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-プログラミング, 講座