「プログラミングしない人」のためのプログラミングのおはなし

プログラミングはホットな話題

あまりMimir Yokohamaが世間一般の平均的なものであるということはないのですが、Mimir Yokohamaへのお問い合わせで一番多いのはプログラミング関連です。 (ちなみに、次いで多いのはLinux関連です)

プログラミング関連のお問い合わせの中での内訳は、業務でプログラミングをされている方が半数を越える程度で、残りはプログラミング経験者と未経験者はおよそ同程度です。

ただ、お問い合わせに限らず、コンピュータの専門家として振られる話の中でプログラミングに関するものは割合としては多く、システム系の授業を受けられている方でもプログラミングに関する関心はかなり高いように見受けられます。

今回のお話はプログラミング未経験者の方に向けた内容で、特にプログラミングに対して漠然としたイメージしかないという方に向けています。

プログラミングというものは、有名な言葉でありながらその実態はなかなかプログラミングをしない方には伝わりにくいものです。しかし、実はプログラミングは「今日からでも簡単にはじめられるカジュアルな趣味」であったりします。

結局、百聞は一見にしかずというものです。 「プログラミングってこういうものだよ」なんて私が語るよりも、まずはちょっと触ってみましょう。

プログラミングはいつでもはじめられる

プログラミングに関心はあるものの、実際にやるというのは自分には縁遠いもの、と思われる方が多いようですが、実はとても簡単なことだったりします。 厳密には「ちゃんと環境を整える」という話をするとそれなりに手順はありますが、単に経験してみるだけということであれば難しいことはありません。実際、私は家電量販店で展示しているパソコンでぽぽぽんっとプログラム書いて動かしてみたりすることもあります。 ネットカフェだったりするとむしろ日常的にあります。

「プログラミング」という作業には何段階かあって、最初は「書く」という作業になります。

この「書く」のに使う道具は、そんな特別なものではなくて、テキストエディタというものを使います。

テキストエディタというのはパソコンの中でもすごく基本的なアプリで、「ない」ということはちょっと考えられないな、なんてものです。

例えばWindowsだと「メモ帳」というテキストエディタが入っています。あと、「ワードパッド」というのもあります。 Macだと、「テキストエディット」というアプリが入っています。 こういうのでもちゃんとプログラミングできちゃうんです。

実はスマホでもできます。AndroidだとJota+とか有名ですね。 ただ、スマホだと記号がとても打ちにくいので、キーボードなしだと相当つらいと思います。 私は、どうしても必要なときにDroidVimというアプリを使ってプログラムをAndroidスマートフォン上で修正することがありますが、可能な限りやりたくありません。

それから、テキストエディットで書くときには注意があります。 テキストエディットは標準でRTFという形式のテキストを編集するようになっているのですが、これは普通のテキストではないので、「環境設定→フォーマット→標準テキスト」と選んで普通のテキストモードにしておく必要があります。 さらに、拡張子が自動的に.txtになるのですが、プログラミングでは違う拡張子を使うことになるので、「環境設定→ファイルを保存するとき→標準のテキストファイルに拡張子.txtを追加」をオフにする、という手順もしておいたほうがいいでしょう。

ここから先は飛ばして、次の節に進んでも構いません。 この節の残りは説明です。

書いたあとは「コンパイル」あるいは「実行する」という手順になります。 これは、コンパイルしてから実行になる場合と、コンパイルせずに実行する場合があります。 コンパイル作業に何段階必要かというのは、それも色々です。

このコンパイルという作業や、コンパイルしないものと、コンパイルするけど中間コードというものにコンパイルするものに関しては「言語処理系」というソフトウェアが必要になります。

ただ、このあたりの話をするとちょっと難しい話になってきます。 そこで今回、この記事ではHTMLとJavaScriptという言語を使用します。 これらを動かすのに、馴染みのない「言語処理系」をインストールする必要はありません。しかも、手順もとても簡単です。

コンピュータにとって意味のあるものを書く

プログラミングがコンピュータにとって特別なテキストファイルを書くことだ、ということをお話しましたが、ちょっとピンとこないかもしれません。 そこで、まずはHTMLというものを書いてみましょう。

HTMLは装飾文書で、専用のアプリを使うことで特別な解釈をしてくれるテキストです。 テキストエディタ上ではただのテキストですが、専用のアプリを使うと違った解釈になります。 プログラミング言語というわけではありませんが、まずはコンピュータが特別に解釈するものをテキストエディタで書いてみましょう。

