こんにちはmorimori(@TatsunoriMorita)です。
入江開発室に参加するようになってノンプログラマーの方も多く、興味がある人はたくさんいると実感しました。
最近ではProgeteなどのオンラインプログラミングサービスも増えて、開発環境を構築しなくても気軽にプログラミングを勉強できる機会ができたことは、とても良いことだと思います。
ただ、どのプログラミング言語でもちょっとしたものを作ろうと思った際に、やはりある程度の開発環境構築のハードルはあるし、入江開発室でも現状はLaravelをメインにしているため、手引きとなる素敵なブログがあるにしても、まったくの知識のない状態では辛いものがあるのではないかと感じます。
そんなことを考えていたところ、ノンプログラマーが極力、開発環境構築の煩わしさを回避してプログラミングしたものをすぐに動かし、確認できることで、プログラミンの面白さを体験するには.NETでの開発は意外にオススメなのではないかと思い、今回紹介したいと思います。
対象読者
・プログラミン未経験者
・オンラインプログラミングサービス等で言語の基礎は勉強したけど環境構築とかでつまずいた人
対象環境
Windows(Macではできないです。)
はじめに
今回紹介する対象言語はC#で、WindowsのPC上で動くデスクトップアプリを作成します。開発環境はMicrosoftが提供するVisual Studio2017を使用します。
なぜこれをオススメするのかというと、
１．インストールするだけで環境構築が終わる。
２．GUIでコントロールを貼り付けるだけで見た目が簡単に作成できる
３．イベント駆動なのでどこでどの処理が動いているかわかりやすい
以上の理由を上げたいと思います。
今回学習することは、web系とはちょっと違いますが、iOSやandroid開発には近いものがあるのでそちらの参考になるかと思います。
目的
できるだけハードルを低くして、プログラミングした結果を早く得られるような
環境を選ぶことで、作る楽しさを知ってもらえれば嬉しいです。
Visual Studio2017のインストール
まずは開発環境であるVisual Studio2017をMicrosoftのホームページからインストールします。
【Download Visual Studio】からCommunity2017を選択します。
そうするとファイルがインストールされるので、クリックして起動します。
メッセージが表示された場合【はい】を選択します。
インストーラーが起動するので【続行】で進めて行きます。
インストール画面が表示されるので、ここで【.NETデスクトップ開発】にチェックを入れて右下のインストールボタンを押します。
(すみません、私はすでにインストールされているのでボタン名が【変更】になっています。)
インストールし終わるまでにちょっと時間がかかるかもしれないので気長に待ちます。
デスクトップアプリを作ろう！！
それではインストールしたVisual Studio2017を起動します。
スタートボタンからVisual Studo2017を選択してクリックで起動しましょう。
起動したら、右上のツールバーから【ファイル】->【新規作成】->【プロジェクト】を選択します。
新しくウィンドウが立ち上がったら、【Visual C#】->【Windows デスクトップ】->【Windows フォームアプリケーション(.NET Framework)】を選択して、
ファイル名をつけて保存先を決めたら【OK】ボタンを押します。(ここではファイル名をTestDesktopAppとしています。)
保存し終わるとこんな画面が表示されると思います。
タイトルにForm1と表示されている四角のウィンドウ画面が作成するアプリの見た目になります。
左の、ソリューションエクスプローラーにあるForm1.csが現在表示されている、アプリの見た目を編集するファイルになります。
ちなみに、プログラムの編集をするにはForm1.csファイルを選択した状態で、右クリックからコードの表示を選択するとプログラムを編集画面表示できます。
それではアプリの見た目を編集する画面を開いた状態で、ショートカットのF5か、ツールバーの【デバッグ】->【デバッグの開始】を選択します。
そうすると。。。アプリが起動できました！！！
どうでしょうか？環境構築はインストールしただけで、すぐにアプリを作成して実際に動かすところまで難しい操作なしでできることがおわかり頂けたでしょうか？
自分がノンプログラマーだけど、取り敢えずプログラミングしてなんか作ってみたいと思っている方に.NETでの開発をオススメするのはこの手頃さがあるところが大きいです。
これだけでは、まだプログラミングしている実感がないと思うので次は画面に文字を表示するラベルを配置してみたいと思います。
ツールバーから【表示】->【ツールボックス】を選択します。
ラベルやボタンといったコントロールの一覧が表示されるので、そのなかからラベルを選択してドラッグ&ドロップでアプリの見た目の上に配置します。
配置したアプリをクリックで選択した状態にしてショートカットのF4かツールバーの【表示】->【プロパティウィンドウ】をクリックすると、
プロパティのウィンドウが表示されます。ここで配置したラベルの表示する文字や、フォントサイズ、色なんかの状態を変更できます。
まず、Nameの項目があるのでそこをtitleLabelに変更します。これはラベルを一意に認識するためのIDになります。
次に画面上に表示される文字を変更します。
プロパティウィンドウのTextの項目を選択してHello World!!!と入力して下さい。
ラベルに入力した文字がアプリの画面上に反映されたのを確認します。
よさそうなので、このままショートカットのF5か、ツールバーの【デバッグ】->【デバッグの開始】を選択してアプリを起動します。
起動したアプリにちゃんとHello World!!!が表示されました。
このようにプロパティウィンドウを使って配置したコントロール(ラベルやボタンなど)の見た目を簡単に変更することができます。
次はイベント処理をさせるためにコードを書いていこうと思います。
イベントとはボタンをクリックした時、マウスオーバーした時、ドロップダウンを選択した時など、アプリに対して何かしらの動作を加えた時に
プログラムが動く仕組みです。
.NETなどのイベント駆動型の場合、画面が起動した時、ボタンをクリックした時のイベント事にコードを書く場所が決まっているのでそのなかで自分がさせたい処理のコードを書いて行きます。
今回はボタンをクリックした時にラベルの文字が変わる処理をコーティングしていきます。
まずはボタンを配置して行きます。
ラベルを配置した時のようにツールバーから【表示】->【ツールボックス】を選択してボタンをアプリ上にドラッグ&ドロップします。
プロパティウィンドウで好みに見た目を変更して見て下さい。
ボタンのNameプロパティをtestButton、Textプロパティをクリック！！に変更しています。
次にボタンがクリックされた時のイベントを登録していきます。
ボタンをクリックで選択した状態にして、F4かツールバーの【表示】->【プロパティウィンドウ】をクリックでプロパティウィンドウを表示します。
プロパティウィンドウに赤い枠で囲ったところに稲妻のマークがあるのでそれをクリックします。
プロパティの表示が変わってイベントの一覧になったので、そのなかからClikの欄を探して右側のテキストボックスをダブルクリックします。
するとForm1.csファイルが開いて、testButton_Clickというボタンがクリックされた時のメソッドが追加されます。
{から}までがクリックされた時の処理範囲となるので、その中でラベルのTextプロパティの値を変更する処理を追加しました。
では、アプリを起動してボタンをクリックして見ましょう。
ショートカットのF5か、ツールバーの【デバッグ】->【デバッグの開始】を選択します。
ボタンをクリックすると先程追加した処理をが実行されていることが分かります！！！
ついでにデバッグの方法も試して見ましょう。
Visual Studioではブレークポイントというものを設置して、途中で処理を止めて実行されている値を確認したりできます。
キャプチャの左端にある赤い丸がブレークポイントになります。ボタンをクリックするとこの部分で処理が一旦止まり、その状態での値の確認等をすることができます。
ボタンをクリックするとブレークポイントの部分で処理が止まり、行が黄色く表示されました。
確認したい部分にマウスをのせると現在の値が表示されます。
また、ショートカットキーのF10、F11で次の処理に１つ進めたりもできます。
まとめ
プログラミングの醍醐味は何かを作ることにあると思います。
せっかく興味を持って始めたのに、環境構築や文法の勉強で躓いてしまってはもったいないです。
ここで取り上げているVisual Studioを使った.NET系のアプリ開発は、入江開発室では扱っていませんが、取り敢えずボタン一つで環境構築をサクッと終わらせて、実際に動くものを作ればモチベーションも維持しやすく、楽しくプログラミングの習得ができると思い今回ブログにして見ました。
ノンプログラマーだけどプログラミングを始めてみたいと思っている人のお役に立てば嬉しいです。
