やがてくる情報教育はこれで決まり!?

まもなく学校教育の一環として、｢情報教育｣が始まります。
そういえば、近頃では子供が手軽に学べるプログラミング環境も登場していますね。
そんな中、作者は｢これは情報教育にピッタリなのではないか?｣と唸らせるソフトウェアをみつけました。
それが、今回ご紹介する｢VSCode｣です。

実は作者も、地元の図書館にある参考書でそのソフトの存在を知りました。
以後、自身のホームページのコーディングなどに同ソフトを使用しています。
しかし…。
このソフト…なかなかのものであり、プログラミング環境としても実に優秀だと作者は思いました。
そんなわけで今回は、このVSCodeを取り上げてみたいと思います!

　※ご注意
　　　今回は、Windows10での動作をもとに記事を作成しております。
　　　したがって、ほかのバージョンでは画面や動作が違うことがあります。予めご了承ください。
　　　なお、ここで使用しているVSCodeのバージョンは、｢1.37.1｣です。

・その姿はエディタ?それともIDE?

ここしばらくのあいだ、いまどきの最新のソフトウェアに目を向けることがなかったので、久々にいろいろとみていたところ、普段から自分が使っているソフトに思わぬ機能が搭載されていることが分かった。
前述の通り、以前作者は学生向けのプログラミングの書籍を地元の図書館で借り読んでいたのだが…その中で使用されていたソフトであった。

さて、突然だがご覧の皆さんは、｢エディタ｣というものをご存知であろうか?
簡単に言えば、｢メモ程度の簡単な文書を作成する｣、または｢テキスト形式のファイルの取り扱いをする｣ために使用されるものだ。
また、エディタはOSにも付属しており、WIndowsでは｢メモ帳｣、かなり古いがMacOSでは｢シンプルテキスト｣、さらに｢UNIX｣では｢vi｣、｢Emacs｣、｢Mule｣などがそれにあたるものだ。
さらにそのルーツをたどってみると、昔の8ビットのパソコン用のOSである｢CP/M｣にも標準で｢ED｣、または｢WORDSTAR｣というエディタが付属していた。
加えてその上位のOSである｢MS-DOS｣にも、このエディタというものは付属しており、｢SEDIT｣(※後期のバージョンより付属)をはじめ、当時販売されていたものもあった。
その代表的なものを挙げれば、｢MIFES｣などがそうだ。
ところで現代のWindowsではメモ帳のほかに｢ワードパッド｣も付属しているが、用途とその使いやすさというものを追求すれば、エディタはまさに必須のソフトウェアといえる。
ちなみに現代のエディタといえば、｢秀丸エディタ｣(※有料)などがあるが、ネットで検索してみれば、その用途に応じて無料で手に入るものもたくさんあるだろう。

ところでエディタは、昔からプログラミング開発にも多用されている。
それがのちにIDEの普及とともに、標準で付属するようになった。
実はMS-DOSの時代にもIDEは存在しており、たとえばボーランド社の｢Turbo C｣では、｢CUI｣ではあるが、立派にIDEが用意されていた。
これは一つの画面でプログラムを書く、コンパイルする、そして…同じ画面でプログラムの実行からデバッグまでをこなすことができたのである。

そのほかエディタには作者の場合に限らず、｢物書き｣にも使用され、また重宝する。
これは、前述のテキスト形式のファイルを扱う場合だ。
文書作成をするワープロとして使用されることもあるが…その垣根としては、一つの文書作成において文字の装飾など細かな機能が省かれている点が大きな違いだろう。
但し、エディタには文中の語句に対する検索機能などが強力で、特にプログラミングにおいてのソースプログラム作成にはその威力を発揮する。
たとえば、プログラミングで長い一文を入力するときには、それを一度で入力する機能や、その入力した一文をエラーがないか自動でチェックしてくれるなどの機能があるのだ。

・VSCodeの主な特徴

さて今回例に取り上げた｢VSCode｣だが…その製作元はマイクロソフトで、同メーカーではこのページの記事にも掲載されている通り、｢Visual Studio｣(※以下、｢VS｣と略す)というプログラミングのための統合開発環境が提供されている。
また、その学習バージョンにおいては無償で手に入れることができる。
現在の最新バージョンは｢2019｣の様だが…たいがいは以前のバージョンである｢2015｣か｢2017｣でも十分だろう。
そして今回例に取り上げたVSCodeも無償であり、手軽にダウンロードして使用することができる。

