【プログラミング入門の入門】とにかく動かしてみよう
こんにちは。継続の錬金術士なおキーヌです。
ブログ毎日更新は202日目になります。
プチコン4でのRPG講座も一旦完成したので、プログラミング入門の入門講座を作っていこうと思います。
対象者は以下になります
- プログラミングを全くやったことが無いけど興味を持った
- 学校で少し勉強したけどそれ以来まったくやってない人
- なんにもわからんけどゲームプログラマーになりたい
- Webサイトは組めるけどJavaScript全くわからん
と初心者向けというよりは未経験者向けの講座となって行きます。
私自身が完全独学でなおかつ今もずっと一人でプログラミングをして、
非IT系企業ではありますが社内でシステムを組んだり便利ツールを作ったりしています。
しかしがっつりプログラマーというわけではないので、
私が出来るのはプログラミングという世界の客引き兄ちゃんみたいなことしかできないわけです。
そっから先は現場やスクールで学んでくれ！入口への手引きはしてやるから！
といった感じです。
ちょっとでもプログラミングが出来る人口が増えてくれればそれほど嬉しいことはないですね。
第１回ということでコードはそんなに書きません。
難しいことも言いません。
それではプログラミング入門第１回目始めましょう。
単純作業はプログラミングを覚えたら一瞬で終わる
対話形式です。
時間が無くてアイコンをまだ用意できてませんが、
なぁトモカズ、プログラミングってどうやるんだ？
おや、リキくん。珍しいね君からコンタクトをとってくるなんて。
プログラミングを覚えたいのかい？またどうして。
いやな、バイトで先輩から10万行あるテキストから
特定のワードだけを抜き出して1つのテキストにしろって言われたんだよ。
何やら面白そうなことをしているね。
10万行かぁ……確かに人力でやろうとすると凄く時間がかかりそうだ。
そうなんだよ。この前手動でやってたんだが先輩に笑われちまってさ。
どうやったらいいか聞いたらヒントは「プログラミング」
とだけ言ってそれ以外何にも教えてくれないんだぜ。ヒデェ先輩だろ。
なるほど、確かにプログラミングが少しできる人間なら
作業を開始して10秒もかからずに作業が終わるね。
なにぃ！？10秒もかからずに終わるだと！？
PCの処理能力にも左右されるんだけどね。
それでも今の時代のPCなら十分だよ。
教えてくれトモカズ！プログラミングを！早く！
もうあんな眠たくなるような辛い作業はいやなんだ！
参考までに聞くけど、リキくんはプログラミングについてどこまで知ってるんだい？
あれだろ？黒い画面を出してバババーっと意味不明な文字を流して
キーボードを打ちまくってハッカーみたいなことしてるんだろ？
うーん、典型的な映画やメディアの影響を受けすぎた人間の思考だね（笑）
確かに黒い画面でキーボードを打ちまくるのはあながち間違いではないし、
リキくんがやろうとているテキスト処理はある意味それに近いよ。
で、あれは何してるんだ？
たぶん今のリキくんに説明しても理解してもらえないと思うから
まずはボクの知ってるプログラミングの基本を伝授するよ。
といってもボクも生粋のプログラマではないからあまり信じこみすぎないでね。
リキくんは10万行のテキストから特定のワードだけを抜き出して、
それを1つのテキストにまとめていくというバイトをしています。
先輩からは「プログラミング」とだけヒントを与えられました。
前々からプログラミングに興味を持っていましたが、
何から始めたらいいのかわからず幼馴染のパソコン結構詳しい友達である、
トモカズくんにヘルプを求めに来ました。
トモカズくんが言うにはリキくんはプログラミングのプの字もしらないので、
まずはプログラミングの初歩を教えていくことにしました。
メモ帳さえあれば君もプログラマーの仲間入り！
じゃあ早速プログラミングをしてみようか
え？何にも準備しなくていいのか？
リキくんのOSはWindowsだよね？
なら最初からメモ帳が入っているでしょ？あれを使うんだ。
メモ帳でプログラミングなんてできるのか！？白い画面だぞ！？
画面の色は関係ないよ（笑）
プログラミングというよりはスクリプティングだけどね。
スクリプティング？なんだそれウマいのか？
そんな典型的なボケはいいから……
プログラミングの一種だと思ってくれればいいよ。
メモ帳は起動した？
おう、開いたぜ。何を書けばいいんだ？
じゃあ次のコードを打ち込んでみて
<!doctype html>
<html lang="ja">
<body>
<h1 id="title">プログラミング入門の入門</h1>
</body>
<script>
console.log("こんにちは 世界");
</script>
</html>これってHTMLってやつじゃねぇのか？
……なんだ？このscriptってやつは
その「script」がさっき言ったスクリプティングってやつだよ。
確かにHTMLで合ってるよ。その中でプログラミングが出来るんだ。
マジか！？なんか難しい設定とかなんにもしなくても
プログラミングって出来るもんなのか！？
これはJavaScriptって言ってね
Webページ……つまりホームページ上で動いてくれるプログラミング言語なんだ。
Java？聞いたことあるぜ！アンドロイドアプリとか作れるだっけか？
確かにJavaScriptでもアンドロイドアプリを作ることは出来るけど、
リキくんの思ってるJavaとボクの言っているJavaScriptは別物だよ。
？？？？？
ま、まぁそのうち分かってくるよ。
それじゃあ早速書いたプログラムを動かしてみようか。
書いたコードを保存する時に、「index.html」と保存してみてよ。
「index.html」だな？……よし、保存したぜ？
よし、その保存したファイルを読み込みたいから何かブラウザを立ち上げてくれる？
GoogleChromeでいいか？
うん、Chromeの方がボクも説明しやすくて助かるよ。
さっきのファイルをD&Dでブラウザに放り込んでくれるかい？
あ、ドラッグアンドドロップわかるよね？
バカにすんなよ！それぐらいわからぁ！
ごめんごめん（笑）
仕事でそれすらもわからない人がかなり多いから聴くのが癖になっちゃってて
……システムエンジニアも大変なんだな。
よし、読み込めたぜ。「プログラミング入門の入門」とは出たぞ。
さっき書いた「こんにちは世界」は表示されてないぞ？
キーボードのF12を押してみて。
なんだぁ！？なんかワケのわからん文字がいっぱい出てきたぞ！？
トモカズ！これウィルスか！？
リキくん、ウィルスはわざと言ってるでしょ。
流石にバレたか。でもなんなんだこれは？
ディベロッパーツールといってね、開発者用に組み込まれた便利なツールだよ。
その中に「Elements」のよこに「Console」ってタブあるでしょ？
それを押してみてよ。
お、「こんにちは世界」って表示されているぞ！
こんなところに表示されるのか！
さっきscriptの中で「Console.log」って打ったでしょ。
その名の通りコンソールにログとして残してくれるんだ。最初に感じた通り、
普通の人には見えないようになっていて基本的には開発用に使うものなんだ。
でもこれでプログラミングって言えるのか？
まぁまぁ、これはプログラミング入門の通過儀礼みたいなものだから。
でも自分の書いたコードが動くのってちょっと面白いでしょ？
た、たしかに……ちょっとワクワクしたのはマジだ。
JavaScriptはプログラミング言語ではなくスクリプト言語といった方が正しいのですが、
最近のJavaScriptはホームページを動かすだけではありません。
サーバーを建てたりIoTにも使えたり、ゲームも作れてしまいます。
なのでプログラミング言語と言っても差支えのないほどの便利な言語です。
リキくんがやったようにメモ帳でコードを書いて、
ブラウザにD&Dをするだけで動いてしまうのもJavaScriptの凄い所です。
WindowsだけではなくMacでもLinuxでもブラウザとテキストエディタさえあれば動いてくれます。
今回はここまでにしておきましょう。
それでは。