まずはテキストエディタを起動します。 ワードパッドはテキスト編集に適しませんから、標準で入っているものとしてはWindowsではメモ帳、Macではテキストエディットになるでしょう。 テキストエディットは先に説明した通りの手順を忘れないでください。

起動したら、次のように入力します。

<html>
<body>
<p>おはようございます。</p>
</body>
</html>

ここではわかりやすく色分けしていますが、色分けは気にせず入力してください。 入力したらこのファイルを保存します。 Macの場合はfirst.htmlという名前で保存しましょう。 Windowsの場合はメモ帳では拡張子入力ができないので、一旦firstとして保存します(first.txtというファイルになります。) そして、拡張子を.txtから.htmlに変更しましょう。 拡張子を表示するには、エクスプローラの「表示」というメニューから変更します。

既に、first.htmlを開くと自動的に開くのはテキストエディタではなくウェブブラウザ(Edge, Google Chrome, Firefox, Safariなど)になっていることでしょう。 そう、こうしたアプリがHTMLファイルの専用アプリなのです。

こうしたアプリで開くと

おはようございます

と表示されているはずです。 色々書きましたが、それは消えてしまいました。

はじめてのHTMLファイル

それでは、ちょっと編集してみましょう。 アプリの関連付けからは開けないでしょうから、テキストエディタのメニューから開くか、あるいは右クリックなどのコンテキストメニューから別のアプリで開いてあげる必要があります。

<html>
<body>
<p>おはようございます。</p>
<p>おはようございます。</p>
<p>おはようございます。</p>
</body>
</html>

まずは3つに増やしました。当然、この状態で開くと3つおはようございますが表示されます。 しかし、それではおもしろくありませんね。一番上は赤く、そして真ん中は大きくしてみましょう。

<html>
<body>
<p style="color: red">おはようございます。</p>
<p style="font-size: 200%">おはようございます。</p>
<p>おはようございます。</p>
</body>
</html>
styleをつけてみる

みるとなんとなくわかるでしょうか。 styleというのが見た目の指示に当たります。そして、="..."という形でダブルクォーテーションマークに囲まれた内容がその指示の内容です。 1つ目は色(color)を赤(red)に、2つ目はフォントの大きさ(font-size)を200%に、ということですね。

これを開くと見事に見え方が変わりました。

では、次のステップに進む前に次のステップで使うHTMLファイルを用意しておきましょう。 コピペで大丈夫です。

<html>
  <body>
    <form>
      <input type="text" size="64"><br />
      <textarea cols="64" rows=24"></textarea>
    </form>
  </body>
</html>

JavaScript

今度はちょっと開くアプリを指定させてください。 Google Chrome, Chromium, Vivaldi(まとめてここではChromiumと呼びます)か、Firefoxです。

これで開いたら、Ctrl+Iを押します。そうするとインスペクターコンソールが開きます。 どちらの場合でも「コンソール」(Console)を選択してください。

ここで>と出ていて、ここにプログラムを打ち込むことができるようになっています。 ここで打てるプログラミング言語はJavaScriptといいます。

これでは早速試してみましょう。 次のように打ち込んでエンターキーを押します。

alert("こんにちは")

画面に「こんにちは」というボックスが表示されました。 こういうボックスは、確認や警告で出てきたりしますね。

警告ボックスの表示

では、本当に確認をしてみましょう。

confirm("本当にいいですか?")

今度は確認の画面が出てきました。 見覚えのある画面ですね。

確認ボックスの表示

では今度は名前を聞いてみましょう。

prompt("あなたの名前は?")
入力ボックスの表示

今度は入力する画面が出ました。ここで名前を入れてみると…

入力ボックスに入力するとコンソールに表示される

コンソール上に名前が表示されました。 でも実は、これは入力した値をどこにも保存していないので、これで終わりになってしまいます。 それじゃあ寂しいので、名前を保存しておきましょう。

name = prompt("あなたの名前は?")
nameの中にとっておく

今度も同じように表示されましたが、今度はnameの中に名前が保存されています。 では、挨拶してみましょう。

alert("こんにちは、" + name)
nameが入力した名前になる

ちゃんと名前を覚えてくれていますね。(画像ではうっかり句点を入れるのを忘れてしまいました)

さらにちょっとしたテクニックを使ってみます。 次のように入力すると…

document.forms[0][0].value = "あなたの名前は " + name
テキストボックスの中にも表示

画面上の部品に文字が表示されました。 [0][0]になっているところを[0][1]にすると大きいほうに表示されます。

プログラミングは向き不向きがある

ここまでやってきて、大興奮、という方と、「これなんなの?」という方がいると思います。

