Introduction
「プログラミング」という名前でかっこよさそうだからやってみたいとか流行にのっかってやってみたい等という需要は最近増えているようだが、初心者に一番ハードルが高いのは環境構築だったりする。自分も小学生のころ自宅に常時接続のインターネットができて「プログラミング C言語」とかで検索して出てきたページを見ても、「Hello world」を表示させましょう、「押すな」というボタンを押したら「押したな」ってメッセージを出しましょうだの、さて一体これはいったいどこに向かっているのかが全く分からなかった。特に（その頃は）有償のコンパイラなんかを使っていた場合は、そもそもその実行環境すら手に入らなかったりした。（この手の入門サイトはある程度基礎が分かった人が読んで初めて役に立つと思う）
そこにきて中学、高校くらいのときにはまっていたのがJava Scriptだった。今考えてみるとかなり良い選択肢だったと思う。第一に環境構築がいらない。最悪でもメモ帳でHTMLとJava Sciriptを書いてブラウザで開けば実行できてしまう。第二に黒地に白文字というCUIベースのプログラミングだけではなくて、HTMLとCSSを組み合わせればちゃんとある程度実用的な、かつ目に見える形の結果が出てくるプログラムも組める。第三に、Web上に膨大な情報が転がっており、エラーメッセージを検索すれば大抵誰かが何がおかしいのか書き残してくれている。
大学に入ってC言語、Python、LabVIEW、MATLABなどに軸足が移っていったがここでタイミングも良いので少しまとめてみようと思う。なお、この記事のシリーズは高校数学のIIBくらいまでの知識を前提としており、パソコンの操作についてはフォルダの作成、ファイルの保存、拡張子、ブラウザでWebページを閲覧できる程度の知識を最低限想定している。また、OSはWindows 10を主に想定しているがmacOS, Linuxでも問題なく遂行できる。ブラウザさえ動けばスペックは不問である。ただし、今後示すサンプルコードを実行した場合、サンプルによってはループ構造などによってPCに一時的な高負荷をかける可能性もあるが、それはその旨を示し、読者の判断において実行してもらうものとする。
※ と言っておかないと何言われるか分からないので書いておく
Hello world
Hello worldなんかつまらないので先が見えない、とは書いたが重要であることには間違いない。というのは、Hello world自体には本来なんの面白みもないのだが、自分の書いたプログラムが動くという感触は最初の一回くらいは感動できる。また、実際にどのようにプログラムを書いて、どう実行すれば良いのかという一連の流れをつかむこともできるので、最初の第一歩としては重要というわけだ。
ソースコードの編集
大抵のプログラミング言語ではプログラムを英数字で書く。書いたプログラムのことをソースコードと呼ぶ。もちろんすべて日本語でソースコードを記述できるプログラミング言語もあるにはあるし、ほとんどの最近の言語は部分的に日本語を使えるようだが、日本語を交ぜると文字化けなど余計な面倒が増えるので初心者の場合は逆に英数字だけでプログラムを作るようにした方が楽な場合が多い。
では早速ソースコードを編集してみよう。ソースコードは様々なソフトウエアで編集できるが、テキストファイルを編集できれば基本的に何でも良い。極端な話、メモ帳でも良いがプログラミング目的には以下のようなエディタから好きなものを選ぶと良かろうと思う（もちろん無料）。下記は今回の用途においての筆者がおすすめする順
ここではNotepad++を例に紹介するが、どのソフトウエアを使っても手順は同じになる。新規作成して下の内容を入力する。なんならコピペでもよい。ちなみにここで左側に表示されている1,2,3というのは便宜上ついている行番号であり、入力する必要はない。また、<や>は半角の括弧であり、ダブルクオテーションマーク(“)も半角である。
<script>
document.write("Hello world!");
</script>入力したら「sample01.html」というファイル名で保存する。保存先のフォルダは自分が分かる場所であればどこでも良い。今後特に断りがなければ 、右上に表示されるファイル名が編集すべきファイルの名前になっている。
HTMLをどこかで使ったことがある人はこれは規格に則っていない（不正確な）書き方だと分かると思うが、実際これでHello worldをするのには十分なので関係のない余計な部分は極力省いている。
動作確認
保存したファイルをダブルクリックするとおそらくブラウザ（ChromeとかEdgeとか）が開くはず。もしInternet Explorerが開いた場合、今後色々面倒なので関連付けをEdgeやChrome, Firefoxなどに変えることを推奨する。
特に打ち間違いがなければブラウザの画面の左上にHello world!という文字が表示されているはずだ。
デバッグ
場合によっては、というよりおそらくほとんどの場合、プログラミングの大部分は実際にソースコードを書いているときよりも、どういう方法で書くのが効率が良いだろうかとか、実際に作ったものが動かないというのをひたすら直す作業（デバッグ）の方が時間がかかる。ここではデバッグの方法を紹介するために意図的に先ほどのソースコードに間違いを入れてみよう。例えば括弧閉じを忘れたとするとこんな感じになる
<script>
document.write("Hello world!";
</script>これをブラウザで開くと何も表示されない真っ白な画面になっていると思う。このように思ったように動かないときはエラーメッセージを読んでみる。Java Scriptの場合、エラーメッセージは「検証」画面を表示させることで確認できる。Google Chromeの場合、真っ白な部分を右クリックし、一番下の「検証」を押すとElements, Console, Sources, … といったタブがいくつかあり、それぞれでHTMLファイルの中身をデバッグできるようになっている。今回はJava Scriptのエラーなので、Consoleを開いてみる。
sample02.htmlの場合
sample02.html:2 Uncaught SyntaxError: missing ) after argument list
というエラーメッセージが赤字で表示される。これが何を意味するかを見てみよう
まずsample02.html:2という部分はsample02.htmlの2行目という事を示しており、そこでエラーが起きたといっている。次にUncaught SyntaxErrorではSyntaxErrorという種類のエラーが起きているといっており、具体的にはmissing ) after argument list「引数のあとの)がない」と教えてくれている。ここまで読むことができれば、この単純なエラーの場合に限っては括弧が閉じていないというのは一瞬で発見できるはずだ。
ちなみに SyntaxErrorというのは固有名詞的に出てきているが、そのまま直訳してよく、文法エラーということ。
もう少しまともな例
最初も言ったようにHello worldは一番最初の練習問題には良いが、「だからなんだ」という感じもある。以下に多少はまともな例、つまり
- Hello worldなどという無意味な文字列ではなく何かしら意味がある出力
- 自分の操作に反応
を含んだ例を示す。これを開くと[Show current timestamp]というリンクをクリックするとその下にクリックした瞬間の日時（秒まで）が表示される。
<script>
function show_timestamp(){
var date = new Date();
document.getElementById("output").innerHTML=date.toString();
}
</script>
<a href="javascript:show_timestamp()">[Show current timestamp]</a>
<div id="output"></div>次回
- 数値計算の例を通したループ構造の例
- ネイピア数（自然対数の底e）の数値計算
- モンテカルロ法による円周率の計算