最近、プログラム的な業務よりも編集的な仕事が多くて、JavaSriptとかしばらく触れてない状況だったりします。で、人間、どうしても触れていないと少しずつ忘れていってしまうもので、久々にやってみようといじったらエラーが出まくること…。というわけで、基礎的な部分から復習していこう思った次第です。
そもそもJavaScriptって?
JavaScriptとは、プログラミング言語のひとつである。Javaと名前が似ているが、異なるプログラミング言語である。
一般的に、プロトタイプベースのオブジェクト指向スクリプト言語であると言われている。しかし、コンストラクタなどのクラスベースに見られる機能も取り込んでいる。
実行環境が主にウェブブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。
オブジェクト指向とかあると難解なイメージが先行しがちですが、基礎的な部分ではそんなに難しいこともないですし、実行結果とかをブラウザで即確認できたりするので、プログラムを経験する上では手っ取り早い言語ではないでしょうか?
htmlファイルに組み込んで書ける
実際に学習・実践する際にも特別なソフトのインストールなどは必要ない=お金がかからない=敷居が低いのもポイント。プログラミングも極端な話でいえば、PCに付属しているメモ帳やテキストなどでも十分だったりします。
また、htmlファイルに直接書き込むことができるので、単純なものであればひとつのファイルで完結するのも、最初の頃にはわかりやすいと思います。
実際に書いてみる
文字ばかりでも楽しくないのでコードを書いてみましょう。プログラムのお約束といえば「helloworld!」だったりしますよね。まあ、実際は文字を画面に表示させるというのがはじめの一歩ということなんですけどね。
以下のコードをメモ帳などにコピペして、index.htmlのファイル名などで保存。それを実行(ブラウザ)してみてください。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <script type="text/javascript"> /*変数*/ var a; /*代入*/ a = "helloworld!"; /*表示*/ document.write(a); </script> </body> </html>
JavaScript部分をかるく解説
<script type="text/javascript"> /*変数*/ var a; /*代入*/ a = "helloworld!"; /*表示*/ document.write(a); </script>
scriptのタグで囲まれている中身がJavaScript部分。
- /*〇〇*/
→コメントアウトといい、プログラムとして認識されないようになります。メモ書きしたり、一時的にプログラム(コード)を外したりするのに使ったりします。
- var a;
→aという入れ物を用意しています。aという名前のついた箱みたいなものですね。
- a = “helloworld!”;
→aの箱に文字helloworld!を入れます。イコール(=)は左側に右側のものを入れると覚えてしまっていいかもしれません。
- document.write(a);
→aの中身を表示させます。今回の場合はhelloworld!という文字ですね。
改造してみる
コピペして実行してみたら、是非色々いじって改造してみてください。例えば…
- document.writeの部分を追加してみたらどうなるのか?document.write(“こんにちは!”);
document.write(a + “こんにちは!”); - a を b に変えてみる
→うまく表示されない場合は、どこかaをbに変え忘れているところがあるかも?
まとめ
プログラムの最初って、同じような内容なのですでに知っている事かもしれません。でも、やっぱりスタートはこのあたりからなんです。これを基礎に改造していったり、試していったりすることで、段々と理解が深まっていくと思います。まあ、僕自身のJavaScript復習も兼ねているので、すっ飛ばしてしまうところがあるかもしれませんが、これを機にプログラムに触れてみてチャレンジしてみてもらえると嬉しいですね。