ところで、このVSCodeをプログラミング環境での使用を前提とした場合、｢必要最低限のプログラミング環境｣でしかない。
つまり、VSの持つ｢GUI｣を取り扱うためのデザイナ画面やデータベース接続・連携機能は搭載されていない。(※作者のみる限り、現時点では不明)
但し…プログラミング言語を学ぶ上での基礎を学習することにおいては、これだけ手軽でありながら、立派なIDEはないといえる。
まぁそれ以前に前述の通り、このソフトはエディタなのだからあたり前である。
また、一番重要なのは、どんなプログラミング言語でも重要な、その｢核｣となる部分、すなわち｢ロジック｣においての学習ができる点である。
つまりこれは、｢制御｣の部分を意味しており、さらに突き詰めて言えば、その部分に対してのプログラムの入力から実行、そして…その追跡作業である｢デバッグ｣までが行えるということだ。

・インストールについて

VSCodeは、実はそのままではプログラミング環境を使用することはできない。
但し、ホームページなどの作成においての｢HTML｣のコード記述、あるいは｢Java Script｣のコード記述には標準で対応している。(あくまでもコード記述においてのこととなる)
ちなみに前述した参考書には、後者での学習方法が掲載されていた。

さて、今回はVSCodeにてプログラミングの環境を構築していくが、その使用するプログラミング言語には、もはや定番の言語である｢C#｣言語を例に取り上げる。
但し…。
その環境を構築する方法については、ネット上に多数の関連したページが公開されているので、作者が説明するよりかは、そちらをご覧いただく方がいいだろう。
但し…作者のみる限り、どうもそれは容易にはいかないようだ。
そこで、下記に作者の気づいた点を掲載しておくので、インストール時の参考にしていただきたい。

　1 . VSCodeそのものの｢日本語化｣(※実際のものは英語版)
　　→　英語版のままでも使えないことはない
　2 . C#言語を使用するための拡張機能の追加
　　→　これは必須
　3 . エディタ内でソースプログラム入力時の補完機能の追加
　　→　プログラムの入力時には必要
　4 . ｢{ }｣を使用するプログラミング言語に対応した色による識別機能
　　→　プログラムがよりみ易くなる。但し必須ではない
　5 . ｢.NET SDK｣(.NET CORE 2.2)のインストール
　　→　インストールされていなければ、そのメッセージなどが表示される

…などが挙げられる。
但し、実際にこれらの機能のほかにも、まだ追加でインストールしなければならないものがあるかもしれない。
その点については、関連した情報が掲載されたページを参考に、じっくりと取り組んでいただきたい。

それでは前述した内容をより詳しくまとめてみよう。
まず前述の1は、｢Japanese Language Pack for Visual Studio Code｣(※画像)、次に2は、｢C# for Visual Studio Code (powered by OmniSharp)｣、そして次の3は、｢C# Extensions｣、最後の4は、｢Bracket Pair Colorizer｣だったと思う。
ちなみに拡張機能の追加の方法は、VSCodeを立ち上げて、メニューの｢表示(V)｣　→　｢拡張機能(X)｣で画面左側に拡張機能についての情報が表示されるので、その画面上部に検索の語句を入力すると、そこに対応した拡張機能が表示されるようになっている。(あたりまえのことだが、ネットに接続していること)
そこまで完了したら、とりあえずは動くはずだ。
また、これは非常にみにくいのだが…｢インストール｣や｢有効｣など、設定そのものをオンにしているかどうかの確認をしておく方がよい。
これは余談だが、作者の場合は、ほかの言語を使用するための拡張機能もインストールしていおり、それらについては念のため、その機能を無効にしている。

・実際の使用について

