スマホ対応 誰でも簡単プログラミング講座 第1回 プログラミング言語の基礎 [初心者向けJavaScript解説 初級編]
【今回の動画】
【YouTubeプレイリスト】
【paiza.io】
今回からプログラミングに興味のある方に向けて、初心者向けの解説を行っていきたいと思います。
できるだけシンプルにわかりやすく説明し、スマホでも実行可能な形で進めていきますので、しばらくお付き合いください。
プログラミング言語
プログラムとは、コンピュータに対する指示の集合体であり、それはプログラミング言語と呼ばれる独特な言葉と文法に基づいて記述していきます。
この講座では「JavaScript」（ジャバスクリプト）という、今、最も需要が高いと考えられるプログラミング言語を用いて説明していきます。
準備
せっかくプログラムをつくっても、それを実際に動かす＝実行する環境がなければ意味がありません。
そこで、ここからは「paiza.io」（パイザ・アイオー）というウェブ上で簡単にプログラムを実行できるサービスを利用していきます。
ログインの必要なく、そのサイトにアクセスするだけで、すぐプログラムをつくり、すぐ実行できるという優れものです。
https://paiza.io/ja/projects/new
ご覧のURLにアクセスしてください。スマートフォンでも、問題なく表示されるはずです。
最初にアクセスした時点では、左上の緑のボタンに「PHP」と表示されているかもしれません。
これは別のプログラミング言語ですので、そのボタンをタップして「JavaScript」に変更してください。
これで、プログラムを実行する準備が整いました。
ちなみに、エディタの1行目と2行目にいろいろ書かれていますが、これはpaizaで必要な処理が記されているだけですので気にしないでください。
実際にあなたが自分のプログラムをする場合は、これの3行目から書いていきます。
プログラミング解説：変数
それでは、さっそく具体的なプログラミングについて解説に入っていきましょう。
最も初歩的でありながら、今後、最も必要になる「変数」（へんすう）についてです。
いきなり聞きなれない言葉が出てきましたが、気にする必要はありません。
妙な名前が付いているだけであって実際には単純です。
変数とは、一種の「データを入れる箱」です。
プログラミングでは、数値や文章などのデータを扱いますが、そのために一時的にデータを格納しておく箱が必要なのです。
変数の宣言
基本的にどのプログラミング言語でも、この変数を使うにはまず、「こういう名前の変数を使います」と「宣言」することが必要になります。
では、実際にpaizaで書いてみましょう。すべて半角英数で記入してください。
var example;
これだけです。
varは英語のvariableの略で、そのまま変数のことで、最後のセミコロンは処理の終わりを意味します。
つまり、これは「exampleという名前の変数＝箱を使います」と宣言しているだけなのです。
では、さっそくpaizaで実行してみましょう。「実行」ボタンをタップしてみてください。
本来、処理の結果は画面下部の「出力」に表示されるのですが、今回は何も変化がありません。
これは失敗したわけではなく、むしろ成功したからこそ何も表示されないのです。
プログラムに問題がある場合、ほぼかならず「エラー」が出ますが、それが出なかったということはイコール成功したということなのです。
さあ、これで皆さんは人生初のプログラムを実行したことになります。
これだけで「プログラミングをやった」といえるのです。
最も単純な内容ではありますが、これも立派なプログラムであることに変わりはなく、あとはこうしてひとつひとつの処理を積み上げていくだけなのです。
プログラミングの根本は、実は単純だということをおわかりいただけたでしょうか。
それでは今度は逆に、あえて間違えてみましょう。
「var」とだけ書き、変数の名前をつけずに実行してみます。
出力欄に今までなかった表示が出ました。これがエラーを示すものです。
今は「SyntaxError」という部分にのみ注目してください。
syntaxとは英語で文法を意味しますので、ここは「そもそもプログラミング言語の文法を間違えている」と指摘しているのです。
そう、プログラミング言語も一種の言語である以上、文法が存在するのです。
varを使った変数の宣言の仕方も、ひとつの文法です。
プログラミングでは、このように些細な間違いであってもエラーがはっきりと出るので、単純で問題点がわかりやすい一方、私たちがふだん使う言葉とは異なり、まったく融通がききません。
相手が足りない部分を推測して理解してくれるということがほとんどないのです。
「プログラミングでは文法を厳密に守る必要がある」と憶えておきましょう。
変数への代入
変数はデータを入れる箱だと説明しましたが、では、その箱に中身を入れるにはどうしたらいいのでしょうか。
それが「代入」（だいにゅう）です。
またわかりづらい言葉が出てきましたが、これも気にする必要はありません。
要は「変数にデータを入れることが代入」だと把握しておけばいいだけです。
実際のプログラミングでは、次のように書きます。
var example; example = 1;
ここでのイコールは「同じ・等しい」という意味ではまったくありません。
右の「1」というデータ（値）を左の変数「example」に入れるという意味です。
では、これもさっそく実行してみましょう。
出力には何も表示されません。エラーが出ないということは、宣言と同じく成功したということです。
また、変数の宣言と同時にデータを入れることもできます。
var example = 1;
このほうがすっきりする場合が多いでしょう。
ただ、このままでは変数の中身が実際に変化しているのか確認できません。
そこで、次のように記述します。
var example = 1; console.log(example);
console.logと書いたあとのカッコの中に、変数の名前を書いています。
これによって変数内の値、つまりデータを出力欄に表示することができるようになります。
試してみましょう。
「1」と表示されたはずです。
「console.log()」が何ものかについてはもっと学習を進めた段階で説明しますので、今はともかく「こういうものだ」と割り切って、気にしないようにしてください。
プログラミングの要点
ここまでの内容から、いくつかのことに気づいたかもしれません。
ひとつは、変数などの名前を、すべて単純な半角のアルファベットと数字、そして一部の記号のみで書くこと。
二番目は、各要素を半角スペースで区切ること。スペースは任意でいくつでも入れることができます。
A: × var my example; B: ○ var myExample;
ただし、変数などの名前を決める際、「my example」（A）のように間を空けることはできないので「myExample」（B）のように単語の先頭を大文字にし、つなげて書くことが多いです。
最後に、処理は上の行から順に実行されることです。
プログラミング言語もあくまでひとつの「言語」ですので、我々がふだん読む文章と同じなのです。
【ポイント】
- 半角英数のみ使う
- 半角スペースで区切る
- 上の行から順に実行
名前の付け方
また、変数などの名前の付け方にも注意点があることをお話します。
・すべて半角英数で書く
使える文字は次の3つのみです。
使用可能文字：すべて半角 アルファベット 数字 一部の記号
プログラミング言語は単純化のために、使用できる文字を限定しています。
・先頭に数字は使えない
先頭に記号を使うことはできますが、数字を使うことはできません。
OK: _example No: 1example
これも試してみましょう。
var _example; var 1example;
エラーが表示されたかと思います。
・大文字と小文字は区別される
大文字と小文字はまったく別の文字とみなされます。
つまり、次の2つの変数は別々に扱われます。
var myExample = 1; var myexample = 2; console.log(myexample);
これは「var」のような文法で使う言葉でも同様ですので、かならず小文字で書くようにしてください。
・プログラミング言語の文法で使う単語は使えない
プログラミング言語は、非常に単純化された言語です。
そのため、文法用に使われる単語を使ってしまうと、コンピュータの側はそれを文法を示すものだと判断してしまいます。
すでに出てきたvarなどがそうです。
したがって、一通り使えない単語を覚える必要があるのですが、プログラミング言語に対応したテキストエディタなどのアプリは、なんらかの単語を記入した時点でそれが使えない場合は明示してくれるので、いきなりすべてを頭に入れる必要はありません。
paizaのエディタもそうです。
では、試しに変数の名前にvarを使ってみましょう。
var var;
すると、エディタの左側に「×」マークが出たと思います。
これは「この行にエラーがある」ということを示しており、プログラムを実行する前に教えてくれているのです。
プログラミングに対応したエディタでは、このように作業をしやすくする機能が豊富にあるので、基本的にはこれらを使ってやっていくことになります。
【ポイント】
- すべて半角英数で書く
- 先頭に数字は使えない
- 大文字と小文字は区別される
- プログラミング言語の文法で使う単語は使えない
最後に
今回、皆さんは変数について学びました。
考えてみてください。
昨日まではプログラミングについてほとんど何も知らなかったのに、今ではもう変数の基礎について習得したのです。
これは、ひとつの大きな飛躍であり、言い換えれば成長です。
プログラムがひとつひとつの単純な処理の積み重ねであるように、人にとってのスキルも同じようにひとつひとつの積み重ねです。
それをくり返すことによってはじめて、いつの日か大きなことができるようになります。
皆さんのためにこの講座が、そのための一助となれれば幸いです。