プログラミングは割とそういうもので、関心を持てる人はほんのちょっとしたことでもものすごく楽しくなるのですが、 関心を持てない人は非常に高度なプログラムになっても「ふーん、それで?」という気持ちになってしまいます。

プログラミングのポイントは、「自分でしたことをコンピュータが反映してくれる」ということであり、「自分が作ったものが動くという喜び」だったりします。 昔だとそれはそれは大きなことだったのですが、最近だとコンピュータを任意に制御する方法はたくさんあって、さらに自分の操作をコンピュータに反映させるという意味ではゲームがあったりして実感は非常にしづらくなっています。

ただ、それでもプラモデルを作ったりする方ならわかるかと思うのですが、自分が組み上げたものが形になる、って嬉しいことですし、「もしもこれが自分のイメージしたように動いたら」なんて考えるとワクワクすると思うのですね。 プログラミングの楽しさって、そういうことなんです。ですから、「動く」という素朴なことに感動を感じないタイプの方はあまりプログラミングに向いていません。

いじることとイマジネーションに楽しさが詰まっている、ということを考えると、子供のような心で楽しめる人のほうが向いていますね。 拙くても自分で作ること、自分でやってみることが好き、というタイプの方も向いています。

素朴なプログラミングから道は始まっている

もしかしたら先程のプログラミングを見て「こういうのじゃなくて…」という気持ちになる方もいるかもしれません。

気持ちはわかります。私がパソコンを始めたときは、グラフィカルな画面というのはなくて、文字だけしか表示できない世界だったのですね。 そんな中で、

10 PRINT "HELLO, WORLD"
20 GOTO 10

みたいなことをやっていたわけです(実際は300行くらいあるもっと複雑なことをしていました)。 単に画面に文字を出すだけ。

そしてWindows 3.1とかOS/2なんてものに触れてウィンドウとかダイアログボックスなんかが出るパソコンに触ると、自分が今やってるプログラミングと、ここで動いているアプリというのは全くの別物に思えたりしました。

ただ、ちゃんとプログラミングしていくとわかるのですが、ちゃんとこうしたプログラムは地続きになっているんです。 千里の道も一歩から、と言いますか、今はものすごい人たちもみんな最初はこういう素朴なプログラムを書くところから始めて、だんだんと色んなことをやっていって今があるんだな、ということを感じることができます。

だいたい、こういう素朴なプログラムを作ったら、次は簡単なゲームを作りたがるものです。 ここで、あまりむずかしいゲームを作ろうとすると高い確率で挫折します。

やっぱり最初はいじるところから始めるものだと思います。 最初のHTMLのredblueにしてみたり、200%50%にしてみたり、 あるいはこんにちはこんばんはにしてみたり、もうそんなことをするだけでプログラミングの世界を自分の足で歩いていると言っていいんです。

実用面だとまた全然違う教え方になるのですが、プログラミングの本質という意味では、「楽しんで、コンピュータを動かす」ことがプログラミングの道に通じていると言って間違いではないと思います。

プログラミングの世界はどう広がる

プログラミングをする人の全体の割合から言うと、昔は圧倒的にホビイスト、つまり「趣味でプログラミングする人」が多かったのですが、現在は「仕事で書く」人が非常に多くて、完全に職業スキルとみなされるようになっています。

だから、プログラミングの話をすると、どうしても就職やお金の話として理解されがちなのですね。

でも、それは違います。それだけがプログラミングではなく、 そもそも仕事でプログラムを書いている人の中の、かなり多くの人が趣味としても自分の楽しみでプログラムを書いていたりします。

それだけ、プログラミングというのは楽しいんです。

私の場合はプログラムを書くことそのものが仕事になる割合はかなり低いですが、仕事の道具としてはプログラミングします。でも、教える身としては、「なんのためにプログラミングするか」という目的論ではなく、「プログラミングということそのもの」にフォーカスしていきたいと思うのです。

プログラミングは楽しいことです。 何かのためでなければしてはいけないということも、何かのためでなければならないようなものでもありません。 目的があってもなくても、プログラミングを楽しめば良いのです。 そして、楽しまなければ道は開かれません。

ですから、あまり授業や、職業といった観点のプログラミング論に振り回されるべきではありません。 前述の通り、「プログラミングに向いてない」という方もありふれていらっしゃるものです。そういう方が無理してしなければならないようなことでもありません。 そして、何らかの利益のためにプログラミングをしなければならない、という議論は、実に不毛です。「日本のサッカーを強くなければサッカーをしなければいけない」とか、「日本の絵画を高く売っていくので絵を描かなければならない」と言われたらどうでしょう? それは、したい人、得意な人がすべきことだと思いませんか?