…では、突然だが、まず結論から言っておこう。
最終的には、VSで｢コンソールアプリケーション｣を制作する環境と、ほぼ同じ状況となる。
つまり、結果的にはそれを使用するのと同じことになるわけだ。
だったら最初からVSを使う方がいいのではないか…と思う方もいらっしゃることだろう。
しかし…実は違う。
前述の通り、VSCodeはエディタである。
だから正確には、IDEではない。
その証拠として、VSの様に最初から初期設定などが自動で行われるわけでもなく、VSCodeでは、すべてがほぼ手動操作で行われるためだ。
但しそれが、逆にIDEを扱ううえでのいい勉強にもなる。
また、どちらかといえば、｢コマンド操作｣の学習にもなる。
ところで｢そんなの子供向けであるわけがない!なんと無茶な話だ｣…という声が聞こえてきそうだが…だったら、そんじょそこらの玩具ではなく、｢実際に使える本物のスマホ｣を自分の子供に与えて使わせている方々は…どうだろうか?
作者が言いたいのは…｢最初から本物というものを子供に使わせてあげなさい｣…ということだ。
それに心配しなくとも現代の子供たちに限らず、子供は知らずのうちに好奇心で自らの探求心を常に広げている。
たとえば我々大人が苦労して覚えたことも…子供たちなら難なくクリアできる場合もあるはずだ。

それでは実際の操作をみてみよう。
但しこれは、すべてが正常にインストールされていることが前提となる。

さて、全体の流れとしては…

　1 . Windows 10のエクスプローラで、まず作業用のフォルダ(※ディレクトリ)を作る。
　　　→　｢ワークスペース｣を作る。
　　　　　ここでは、例として｢sample｣とする。
　2 . VSCodeを起動して、｢エクスプローラー｣を立ち上げる。
　　　→　メニューの｢表示(V)｣　→　｢エクスプローラ｣を選択
　　　　　※場合によっては、｢ようこそ｣の画面が立ち上がるが…これは閉じてもよい。
　3 . 画面左側の上部にある｢フォルダを開く｣をクリックして、1で作成したフォルダを選択する。
　4 . メニューの｢ターミナル(Ｔ)｣　→　｢新しいターミナル｣でターミナル画面を起動する。
　　　→　おそらくは、画面上部のエディタ部分に続いて、画面下部に表示される。
　　　　　また、1で作成したフォルダ名が行の左に表示されているはずである。
　　　　　※ターミナルとは、ここではコマンドプロンプト(※正確には｢Power Shell｣)の画面となる。
　3 . そこで、｢dotnet new console｣を入力してEnterを押す。

すると…

　テンプレート "Console Application" が正常に作成されました。

　作成後のアクションを処理しています...
　'dotnet restore' を x:\sample\sample.csproj で実行しています...
　x:\sample\sample.csproj の復元が xxx.xx ms で完了しました。

　正常に復元されました。

…と、表示され、このフォルダ内に今回のプログラミング環境に必要なファイルが自動で生成され、一つの｢プロジェクト｣が作成される。
　※各種保存領域名を｢x｣としています。また、時間表示は異なる。

それでは次に、ソースプログラムを開いてみよう。
画面左側に、｢Program.cs｣というファイルがあるので、これをクリックする。
　→　｢ファイル(F)｣　→　｢ファイルを開く｣でもよい。
すると…エディタ部分にC#のコードで書かれたプログラムが表示される。
そしてこのとき、画面の左下にメッセージが表示されるので、｢Not Now｣をクリックする。
　→　※設定によっては、日本語で表示される場合もある。
次に再度ターミナルに戻って、｢dotnet run｣と入力してEnterを押すと…次の行に｢Hello World!｣と表示されるはずである。
これは、そのメッセージを表示させるための必要最低限のプログラムが自動で作成されたということだ。
この｢Program.cs｣というファイルがソースプログラムそのものであり、これからこのプログラムに手を加えていくということになる。
つまり、このファイルを前述したエディタの機能を駆使しながら修正・編集していき、プログラムの実行からデバッグを行うことになるのだ。

・デバッガーの使用について

さて、ここから作成したプログラムの追跡を行うわけだが…一般には、この作業は｢トレース｣とも呼ばれる。
そもそもデバッグとは、実行したプログラムが正常に動かなかった場合に、それがなぜ動作しないのかを検証する作業のことだ。(※またはプログラム中の間違い…バグを修正する作業ともいう)

その昔はプログラムの途中で変数の値などをどこかに表示させ、現在の状況を知るという方法があったが、これは効率が悪かった。
なぜなら、それを表示させるためのプログラムの一文が、プログラムの本体と混同してしまうからだ。
…そこで重宝するのが、このデバッガーだ。
デバッガーではプログラム中で使用する変数の値を表示させることができ、また、その変化の過程を知ることができるものだ。
そして、プログラムを一行単位で実行して、その過程を追うことができる。(※これをステップ実行ともいう)

