JavaScriptの基本構文や特徴などについて調べました!
まず初めに JavaScriptとは?
JavaScript（ジャバスクリプト）とは、Webサイトやシステムの開発などに使われているオブジェクト指向のプログラミング言語
のことで、私たちが普段目にしているWebサイトの多くは、JavaScriptが使われて作成されています。
例えば、Webサイトを見ているとき、ポップアップ広告や画像が横に流れていくなど、Webサイト上で
アニメーションが動いていることがあると思います。 あのようなブラウザ上での動きに対して指示を出し
ているプログラミング言語がJavaScriptです。また、こういったWebサイトに動きを付けるためのもので
あったJavaScriptも、最近ではサーバーサイド、スマホアプリ、デスクトップアプリの開発にも使われています。
JavaScriptの基本構文
1.デバックメッセージを表示する
開発者ツールにメッセージを表示するには以下の様なコードを書きます。
console.log('Hello World');
シングルクォーテーションで囲まれた内容が開発者ツールに表示されます。
「変数aが定義されていません」など、プログラムの状況が分かるようなメッセージを
表示させるとスムーズに開発ができると思います。
2.コメントアウトする
1行のプログラムコードをコメントアウトしたいときは以下の様なコードを書きます。
// コメントアウト
また、複数行をコメントアウトしたいときは以下のようなコードを書きます。
/*
コメントアウト1
コメントアウト2
*/
必要なくなってしまったコードや、一瞬だけいらないコードなどをいちいち消したり書いたり
するのではなく、コメントアウトで無効化すると開発がスムーズに進むと思います。
3.変数、定数を宣言する
まず、定数を宣言したい場合は以下の様なコードを書きます。
const num1
定数を宣言するときは定数の前に「const」をつけます。
また、変数を宣言する時は以下の様なコードを書きます。
let num2
定数や変数は「const」や「let」のあとに定数や変数を書くことで宣言できます。
定数は後から値を変更できず、変数は値を変更できます。 定数と変数をうまく使い分けると
開発中のミスを減らすことができると思います。
また、定数や変数を宣言するときは多くの場合、データの型を明示する必要がありますがJavaScriptでは
明示する必要はありません。 これはJavaScriptでは自動的にデータの型を判別してくれるからです。
4.条件分岐
条件によって処理を変更したい場合、以下のようにプログラムを書きます。
let num1 = 10;
if(num1 == 10){
console.log('ok');
}else{
console.log('no');
}
()の中に条件を書き、{}の中に処理を書きます。ifに続く{}の中には条件が成立した時、
elseに続く{}の中には条件が成立しなかった時の処理を書きます。 つまり上のプログラムでは
num1が10の時「ok」を、そうではない時に「no」を表示するわけですね。
また、「else」ではなく「else if」と続けることによって条件を追加することもできます。
5.ループ処理
回数を指定してループ処理を行いたい場合以下の様なプログラムを書きます。
for (let i = 0; i < 10; i++) {
console.log(i);
}
for文では()の中で条件に使う変数の定義、条件、変数の変更、｛｝のなかで処理を行います。上のプログラムでいうと
「let i = 0」で条件用の変数を定義、今回はiという変数を0に定義しています
「i < 10;」で条件を定義、今回はiが10未満の時処理を行うということです。
最後に「i++」では変数の変更を行っています、「i++」はiに1を足すという構文で、
この場合繰り返すたびにiが1ずつ加算されていくという意味です。
また、iは繰り返すごとに変更されていくので、上のプログラムでは
0
1
2
・
・
・
9
と表示されます。
この構文は回数が最初から決まっている時に有効で、10回繰り返すなど繰り返しの回数を
指定できるときに使うと便利です。
逆にループ処理を条件によって管理したい時や、繰り返す回数が決まっていない時にはwhile文が
有効です。
let num1 = 100;
while (num1 >= 0) {
console.log(num1);
num1 -= 1;
}
while文では()のなかで条件を定義、｛｝のなかで処理を行います。
上のプログラムではnum1が0になるまで処理を繰り返すということで、
出力は
100
99
98
・
・
・
1
0
の様になります。 上でも書いた通りこの構文は繰り返しを条件式などによって管理するのに向いています。
しかし終了条件をちゃんと記載しないと無限ループになってしまったりと、扱いには注意する必要があります。
JavaScriptの特徴と得意分野
ここではJavaScriptの得意なことや特徴について解説します。
- 動的サイトの作成が得意!
始めの方でも書きましたが、JavaScriptはHTMLやCSSとの連携が強くWebサイトの作成に向いています。
特にWebサイトに動きを付けること、画像にアニメーションを追加したりボタンをクリックしたらページを
切り替えることなどが得意です。
- 応用分野が広い!
JavaScriptは応用分野が広いことも特徴です。 ライブラリという拡張機能のようなものを利用する
必要はありますがWebサイトに動きを付けることはもちろんゲームの開発や、モバイル・デスクトップアプリの開発、
サーバーの作成まで幅広く活用することができます。
- 学習しやすい!
JavaScriptは学びやすく習得しやすいことも特徴の一つです。
JavaScriptは昔から存在するプログラム言語であり学習に利用できる情報が豊富に手に入ります。
また、文法が柔軟であるのも特徴であり、ほかのプログラム言語で必要なことが多いデータ型の指定が
必要ないことや、文末の「;」が省略可能であることなどJavaScriptはプログラムを書きやすいです。
JavaScriptが使われているもの
下で用いられているアイコン等はそれぞれのサービスをイメージしてAIなどで作成したものです。
ご了承ください。
- Visual Studio Code（VScode）
プログラムを書いたり、小規模の開発に便利なマイクロソフト製エディター、VScodeですが実は
JavaScriptが用いられています。 正確にはTypeScriptというJavaScriptの拡張版を用いて
開発されているのですが、TypeScriptは最終的にJavaScriptに変換されるので紹介しました。
もっと細かく解説するとHTML、 CSSも用いて作成されています。
- Instagram
SNSとして幅広い層に人気があるInstagramもJavaScriptが用いられています。
正確にはJavaScriptを使用したフレームワークを用いて作成されていて、リアルタイムで更新されるUIを
スムーズに更新することに生かされているそうです。
- Netflix
動画配信サービスとして有名なNetflixもJavaScriptの一部ライブラリを使用して作成されています。
ReactというJavaScriptのライブラリを用いて作成されていて、ビデオの再生など多くの処理を行いながら
快適なサービスを提供するのに役立っています。
さいごに
今回は有名なプログラミング言語であるJavaScriptについて様々な視点から調べてみました。
私自身も知らないことが多かったので今回調べてよかったと思います。
今回の内容で、これを読んだ方々の知識が少しでも深まればうれしいです。
本コンテンツの作成時間（HTML/CSSの設計・実装を含む）：約11時間
参考文献