【プログラミング入門の入門】条件に応じて分岐するプログラムの作り方
こんにちは。継続の錬金術士なおキーヌです。
ブログ毎日更新は203日目になります。
対話形式の入門記事を書いてみましたが、思ったよりも書いてて楽しいですね。
顔グラはそのうち更新します（笑）
第1回目は先輩に10万行のテキストを処理しろと言われたリキくんが、
SEをやっている旧友のトモカズくんからプログラミングについて教わることになりました。
メモ帳を使ってHTMLを書き、その中にJavaScriptを動かすことによって
リキくんは「こんにちは 世界」をすることでプログラミングに入門することができました。
本来はここからプログラミングの基本構文を学んでいくのですが、
余程興味の強い人間でなければここでプログラミング入門者が挫折してしまいます。
それもそのはずで、道具の使い方を延々と説明されても楽しくありません。
現実の道具の場合は使い方をちゃんと学ばないとケガをする可能性があるので、
ちゃんとした知識を学ばないといけませんが、プログラミングの場合は使い方を間違えたらエラーで止めてくれます。
なので道具の使い方だけを学ぶよりも、何かを作っていくことで道具の使い方を学んだ方が効率が良いのです。
リキくんは10万行のテキストを効率よく処理したいと思ってプログラミングを学ぼうとしています。
実はこれは結構良い例で、やりたいことに対してプログラミングでどうやるか。
そして何を使ってどうすればいいかを考えることが出来るのでプログラミング勉強法としては最適です。
ちょっと前置きが長くなってしまいましたね。
それではプログラミングの入門第２回目始めましょう。
数値と文字列の違いを知ろう
リキくんは10万行あるテキストをプログラミングで自動処理したいんだよね？
実際にやりながら教えたい所ではあるんだけど、そのまえに知っておかないといけないことがあるから
今日はそこから覚えてもらうよ。
おう！トモカズの教え方は上手いから助かるぜ！
ありがとう、そういってもらえると教える甲斐があるよ。
で、今日は何を教えてくれるんだ？
そうだね、じゃあまず問題を出すよ。
「100」と「”100″」の違いを答えてみて。素直に感じたことでいいよ。
ひゃくと”ひゃく”……違うと言ったらちょんちょんが付いているぐらいか？
うん、いい感じだよ。
じゃあ１とか２とか３とかのことは部類的に何て言う？
すうじ？
そう、数字。1であろうが10であろうが100であろうが数字だよね。
じゃあ、「”100″」は数字だと思う？
問題で出すってことは違うってことだよな……うーん……？
数字じゃないとしたら何なんだ……？
答えを言っちゃうと、”100″は文字だよ。
文字だぁ！？いやいや、どう考えても数字だろ？
文字って「あ」とか「い」とか「う」とかだよな？「”100″」が文字？？
正確には文字列っていうんだけどね。
プログラミングの世界では基本的にはちょんちょん、
つまりダブルクォート(“文字”)もしくはシングルクォート(‘文字’)で囲むと
数字であろうがお構いなしに文字列として認識するのさ。
なるほどな……わかったようなわからないような……
このへんの感覚はやっていると嫌でもこの感覚はつかめるようになるよ。
プログラミングって実際に動かしてみないと分からないことが多すぎるんだ。
100は数字で”100″は文字……いや文字列か。
文字と文字列の違いって何なんだ？
「あ」と「あいうえお」
どっちが文字でどっちが文字列だと思う？
！？
わかったようだね。
そう、文字とは文字列のうちの1つのことを指すんだ。
詳しく言うと「”1″」が文字で「”100″」という文字列は文字にすると「”1″」「”0″」「”0″」になるよ。
よくわかったぜ！
……で、これはいつ使うんだ？
今回これを教えたのはリキくんがテキスト処理をする上で
知っているのと知っていないのとでは労力がかなり変わってくるんだ。
よくわからんが、大事なのは分かった。
うん、今はそれぐらいでいいと思うよ。
文字列と数字の2つだけ覚えておいてくれたら上出来。
JavaScriptでは基本的に数字と文字列の２つになります。
CかC++ではシングルクォートで囲むと文字、ダブルクォートで挟むと文字列だったような気がします。
ここでは数字は0～9の数字のどれかを使えば数字という扱いになります。
文字列はトモカズくんが行ったようにダブルクォートで挟むと何でも文字列扱いになります。
名前を付けられる入れ物、変数を知ろう
文字列について少し理解したので、実際に文字列を扱うプログラムを書いてみようか。
よし来た！俺は実践派なんだ！早くやろうぜ！
それじゃあ前回のコードの続きに次のコードを打ち込んでみて。
<!doctype html>
<html lang="ja">
<body>
<h1 id="title">プログラミング入門の入門</h1>
</body>
<script>
// text1という箱に「JavaScriptはブラウザで動くよ」という文字列を入れる
var text1 = "JavaScriptはブラウザで動くよ"
// text2という箱に「JavaとJavaScriptは別物だよ」という文字列を入れる
var text2 = "Javaはまったく別のプログラミング言語だよ"
// text1に「Script」という文字列が含まれているかどうかを調べる
if text1.indexOf("Script") !== -1 {
// 条件が一致したらコチラを表示する
console.log("text1には 「Script」 がふくまれているよ");
} else {
// 条件が一致しなかったらコチラを表示する
console.log("text1には含まれていないようだ");
}
// text2に「Script」という文字列が含まれているかどうかを調べる
if text2.indexOf("Script") !== -1 {
// 条件が一致したらコチラを表示する
console.log("text2には 「Script」 がふくまれているよ");
} else {
// 条件が一致しなかったらコチラを表示する
console.log("text2には含まれていないようだ");
}
</script>
</html>な、なんだ！？一気に呪文っぽくなったぞ！？
トモカズ、助けてくれ！ヘルプミー！箱ってなんだ？条件ってなんだ？
リキくん、少し落ち着いて。
確かにプログラミング完全初心者には難易度が高いかもしれないね。
でも、1つ1つじっくり勉強するか、実際に使って覚えるかどっちがいい？
ぐっ……俺は実践派なんだ……小難しい勉強は眠くなるからなるべくしたくねぇぜ……
スーハーッ！スーハーッ……よし！落ち着いたぞ。
1つずつ説明していくね。といってもコメントで日本語で説明しちゃってるんだけど入門の入門だからちゃんと説明するよ。
まずどこが分からないかおしえてくれる？
全部だ！……と言いたい所だが、よく見ると条件が一致したら～っていうのは指定した条件に合っているかいないかを調べているっていうのは何となくわかる。
それと前回やったコンソールログ？で条件に合うどちらかを表示するっていうのもわかるぞ。
なんだ、もうほとんど分かってるじゃないか。
恐らく、この最初の「箱」ってところが意味不明なんだよね？
そう！それ！文字列を箱に入れる？いみわからないんだが。
箱というのはイメージの問題だよ。実際に箱に入れるわけじゃないんだけど例えるなら
液体って１つや２つで数えられないでしょ？
でも入れ物に入っていると１つや２つって数えられるようにならない？
た、確かに……水1つ欲しいって言うとペットボトル1本とかコップ1杯分で貰うことになるな。
プログラミングの世界でも、文字列と数字は箱に入れて使うのが基本的なんだ。
でも液体じゃないから箱に入れなくても使えるっちゃ使えるんだけど、
そこだけでしか使えなくなってしまうんだ。
ってことは箱に入れるとどこでも使えるようになるのか？
厳密にはどこでもっていうのは無理なんだけど……
もうちょっとわかりやすく言うと、例えば巨大な倉庫に保管している商品を取ってきてほしいと言われた時、
リキくんならどうやってその商品を探す？
そりゃお前、PCで管理してるなら商品名を検索してどこにあるか調べるか、
実際に倉庫に行ってラベルが張られている……
！
さすが実践派のリキくん。もうわかったようだね。
そう、パソコンで検索するにも部類分けしてデータベースにしないと検索できないし、
ラベルが張られていないダンボールは開けてみないと何が入っているかわからない。
なるほどな……
今回の例で言うと「text1」っていう名前の付いた箱に「JavaScriptはブラウザで動くよ」という文字列を入れているので
「console.log(text1)」ってやると何が表示されるかわかる？
text1……じゃないな。それだと箱に文字列を入れた意味がないよな。
ってことは「JavaScriptはブラウザで動くよ」が表示される！？どうだ！
お見事！正解だよ。
この「text1」という名前の箱はプログラミング用語で変数というんだ。
変数？変な数ってことか？
うーん、「変な」っていうより「変化」って覚えた方がいいかな。
正直そこは覚えても仕方のない所だから、変数は固有の名前が付いた入れ物って覚えておいた方がいいよ。
そしてパソコンはその箱の名前をすべて記憶しているから、その名前を指定すれば中身を教えてくれるんだ。
だから箱の名前を渡したら中身が表示されるのか！
そのとおり。今回は「text1」って変数に文字列を入れたけど数字やいろんなものを入れられるんだ。
今は変数とは文字列と数字を入れて名前を付けて管理できる箱と覚えておくといいよ。
ってことは変数を渡せば毎回同じ文字を書かなくてもいいってことだな！
長ったらしい文字を何回も書かなきゃいけないのは面倒くせぇから助かるぜ！
そう、その考え凄く大事だよ。
プログラミングって面倒くさがりな人ほど上達が早いとボクは思っているよ。
じゃあ俺にピッタリだな！
うん、リキくんはプログラミングの才能があるね。
あとは時間をかけてやっていけばボク以上のプログラマになれるとおもうよ。
それは言いすぎだろ(笑)
そんなことないよ。現にリキくんは10万行あるテキストを仕分けする作業が面倒くさいから、
プログラミング覚えたいって言ってボクのところに来た時点でプログラミングを覚えようとしたボクより遥か先に進んでいるよ。
文字列の中に特定の文字列があるかを調べよう
なぁトモカズ。変数についてはわかったんだけどよ、この「indexOf」って何なんだ？
リキくん、text1って何だっけ？
？？
文字列が入った変数だろ？
そう、正確には「文字列型」のデータが入っている変数っていうんだ。
文字列”型”？なんだそりゃ？
ゲームで例えるとジョブみたいなもんだよ。戦士は魔法は使えないけど魔法使いは使えるでしょ？
あぁ、戦士は魔法が使えない分攻撃力が高かったりするな。
それと同じで「文字列型」にしか使えない魔法があるんだ。
文字列型って魔法が使えるのか！？
うん、文字列型は「indexOf」という魔法で自分の箱の中に指定した文字列があるかどうかを調べることが出来るんだ。
なんかしらんが魔法が使えるのは凄いな。
この魔法をプログラミング用語でメソッドっていうんだ。
他にもたくさんのメソッドが使えるんだけど沢山ありすぎて全部覚えるのは無理だから、
必要な時にこんなメソッドはないかなって調べるぐらいでいいと思うよ。
なるほど、ゲームで言うところのいっぱい魔法は覚えているけど毒状態になってから治療魔法を探せばいいって感じか。
その通りだね。「indexOf」の話に戻るけどこれで「Script」という文字が入っているか調べているんだ。
入っていた時と入っていなかったときにはどうなるんだ？
入っていれば見つかった位置の先頭の数値を返してくれるよ。
「JavaScriptはブラウザで動くよ」だと文字数で言えば19文字あるでしょ？
プログラミングの世界では１からではなくて０から数えるのが常識だから０=J，１=a，２=v，３=a，4=Sって感じで見つかったら4という数値が返ってくるよ。
そして見つからなかった場合は問答無用で「-1」という数値を返してくれるんだ。
プログラミングの基本、条件式の使い方を覚えよう
なるほど、あとindexOfと-1の間にある 「!==」ってのも意味不明なんだけど
それは比較演算子といって、算数や数学でいうイコールとかと同じ意味だよ。
プログラミングでは＝はイコールではなく、右のモノを左に代入するって意味なんだ。
だから比較するときはイコールを2つ並べることで差別化しているんだよ。
indexOfが-1を返したら右にある-1と同じだから条件は一致するって感じか？
うん、正解！
でも今回はその前に！マーク、エクスクラメーションマークが付いているよね？これはなんだと思う？
ビックリマーク……びっくりする……つまり意表を突いて逆にするということか？
面白い発想をするね。ボクはエクスクラメーションマークを付けると「否定する」と先に覚えちゃったから深く考えたことが無かったや。
ってことは正解だな＝＝は数学で言うイコールってことは左と右は同じってことだよな。
！を付けると逆にするという事は……左と右が同じじゃない！？
ご名答。そしてif~は英語で言うと「もし～」だよね。
JavaScriptには無いんだけどプログラミングでは「if~then」ってのがセットなことが多く「もし～なら」という意味になるんだ。
繋げると、もしtext1.indexOf(“Script”)と-1が同じじゃないならって意味になるのか？
だとするとtext1には「Script」って文字列があるから-1じゃない。つまり条件に一致しているということになるのか！
そう、下にある「else」ってあるでしょ？あれは「そうでないなら～」って意味になるんだ。
つまり条件に一致すれば最初の｛｝の中にある処理が動いて、一致しなければelseの後にある｛｝の中にある処理が動くというわけさ。
もう一度ソースコードをみてみようか。
~~~ 省略 ~~~
<script>
// text1という箱に「JavaScriptはブラウザで動くよ」という文字列を入れる
var text1 = "JavaScriptはブラウザで動くよ"
// text2という箱に「JavaとJavaScriptは別物だよ」という文字列を入れる
var text2 = "Javaはまったく別のプログラミング言語だよ"
// text1に「Script」という文字列が含まれているかどうかを調べる
if text1.indexOf("Script") !== -1 {
// 条件が一致したらコチラを表示する
console.log("text1には 「Script」 がふくまれているよ");
} else {
// 条件が一致しなかったらコチラを表示する
console.log("text1には含まれていないようだ");
}
// text2に「Script」という文字列が含まれているかどうかを調べる
if text2.indexOf("Script") !== -1 {
// 条件が一致したらコチラを表示する
console.log("text2には 「Script」 がふくまれているよ");
} else {
// 条件が一致しなかったらコチラを表示する
console.log("text2には含まれていないようだ");
}
</script>
</html>おおお！なんか頭の中で知恵の輪が解けたみたいな感覚になったぞ！
じゃあ次のtext2はもう意味が分かるよね？
任せろ！……text2には「Script」って文字がどこにもない。
つまりindexOfを使うと見つからないから-1が返ってくるわけだ。そして条件式は「-1じゃなければ」だから一致しなくなる。
だから「else」の｛｝の中の方が動く！どうだ！
完璧だね。流石リキくんだ。飲み込みが早くてなんかボクまで嬉しくなるよ。
だから言ったろ！俺は実践派なんだ！ま、ぶっちゃけトモカズの教え方が上手いだけだけどな(笑)
最初見た時はまるで高校時代の数学の意味不明な式を見せられた感覚に陥ってたのに不思議なもんだな。
プログラミングは算数や数学と同じで、公式の使い方を知らないと解けないのと同じなんだよ。
むしろ難しい計算はコンピュータがやってくれるから数学よりも簡単だよ。高度なプログラミングになると組み上げるのは難しくなるけどね。
そこにたどり着く気はないな(笑)
実は難しい処理は凄い人が1つのメソッドにまとめてくれてボクたちはそれを使えば簡単にすごいことが出来ちゃうんだ。
だから組むことは難しくても、プログラミングの基本さえ掴んでいれば難しいことをしなくてもメソッドを呼び出していくだけで凄いものを完成させられたりするんだ。
そんなすごいものを無料で使えるのか？
色々言いたいことはあるけど、基本的には無料で基本的なことを守れば自由に使えるね。
最近AIを自分で作ることが出来るのも、そういった凄いものを無料で公開してくれているお陰だよ。
AIかー面白そうだな！俺の仕事全部自動でやってくれるAIを作りたいぜ！
そうだね。AIの目指すところはそこなんじゃないかなって思うよ。
よくAIに仕事が奪われるとか言っているけど、仕事はAIに任せて人間は楽するべきだよ。
でもなんか映画とかゲームでAIの反逆ってあるだろ？ああいうのは起こったら怖くね？
確かに。最近はAI同士が会話して人間が理解できないところまできているって話を聞いたことがあるよ。
SF映画のようにAIの反乱がくるかもしれないし、絶対に来ないと唱えている人もいるんだ。
……なんか凄い時代だな。
AIの話になると長くなるのでここで切ります(笑)
今回は文字列の中に特定の文字列が含まれるかを学びました。
覚えたことは
- 変数の概念
- 変数の型(今回は文字列型)
- 型の持つメソッドの使い方(indexOf)
- 条件分岐
- ＝＝という比較演算子
- ！を付けると否定の意味になる
の６つですね。
トモカズくんが言うように1つずつプログラミングの基本構文(変数やif等)を覚えていくより、
こうやって実際にやりたいことを通して使っていく方が意味も分かるし必要なんだなって体感できます。
プログラミングは基本構文を使えるようになったら後は凄い人が作ったメソッドの集合体(ライブラリ)を使って
条件に応じて呼び出したり変数に格納して呼び出したりすれば初心者でもすごいプログラムを作れてしまいます。
覚えにくいことは無理に覚えずググればいいですし、
打ち込むのが面倒くさい場合はコピペをして改変すればいいです。
プログラミングとは検索力とコピペ力が最も大事だと私は思っています。