それではこのデバッガーの機能をみてみよう。(※初期設定は後述)
さて、この画像ではいま｢int a = 1;｣という行が実行されている途中である。
この一文の意味を簡単に解説すると、｢整数型の変数として a を定義して、さらにその初期値として 1 を格納せよ｣という意味だ。
そしていまデバッガーでは、このプログラムの現在実行されている一文(※反転している行)を表している。
そして、この行の処理が終わると…現在の｢a｣という変数の内容が、｢0｣から｢1｣へと変化するわけだ。

些細な話だが、このVSCodeのデバッガーは、その表示が実に凝っている。
…というのは、その変化があった場合に、それが明滅して｢変わったよ｣ということを知らせてくれるのだ。
画像では、変数｢a｣の値が前述のように変化したことを知らせている。
動画ではないので表現できないが…実際にはキラリと光る(…ような感じなのだが)ようになっている。
このへんの作りが、いまどきの子供向けプログラミングのためのソフトのようで面白い。
また、これなら作成したプログラムの内部から動作まで、よく把握することができるだろう。

さて、このデバッガーを使うにも、実は初期設定が必要だ。
但し…操作によっては、そのまま動作するので、今回はそれに沿って解説していこう。
(※場合によっては、その結果が違ったりすることがあるので注意)
今回は、前述で生成されたプログラムに、デバッガーの機能を検証できるよう、そこに一つ追加を入れてみる。

　1 . まず｢デバッグ(D)｣　→　｢デバッグの開始｣を選択。
　2 . デバッグのコンソール(※ターミナルと同じ画面)に、何かいろいろと表示される。
　　　→　この中に、｢Hello World!｣と文字列が表示されているはずだ。
　3 . 次にプログラム中の、｢Console.WriteLine("Hello World!");｣の前に、｢int a = 1;｣を追加する。
　4 . 追加した行の番号の左をクリック　→　赤い｢●｣が表示される。
　　　これは｢ブレークポイント｣といって、そこで一旦プログラムを中断させることを意味する。
　5 . 再度、1を実行する。
　　　→　左側に、｢デバッグ｣の画面が表示される。
　　　　 ※画面が前述の｢VSCodeの主な特徴｣に掲載している画像のようになる。
　6 . 前述の画像のように、メニューの｢ヘルブ(H)｣の下あたりに表示されている、｢↓｣を一度だけクリックする。
　　　→　左の｢変数｣の画面に、その内容が表示され、そして…前述のように変更されたという旨の表示がされる。
　

ところでこれはネット上で公開されているページでのことだが…おそらくは、これらの機能を最初に使用するための構成ファイルというものの設定を行う必要があるらしい。
これはデバッガーを実行したとき、前述のように画面左側にデバッグの画面が表示されるのだが…その上部にある｢デバッグ｣ の表示の隣に｢構成がありません｣と表示されていた場合、まだ設定が完了していないということらしい。
または、初めてデバッガーを起動したときに、プルダウンメニューが表示され、そこから｢.NET Core｣を選択したときに、後述する構成ファイルが自動的に開くこともある。(※要は編集、または修正してくださいという意味だろう)
実は作者は随分とそれに悩まされたのだが…どうやら今回は自動で設定されていたようだ。
ちなみにその構成ファイルとは、｢.vscode｣のフォルダ内の｢launch.json｣というファイルである。
勿論、このファイル自身もVSCode内で編集できるが、各種機能の追加を行う必要があるらしい。
ただそのファイルについても、既にネット上で関連したページが公開されているので、作者が解説するよりも、そちらをご覧になった方がいいかもしれない。

・C#言語の深層にに迫る?

