プログラミングスクールのドットインストールでJavaScriptのキーポイントを学習！
オンライン専用のプログラミングスクールの「ドットインストール」では様々なプログラム言語に対応したカリキュラムが用意されています。
プログラムの勉強をどこから始めたら良いかわからない方はまずドットインストールを訪れてみて下さい。
今回は実際にJavaScriptの講義に沿って勉強していく際のキーポイントをチェックしていきましょう。
まずは概要からみていきます。
JavaScriptはブラウザで使われる言語
そもそもJavaScriptとはどういうところで使われているのかというと、それは主にウェブブラウザー上です。
ウェブサイトに動的な効果を加えることができ、様々な装飾に使われている言語といえるでしょう。
より使いこなすことができたらゲームだって作れてしまいます。
用意するものは最低限ブラウザとメモ帳さえあればOKです。
「JavaScriptの開発環境」などで検索すると複雑な開発環境の作り方が出てきますが、それらは無視して大丈夫。
むしろ開発環境作りで妙なエラーに遭遇してやる気が消え去ることになる可能性すらあるのでやっぱりブラウザとメモ帳だけで十分です。
また、現在ではJavaScriptはサーバーサイドプログラミングにも使われるようになりました。
これはnode.jsというまた難しい領域に入ることになるのですが、ともかく使える範囲の広い言語と考えておいて良いでしょう。
間口が広く適用できる範囲も広いのがJavaScriptの特徴といえるかもしれません。
扱いやすすぎることの功罪
JavaScriptはプログラム言語の中でもかなり規則の緩い言語ということができます。
言い換えれば多少無理な記述をしてもエラーを出さずそのまま実行してしまうのです。
他のプログラム言語ではエラーが検出されるところでもJavaScriptなら通ってしまうことがあります。
そのため、一見正常に動いているようにみえても内部ではエラーが頻発しているなんてケースも十分に有り得るのです。
開発する際はきちんとコンソールを確認しながら行いましょう。
ただ、エラーとして表示されない異常な処理といったものもあるので難しいところ。
コンソールを見てもエラーの影は無く、正常に処理されているはずなのに挙動がおかしいといった場面に遭遇するようになるかもしれません。
そうなったら専用エディタを使ってみるのも良いでしょう。
異常な箇所が分かりやすくなる可能性があります。
JavaScriptは学習しやすいにも関わらず扱うのが難しい暴れ馬のようなプログラム言語です。
十分にこのあたりを警戒しつつ勉強することをおすすめします。
ログと3つのダイアログ表示
プログラム言語を勉強するときに欠かせないのが変数の値のチェックです。
JavaScriptの場合はこの変数の値を出力する際に簡単な方法としてログやダイアログ表示を使うことができます。
まずログの表示ですが、これは「console.log（"出力させたいこと"）;」でできます。
なおログはコンソールスクリーンに表示されるだけで、htmlやダイアログのように普通は見ることができません。
chromeの開発ツール上などで確認するようにしましょう。
ダイアログについては次の3つの関数が用意されています。
- alert（）;
- confirm（）;
- prompt（）;
alertはOKボタンのみのダイアログを表示します。
confirmはOKボタンとキャンセルボタンを備えたダイアログを表示し、OKを押せばtrue、キャンセルを押せばfalseが返る関数。
promptはconfirmに入力フォームを備えたダイアログを表示し、フォームに入力された文字を返しますが空白の場合はnullが返ります。
confirmではtrueとfalseなのにpromptではtrueとnullが返るというあたりは要チェックです。
またpromptの第2引数にはデフォルトの文字列を指定できたりします。
このあたりについてはドットインストールのJavaScript入門の第11回に書いてある形です。
基本的な処理は他の言語とほぼ同じ
プログラム言語には基本となる処理として「条件分岐処理」と「繰り返し処理」が存在します。
条件分岐処理とは「if文」や「switch文」による真偽値の判定によって処理を変えるというものです。
また繰り返し処理とは「for文」「while文」「while-do文」による設定した条件を満たすまで同じ処理を繰り返すというもの。
これらの処理は他のプログラム言語とJavaScriptでほぼ同じ形になっています。
そのため一度このあたりを覚えてしまえば他の言語でも十分に応用することができるでしょう。
このあたりの講義はJavaScript入門の6から10あたりでやっているのでしっかりと把握することをおすすめします。
関数の概念と使い方
プログラム言語では関数という処理のまとまりを作ることができます。
例えば同じ処理を別のプログラムでも使いたい場合、それを関数として切り離しておけば部品のように使えるというわけです。
また単にコードを整理するために処理を関数としてまとめることも行われていて、そうした関数はサブルーチンと呼ばれています。
JavaScriptでは基本的な関数として、渡された文字列の頭に「hello 」をつけるものを考えてみると以下のようになります。
- function hello（name）｛
- return “hello " + name;
- ｝
まず関数であることを示す「function」が付けられています。
次に「（name）」とありますがこれは引数です。
他のプログラム言語では数値や文字列など変数の型を指定するのが普通なので、既に他のプログラム言語を学んでいる方は違和感を感じるかもしれません。
なお使い方は「console.log（hello（hoge））;」といった感じで、出力すると「hello hoge」となります。
また、理解しにくいかもしれませんがJavaScriptにおいて関数はデータ型の一種なので変数に格納することができたりします。
その場合は以下のように関数名を省略することになる形です。
- var hello = function（name）｛
- return “hello " + name;
- ｝;
この関数のことを匿名関数や無名関数と呼びます。
処理自体はあくまで式の一種なので「｝」の後にセミコロンが必要です。
使い方は先の例と同じになります。
特殊な即時関数
まず他の言語では見ることのない関数の形としてJavaScriptには即時関数というものがあります。
これは関数全体を丸カッコで囲み、直後にまた丸カッコを記述するというもので、以下のような形で記述するのです。
- （function（name）｛
- return “hello “+ name;
- ｝）（）;
何がなにやらといった感じですが、みていきましょう。
この関数は名前の通り直ぐに実行されるのですが、それよりも大きなメリットとして「変数のスコープを限定できる」というものがあります。
即時関数内だけで有効な変数が宣言できて使えるので、他の処理に影響を及ぼさないようにできるのです。
例えば大規模な開発をする際に、うっかり同名の変数を宣言してしまったら処理がぐちゃぐちゃになってしまいます。
そうした事態を避けるときに、この即時関数が役に立つというわけです。
関数内でしか変数は有効ではないので、安全にプログラムを書いていけるでしょう。
このあたりの講義はJavaScript入門の12から14で行われています。
letを強く推奨
これは講義には書かれていないのですが、変数の宣言には「var」ではなく「let」を使うことを強く推奨します。
letとは2015年に策定されたJavaScriptの新しい機能の1つで、講義が作られた2014年の時点では使えませんでした。
letで変数を宣言するとスコープが限定され、重複した宣言を無効化してくれます。
正直なところこのletが生まれたことでJavaScriptは途轍もなく飛躍的に扱いやすい言語になりました。
varだとスコープが広すぎたり名前の重複を認めてしまうため訳の分からない処理が発生しやすいのです。
適宜自分でも調べていこう
letの例と同じように、JavaScriptも講義作成時点から進化しています。
講義のみを参照するのではなく、自分でも今の情報を調べながら勉強していくと良いでしょう。
プログラミングスクールに依存するのではなく、上手く利用する姿勢が重要なのです。
まとめ
ドットインストールのJavaScript入門講座に沿ってJavaScriptのキーポイントについていくつかみてきました。
プログラム言語を勉強する際のガイドとしてドットインストールの講座は非常に約に立ちます。
他のプログラミングスクールを利用するとしても、あわせて使っていきたいところ。
JavaScriptは扱いやすいのに扱いにくいというクセのある言語です。
ですが上手に扱えるようになればブラウザ上で色んなことができるようになるのでめげずに勉強していきましょう。