プログラミングはそういうものではありません。 別にワールドカップに出場しなくても、サッカーをしてもいいですし、別に画廊に展示しなくても絵を描いてもいいのです。 そして、お金にならなくても、職業にしなくても、プログラミングはしても良いものですし、楽しくて充実した趣味です。しかも、実用にもなります。

趣味からはじめても、楽しんでいるうちにすごいことができてしまうかもしれません。 その可能性が、他の専門的なことよりもずっと高いのも、魅力のひとつかもしれません。

せっかくなのでテキストエディタ

せっかくプログラミングに触ってみましたから、テキストエディタを使ってもうちょっとしっかり書いてみましょう。

複雑になりますが、できるだけいじりやすいように仕立ててみました。

また、ここまではメモ帳などでプログラミングしてきたましたが、プログラミングに適したエディタ、例えばAtomVSCode/Visual Studio Codeなどを使うとより便利にプログラミングできます。

まずは、second.htmlの内容です。

<html>
  <head>
    <title>S-E-C-O-N-D</title>
  </head>
  <body>
    <form>
      <input type="text" size="32" id="LineText" style="color: rgb(50%, 20%, 80%);" />
      <textarea cols="64" rows="24" id="AreaText"></textarea>
    </form>
    <script src="second.js"></script>
  </body>
</html>

続いて、同じフォルダにsecond.jsを作りましょう。

var linetext = document.getElementById("LineText")
var areatext = document.getElementById("AreaText")

linetext.onclick = function() {
  var name = prompt("あなたの名前はなんですか?")
  if(name) { this.value = name }
}

areatext.onclick = function() {
  var comment = prompt("ひとことコメントください")
  if (comment) { this.value = this.value + comment }
}

second.htmlを開けばうまく動作するはずです。

むすびに

私がプログラミングをはじめたのは3歳のときで、IBMのJXというパソコンでした。 このパソコンには、BASICというプログラミング言語処理系が乗っていて、逆に言えば「BASICをしないとなにもできない」ようなパソコンでした。ゲームはいくつかありましたけどね。

そしてだんだんプログラミングができるようになってくると、今度は「BASICというのは、おもちゃ言語で、本格的には使えないらしい」ということを知りました。 当時の私は「そんなわけないもん!!」と思っていましたけどね。私が遊んでいるゲームも結構な割合でBASICで書かれていましたから。

でもそう言われると本格的なプログラミングってどんなものだろう、と気になります。 しかし、当時は本格的なプログラミング言語の処理系って、かなりお金がかかるものでした。 FORTRANコンパイラとか、Cコンパイラとか容易には手に入りませんでしたね。

結局、どうしても欲しくって、Visual Basic, Visual C++を買ったんですけど、15万円くらいしたんじゃなかったかな… でも全然使いこなせなくて、すごく悔しい思いをしたのを覚えています。

結局そこから5年くらい経ってからPerlというプログラミング言語で書くようになって、やっとプログラミングの自由を手に入れた気がしました。

今は、プログラミング言語の処理系で「お金を出さないとそもそもそのプログラミング言語は動かせない」みたいなものはすごく少なくなって、少なくとも動かすだけの話であればお金をかけずに簡単にやる方法があるのが普通になりました。 ですから、今は「本格的なプログラミング言語」が好み次第で選び放題になっています。

エディタもすごく高機能になって書きやすくなりましたね。 BASICなんて、基本的に1行ずつ頭から書くしかありませんでしたし、しかも一回エンターキーを押してしまったら書き直せるのは行単位ですからね。修正もものすごい苦行でした。 私はJXが触れましたからやりませんでしたけど、コンピュータが貴重だった昔は方眼紙にFORTRANのコードを書いたりしていたのです。

こうしたことから、プログラミングのハードルはものすごく下がりましたし、カジュアルな趣味としてプログラミング、「全然アリ」だと思います。今日からだって始められます。

それがなんのためであっても構いません。 プログラミングは、自由なものですから。

実は「メモ帳でプログラミング」というのは、難しい…というか非常にやりにくいものですので、 それができるのは割と手練というか、隠し芸のようなものだったりします。

ただ、今回はごく簡単なもので、基本的にはコピペで処理できるものですから、用意に手間がかからないことを優先しました。 私自身、「エディタも言語処理系も手に入らないから、メモ帳で書いてInternet Explorerで動かす」みたいなことを優先したこともあります。そう、学校のコンピュータですね。

プログラミングなんて、始めるのはなにも難しいことはありません。 これがプログラミングなんです。

«