C#言語といえば、既にこのページの記事でも取り上げている通り、もはやWindowsプログラミングの言語では定番の言語ともいえる。
一方、Webプログラミングの定番といえばJava言語があるが、C#言語はこの言語に非常に似通っている。
…というか、｢Visual Studio｣を制御するためにそれをもとに作られた、マイクロソフトの独自の言語という見解もあるようだ。
…ただ、それでいて現代ではとっつきやすい言語ともいえる。
なぜならその習得は、比較的容易だからである。
これも別の記事で解説しているが、そのベースとなっているのは、あのC言語だ。
但し、C#言語は現代のプログラミングでは必須の｢クラス｣の概念、つまり、｢オブジェクト指向｣にも対応した言語でもある。
このことについては、このページの別の記事でもサンプルを交えながら簡単に解説しているので、そちらもご覧いただきたい。
それではちょっと、このC#言語の基本に立ち返ってみよう。
勿論、今回のデバッガーにて、ぜひその動作原理をお試しいただきたいと思う。

それではまず、下記のプログラムをみていただきたい。

｢なんだ?コイツ、人を馬鹿にしているのか?｣…といわれそうだが、確かにC#言語を理解している方なら、まず当たり前のように理解できるプログラムだ。
しかし…。
問題は、このプログラムで定義した、｢文字型｣変数の｢a｣の動きだ。
ここで定義した文字型変数aには、その初期値として｢null｣が格納されている。
…では、それはどんな意味を持つのか?
古来からプログラムの中で定義した変数の初期値というものは、何が入っているかわからないということがあった。
また、C言語では何かが代入されない場合、｢false｣や｢0｣といった｢論理値｣が格納されるのだが、C#言語ではそのようなことはない。

…では、デバッガを実行して確かめてみよう。
まず前述のように｢char a = 'a'｣の行に｢●｣印をつけ、その時点での変数aの内容を確認する。
すると、画像のような結果になるはずだ。
aの初期値として、｢null｣が入っているのが分かる。
ただここで注意が必要だ。
その表示が、｢0｣と｢\0｣となっている点だ。

次に1ステップ(※1行)ずつ進めてみよう。
デバッグに表示されている、変数aの値はどのようになっただろうか?
おそらくは、｢97｣と｢'a'｣という表示がなされるはずだ。
これはどういうことかというと、アルファベットのaは、その文字コードが97であり、その隣にはその内容が表示されているわけだ。
これだけで、変数aの動きを事細かく知ることができる 。

さて、このプログラムの実行結果はどのようになるのか…それはこのままデバッガーでも知ることができるし、ターミナルで実行しても知ることができる。(※画像は、ターミナル画面での実行結果)
ここまでで、前述した意味が分かると思う。
それが理解できたなら…おそらくは、次行の｢a++｣という意味も十分理解できるはずだ。(※これを｢インクリメント演算子｣といい、｢a = a + 1｣と同じ意味を持つ)
ただここで注意が必要だ。
格納されている｢a｣という文字に、直接｢1｣を加えるという意味ではないことだ。
これは、現在格納されている文字コードの値に+1することにより、97が98になる…ということである。
つまり、前述のように文字コードは英字ならアルファベット順に設定されていることから、｢a｣は次の｢b｣を指すことになる。
そしてその内容を、｢Console.WriteLine…｣にて結果が表示される…というものだ。
(※文字コードの操作が、すでに｢アセンブリ言語｣の概念が関連している)

そんなわけで、デバッガーというものがどういう働きをするものなのかお分かりいただいただろうか?
また、それがプログラミングをするうえで、いかに重要なことなのかを考えていただきたいと思う。
(それがプログラミングってモンだよ…ということなのだが)
ところでC#言語は、順次改訂がなされているようだが…そんなに意識する必要はない。
なぜなら、古い規格でも何ら問題なくプログラミングの学習は可能だからだ。(別の記事で、Visual Studioは古いバージョンでもかまわないと解説したのは、それが理由だ)
むしろ新しい言語体系を意識するのには、当然のごとく実践…いわゆる現場での経験や知識が必要となる。
だから、そのときに理解すればいいことである。
その基本というものは、同じだからだ。

作者はこのページのプログラミング関連について当初制作した記事にて、｢どんなことでもいいから小さな感動を大切にしてほしい｣と掲載した。
今回の解説も、実に小さなことだと思う。…そして、くだらないことであるのかもしれない。
しかし、その過程を経て人は物事を覚えていくものだ。
そして小さなことはやがて大きなことにつながる。
それは実社会においての仕事にも言えることだ。
そういうところから、いまの子供たちに教育していくことが、大切なのではないか?…とも思う。(これは言い過ぎか)