iconJavaScriptは昔からあるプログラミング言語ですが、特に近年ではウェブ技術の盛り上がりにともない、JavaScriptの人気も上昇しています。JavaScriptを学ぼうとすると、数多くの書籍・記事を見つけることができます。それらの多くはすでに他の言語でプログラミングを学習している人向けであったり、JavaScriptをもうすでに使っている人向けの小さなアドバイスであったりします。よってプログラミング初心者がJavaScriptを学ぼうとすると、様々な困難に直面します。体系的にまとまった初心者向けの文献を探すのは、骨が折れます。そこで、この連載記事では、いままでプログラミングを学んだことがない人を対象に、JavaScriptによるプログラミングを習得してもらうことを目標にしています。プログラミングの楽しさを、ぜひ体験してください。配列とオブジェクトオブジェクト指向データ構造とアルゴリズムHTMLとDOM(予定)未定プログラミング言語JavaScriptプログラミング言語の中で、JavaScriptはどちらかというと新しい部類に入ります。パソコンとインターネットが世の中に普及して、ウェブページを見るのが一般的になった頃に登場しました。ウェブページ上でプログラムを動作させるために作られましたが、近年ではパソコン上でブラウザを介さず実行したり、サーバ側のプログラムとして採用されるケースも増えています。JavaScriptは「インタプリタ型言語」と呼ばれるものの一種で、プログラマがプログラムを手動でコンパイル(※コンピュータが理解できる形式に変換)する必要がなく、実行時に逐次的に解釈してくれます。ブラウザさえあればどこでも動き、最近ではサーバサイドでも使われているという実行環境の広さと、コンパイル不要という気楽さを兼ね備えた言語で、初めに学ぶプログラミング言語としては扱いやすい性質を持っています。この連載について目的・目標JavaScriptを学ぶ目的は様々あるでしょう。「ウェブページをリッチにしたい!」「Reactを使ってウェブアプリを作りたい!」などです。残念ながらこの連載ではそれらは扱いません。この連載では、JavaScriptを使って、JavaScriptによるプログラミングそのものを学んでいただきます。JavaScriptの基本的な文法について、プログラミングを構成する概念について、あるいはデータの扱い方について、様々な切り口からJavaScriptプログラミングを取り扱います。しても地味な内容になりますし、「とりあえずなんとなくJavaScriptを使えるようになりたい」という人の期待にはこたえられないかもしれませんが、確実に実力はつきます。わけもわからずJavaScriptで何かを動かすだけなら、すでにネット上に大量に情報があふれています。それで大半の人の需要は満たせるでしょう。世の中にいるのはそういった人だけではありません。基礎知識をつけたいという人もいます。何か具体的な目標を持っている人にとって、プログラミング自体の概要を学ぶというのは遠回りになるかもしれませんが、愚直に学んでいきたいという人も存在するのです。この連載では、おおまかにですが、大学の1年生で学ぶ程度の基礎的な内容を取り扱います。言ってもプログラミングについてだけなので、数学や論理学などの要素を本格的に扱うつもりはありません。プログラミング外の知識が必要になる場合は、その都度解説するので、安心してください。開発ターゲット先述の通り、JavaScriptの実行環境は様々です。JavaScriptでプログラミングを学ぶ上では、どこか一点に環境を絞った方が効率的です。「ブラウザを使わずパソコン上で動かす」、プログラミングにおいては、これが本来は最適です。ブラウザなしで動かすには、コマンドライン(ターミナル)に慣れ親しむ必要があります。プログラミング初心者にとって、コマンドラインの黒い画面は恐怖でしかありません。加えて、プログラミングとコマンドラインの両方を習得する必要が出てきてしまい、学習の焦点があいまいになります。よって、この連載では、次善策となりますが、ブラウザとテキストエディタだけで完結する方法を取ろうと思います。ブラウザは普段から使用していますし、テキストエディタは誰にでも動かせる単純なものです。普段から使っている環境で、気楽にプログラミングしていきましょう。プログラミングの前準備ブラウザの準備ブラウザを使ってJavaScriptの開発をするにあたって、当然ですがブラウザが必要になります。あなたが今このブログを見ているブラウザを使っても構いませんし、新しいブラウザを入れても良いです。この連載ではChromeを使っていることを前提に話を進めていきます。Firefoxでも同じことができるので、そちらでも大丈夫です。SafariやEdgeなどでも、やろうと思えばできるはずです。どれを入れればいいか迷ったら、Chromeを入れましょう。エディタの準備JavaScriptを編集するには、テキストエディタが必要になります。テキストエディタはメモ帳などでもいいのですが、プログラミング向けのエディタを入手した方が、各種補助機能が搭載されていて、作業がやりやすくなります。今回はAtomというエディタを使います。Atomは以下のURLからダウンロードできます:Atom(https://atom.io/)Atomをダウンロードして、インストールしてください。Macだと生のAtom.appが出てきますが、Applicationsフォルダに入れておくと良いと思います。Atomのセットアップインストールできたら、さっそくAtomを起動してください。Atomでの開発環境を整えます。JavaScriptモードはAtomに最初から入っていますが、ブラウザで動作確認をする際のウェブサーバ機能が同梱されていないので、導入します。Settings)を開きます。開いた設定の中から「Install」を選びます。すると右側にパッケージ(拡張機能)のインストールメニューが出てきます。packages」という検索欄があるので、そこで「atom-live-server」と入力して、Enterを押してください。するとatom-live-serverというパッケージが出てくるので、Installを押して、インストールが終わるのを待ってください(それなりに時間がかかると思います)。インストールが完了したら、準備は完了です。必須ではありませんが、日本語のメニューが好みであるならば、japanese-menuも入れておくといいでしょう。今回学ぶのは、JavaScriptの基本要素と文法についてです。「変数」や「条件分岐」など、プログラミングを学んだことがない人でも一度は聞いたことがあるでしょう。聞いたことがなくても安心してください。各要素について、それぞれ解説いたします。これらのことだけではまだ高度なプログラムは組めませんので、今回の記事を読んだだけではいまいちピンとこないかもしれません。わからなければ「とりあえずそういうものだ」と保留しておいて、先に進んだときに何かがわからなくなったら、またこの記事に戻ってきてください。World!では、さっそく始めていきましょう!まず最初にすることは、作業フォルダを作ることです。ファイルはどこかに散らかしてもいいのですが、ひとつのフォルダにまとまっていた方が扱いやすいはずです。作る場所はデスクトップなどで構いません。フォルダ名は「jsprogramming」などでいいでしょう。作業フォルダを作ったら、Atomでそのフォルダを開きます。Folderから、先ほど作った作業フォルダを開きます。これでフォルダがAtomに認識されました!あとはここにファイルを追加していきます。Viewで再表示できます。JavaScriptを実行するためのHTMLファイル(ウェブページ)を追加します。File)を作ってください。ファイル名の入力画面が出てくるので、「index.html」と入力してください。このファイル名は固定です。Enterを押すとファイルが作成されます。</body></html>左の12345...はただの行番号なので不要です。これはJavaScriptを実行するためのウェブページで、6行目で「main.js」というファイルを読み込んで実行します。今回はHTMLについては知らなくても良いので、解説はいたしません。詳しく知りたい人は各自調べてください。次に「main.js」というファイルを作ってください。HTMLファイルで指定したファイル名ですね。この中にJavaScriptを書いていきます。serverを選択します。待つとサーバが起動して、ブラウザが自動的に真っ白いページを開くはずです。ページが自動的に開かれなかった場合は、手動でhttp://127.0.0.1:3000/にアクセスしてください。ウェブコンソール」を選んでください。コンソール画面が開かれるはずです。World!」と表示されているはずです。enabled.」はatom-live-serverの表示なので気にしないでください。ここにfaviconがどうのこうのというエラーが出ることがありますが、それは無視してください。出ない場合は、コンソールを開いたままページをリロードしてみてください。それでも出ない場合は、ちゃんとファイルを「保存」しているか確認してください。Atomのタブの右端に青丸がついていたら、「保存していない」合図です。Worldでは以下のコード(人間が読めるプログラムのこと。World!');プログラムは、基本的に上から下に順番に実行されていきます。各行に書かれているものを命令と呼びます。命令を上から順番に1行ずつ実行していき、最終行までたどり着けば終わりです。1行目から見ていきましょう。strict’;と書かれています。これは「JavaScriptを厳格モードで実行せよ」という印で、基本的には1行目に書きます。厳格モードというと難しそうなイメージがありますが、その実態は「バグ発見モード」のようなもので、バグにつながる軽率なコードを見つけるとエラーを出してくれます。初心者ほどありがたい機能なので、よっぽどのことがない限り厳格モードにしておきましょう。3行目はコメントと呼ばれるもので、これはプログラムに一切影響を与えない、全くの無意味なメモ書きです。コメントを使うには、スラッシュを2個続けて書きます。スラッシュ2個のあとは、行末までコメントになり、何を書いても無効です。純粋なコードだけでは「何をやっているのか」は人間にはわかりにくいものです。コメント(メモ)を入れてわかりやすくするのが、プログラミングのテクニックのひとつとなっています。4行目で、やっとプログラムらしい命令が出てきます。console.logは「コンソールに出力せよ」という命令です。World!を出力するように命令しています。各行の末尾にはセミコロン(;)がついています。これは命令の区切りを表し、セミコロンまでがひとつの命令となります。セミコロンを省略しても動くときは動くのですが、あまり行儀のいい方法ではないので、基本的にはセミコロンをつけておきましょう。World!の例では、文字列を出力しましたが、文字列だけではなく数値も扱うことができます。気づいている人もいるかと思いますが、文字列はシングルクォート(’)で括ります。JavaScriptではたとえ1文字だけだとしても、「文字列」です。数値として扱いたい場合は、特に何かで括ることはありません。そのまま書けば動きます。コンソールに42を出力するconsole.log(42);逆に文字列をシングルクォートでくくらないと、エラーとなります。これを実行する際、特に何もしなくともmain.jsへの変更を保存すればブラウザのコンソールへ反映されるはずです。反映されない場合はリロードしてみてください。serverでサーバを開始してください。値(あたい)文字列や数値といった、プログラミングで扱うデータのことを値(あたい)と言います。数値が値なのは直感的だと思いますが、文字列のことも値と呼びます。「10」は値ですし、「’Hi’」も値です。データのことは全部「値」です。数値は各種演算が可能で、足し算(+)、引き算(-)、掛け算(*)、割り算(/)、余り(%)、累乗(**)などが使用できます。ここで+や-といった演算記号のことを演算子と言います。数学のように括弧を使って優先順位を明示することもできます。3);文字列は結合演算子(+)が利用可能です。'World!');評価と式プログラミングにおいては、計算して値を得ることを評価すると言います。‘World’は’HelloWorld’として評価される」などという具合にです。値として評価されるものを、式と言います。‘World’」は式ですね。ややこしいですが、計算が入っていない単体の値も式となります。「1」も式ですし、「’Hello’」も式です。値のデータ型さて、ここで問題です。'34');3行目のconsole.logは、もちろん46が出力されます。これは簡単な足し算ですね。これはどうなるのでしょう。シングルクォートで書かれたものは、それがなんであっても「文字列」です。よって数字が書かれていても、それは数値ではなく、「数字の書かれた文字列」となります。文字列’12’と文字列’34’の結合となり、「1234」が出力されます。このようにして、数値と文字列では、全く異なる役割が与えられています。いったデータの分類のことを「データ型」、あるいは単純に「型」と言います。シンボルオブジェクト今のところ数値と文字列がわかっていれば問題ありません。JavaScriptではこれらたった7種の型を組み合わせてプログラムを作ります。JavaScriptはあまり型にうるさい言語ではなく、型が表面に出てくることはほとんどありません。’34’」のように挙動に違いが出てきます。プログラミングをする際は、型をしっかり意識しておきましょう。思わぬバグの原因になります。しても型を知りたい場合は「typeof」を使うことで、値の型を得ることができます。試しに数値と文字列の型を比べてみましょう。'12');これを実行してみます。3行目の「12」はnumber(数値)、4行目の「’12’」はstring(文字列)と表示されました。数値と文字列で全くの別物ということがよくわかりますね。変数プログラミングにおいて、値を生のまま扱うことはほとんどありません。一般的には値に別名をつけ、その別名で利用していくことになります。この、値の別名を実現する仕組みとして変数というものがあります。数学にも変数という言葉がありましたが、あれと少し似ています。1.7));これはなんらかの計算をしていることはわかりますが、一目見ただけでは何をやっているのか、なかなかわかりません。そこで、変数を使って別名をつけてみます。変数はconstというキーワードを用いることで作成できます。heightMeter);console.log(bmi);これで先ほどの計算が、「身長1.7m、体重65kgの人のBMIの計算」ということがわかりやすくなります。プログラムの挙動としての違いはありませんが、読みやすくなりました。値」という書式で書くことで、値に別名をつけることができます。ここでは「1.7」に「heightMeter」、「65」に「weight」という名前をつけています。変数名はアルファベットまたは一部の記号から始まる任意の名前で、先頭に数字を使うことはできません。変数名の途中や末尾に数字を入れることは可能です。変数名が複数単語になるときは、スペースは使えないので、単語の先頭を大文字にするという慣習があります。イコールの右辺は値だけでなく式も利用可能です。計算式はその場で値として評価(計算)され、変数名が割り当てられます。一度つけた別名は、好きなところで利用することができます。上の例ですと、bmiを計算するときに変数weightと変数heightMeterを利用しています。出力時に先ほど計算した変数bmiの値を出力しています。このとき、変数を作ることを「変数を宣言する」、変数に値を割り当てることを「変数に値を代入する」といいます。先ほどの例では宣言と代入を同時に行っています。constキーワードを使った変数宣言では、必ず代入が必要です。当然ながら変数も「プログラムは上から下に順番に実行される」の制約を受けます。変数を宣言・代入する前に変数を使用することは不可能です。10;変数を使うときだけに限りませんが、命令の実行順序には気をつけましょう。変数は同じ名前を多重宣言できません。20;変更可能な変数constキーワードで変数を宣言・代入すると、変数の値を変更できなくなります。一度変数に値を代入すると、ずっとその値のままということです。変数の宣言には実はもうひとつ種類があって、それはletキーワードを用いることで実現できます。letキーワードで宣言された変数は、後から何度でも値を変更可能です。27と表示される基本的にはconstと同じですが、letで宣言されると、変数に対して何度でも代入が行えます。後から変数に紐づける値を変更したいときに便利です。letキーワードで宣言された変数の値が数値である場合、インクリメント、デクリメントという機能が使えます。インクリメントは変数の値を1だけ増加させ、デクリメントは変数の値を1だけ減少させます。インクリメントは「変数名++」、デクリメントは「変数名–」と、変数名の後にプラスかマイナスをふたつ並べることで利用できます。インクリメント・デクリメントを前置する、プリインクリメント・プリデクリメントというものもあります。26通常のインクリメント・デクリメント(ポストインクリメント・ポストデクリメントとも言う)とプリインクリメント・プリデクリメントの違いを説明するのは少し難しいので、ここでは省略します。使う機会が来たら説明します。let変数を使用するとき、「今の値からxxxだけ増やす」「今の値からxxxだけ減らす」といった処理を使うこともあります。4;console.log(myAge);しかしこういった処理はよく使うので、短く書くことができるようになっています。「+=」や「-=」、「*=」という代入記号が使えます。undefinedになるとりあえず宣言だけして、代入は後から行うという場合に便利です。代入前でも変数は使用できますが、値がundefined(未定義)となります。使用してもエラーは出ませんが、意味のある値は得られません。実はJavaScriptには3つめの変数宣言が存在します。名前をvarと言います。varはかつて使われていた変数宣言で、現在は使用しません。使用すること自体は可能ですが、初心者にとって予測不可能な挙動を示すこともあるので、使用するメリットはありません。varについて詳しく知りたい人は「JavaScriptにおけるvar/let/constの使い分け」を読んでみてください。今までは数値と文字列という、我々にとっても馴染み深いものを扱ってきました。次に出てくるのはJavaScriptに存在する7つの型のうちの、真偽値という型の値です。真偽値はtrue(真)またはfalse(偽)となる値で、物事が真かあるいは偽かを示す値です。俗にいう「フラグ」というやつでもあります。