JavaScriptは、Webサイトに動的な要素を追加したり、アプリの開発ができたりするプログラミング言語です。
そのため、Webデザイナーやエンジニアを目指している方は、必須で覚えておきたい言語の一つです。
本記事で、JavaScriptの基本的な使い方から、応用的な使い方までを詳しく確認していきましょう。
JavaScriptを導入するための使い方
まずは、JavaScriptを使用する環境を整える必要があります。JavaScriptを導入するための、事前準備の方法について見ていきましょう。
テキストエディタを用意する
JavaScriptを書くためには、コードを記述するテキストエディタが必要です。高機能ながら無料で使えるVisual Studio Codeや、Atomがエディタとしての高い人気を誇ります。
これらのエディタは、コード補完や構文チェックの機能が備わっているため、初心者でも学習を進めやすいのが特徴です。
無料で使えるエディタも多いので、まずは使ってみて使用感を確認するのがよいでしょう。
JavaScriptを書く場所を用意する
JavaScriptを使うには、JavaScriptを書く場所を用意する必要があります。
JavaScriptのコードは、HTML内のscriptタグの中に直接書く方法と、外部ファイルとして保存してHTMLから読み込む方法から選択できます。
直接コードを書く方法だと、.jsファイルの作成やパスの紐付けが必要なく手軽ですが、外部ファイルの方がコードの管理がしやすいため、大規模なプロジェクトに適しているのが特徴です。
コードをたくさん書くような場合は、ファイルを別途用意する方がよいでしょう。
また、JavaScriptがどのようなプログラミング言語かを深く理解できていない方は、まずはこちらの記事でJavaScriptについて確認しておきましょう。JavaScriptの特徴について詳しく解説しています。
JavaScriptの基本的な使い方
まずは、JavaScriptの基本的な使い方をマスターすることが大切です。変数や関数などの基本的な使い方について見ていきましょう。
変数への代入
JavaScriptでは、varやlet、constを使って変数を宣言し、自由に値を代入可能です。例えば、「let x = 5;」とすると、変数xに数値の5が代入されます。
変数を使うことで、プログラムの実行中に何度も呼び出して使い回しができるため、効率的なコードの記述を実現できます。
また、JavaScriptで使われる変数の違いは以下の表のとおりです。
| 変数 | 特徴 |
| var |
|
| let |
|
| const |
|
letは、再代入可能な変数を宣言するのに使われます。constは、値の宣言後は再宣言も再代入もできないのが特徴です。
一方で、再宣言と再代入ができるvarはスコープの利用範囲が広く、予期せぬエラーが発生する可能性があるとして、公式から使用は非推奨とされています。
console.log
console.logは、JavaScriptでデバッグする際に便利な関数です。変数や計算結果などをブラウザの開発者ツールにあるコンソールに表示するために使用されます。
例えば、console.log(x);と書けば、変数xの値がコンソールに出力されます。変数の値を確認したい場合や、JavaScriptが問題なく動作しているかを確認するためによく使われる関数です。
また、引数を複数取ることができ、console.log(height, weight);とすれば、変数heightとweightの値を同時に出力することもできます。
alert
alertは、ユーザーにメッセージを表示するための関数です。alertを使えば、ブラウザ上でポップアップウィンドウが立ち上がり、引数に指定したメッセージが表示されます。
例えば、alert(‘Hello, World!’);と書けば、「Hello, World!」というメッセージが表示できます。
重要なメッセージを表示したい場合や、確認を促す場面などで使用されるのが一般的です。
コメントアウト
JavaScriptでは、コメントを使ってコードに説明を書いたり、メモを残したりできます。
1行だけコメントにするには「//」を使い、複数行をコメントにする場合は、コメントにしたい箇所を「/*」「*/」で囲みます。
コメントアウトはコードを無効化する際にも使われ、コードの検証をしたい場合にも便利です。
特に複雑なコードや、ほかの人が見る可能性のある部分には、積極的にコメントを残しておくようにしましょう。
JavaScriptの応用的な使い方
JavaScriptの基本的な使い方を理解したら、次は条件分岐やループ処理など、応用的な使い方を学びましょう。
これにより、より高度な処理ができるようになります。
JavaScriptの応用的な使い方について見ていきましょう。
if文
if文は、条件に基づいて処理を分岐させるための書式です。条件がtrueの場合に特定のコードが実行されます。
if （条件式） {
条件式が成り立つ場合に実行される処理
}
例えば、以下のコードでは、変数xの値が10より大きい場合にメッセージが表示されます。
console.log(‘xは10より大きい’);
}
また、条件が複数ある場合には、else ifやelseを使ってさらに条件を追加できます。
switch文
switch文は、複数の条件を簡潔に処理したい場合に使われます。条件の数が多くなるほど、if文よりもコードが見やすくなります。
switch (式) {
case 値A：
式が値A の場合に実行する処理;
break;
case 値B:
式が値B の場合に実行する処理;
break;
case 値C:
式が値C の場合に実行する処理;
break;
default:
式の値がどれも一致しない場合に実行する処理;
}
例えば、以下のコードでは、変数colorの値に応じて異なるメッセージを表示させられます。
case ‘red’:
console.log(‘赤’);
break;
case ‘blue’:
console.log(‘青’);
break;
default:
console.log(‘当てはまる色はありません。’);
}
今回のケースでは、colorの値がredなら赤と表示され、blueなら青と表示されます。
while文
while文は、条件式がtrueである限り、同じ処理を繰り返し実行する書式です。
while( 条件式 ) {
繰り返し行う処理
}
例えば、以下のコードでは、変数xの値が10未満の間、xを1ずつ増加させ続け、10以上になったら処理がストップします。
console.log(x);
x++;
}
while文は、繰り返し処理が必要な場面でよく使用されます。
しかし、条件が間違っていると無限ループが起こり、パソコンの操作ができなくなってしまうこともあるので注意が必要です。
JavaScriptの使い方はどういう人が学ぶ？
JavaScriptは、Webサイトやスマホアプリを開発したい方におすすめの言語です。
また、ほかの言語と比較して習得難易度が低く、日本語の情報も多くあるため、プログラミングを始めたい初心者が最初に選ぶ言語としてもおすすめです。
特に、フロントエンジニアを目指している方は、JavaScriptの使い方から学ぶことで、効率的にスキルを身につけられるでしょう。
また、サイト制作を学ぶならJavaScriptのほかにデザインソフトの勉強も必要です。
会社によっては分業ではなく、サイトのデザインから設計、動きの導入までを一人で行う場合もあります。
そのため、サイトに使うロゴやイラスト、そしてサイトのデザインカンプを作るためのデザインソフトの使い方も一緒に学んでおきましょう。
以下の記事では、サイト制作におすすめのデザインソフトである「Illustrator」の基本的な使い方について解説しています。
フロントエンドエンジニアを目指す方は、ぜひこちらの記事もあわせて確認してみてください。
JavaScriptの使い方を学べるおすすめのオンラインツール
JavaScriptの使い方を学ぶには、以下のオンラインツールがおすすめです。
- Progate
- ドットインストール
これらのオンラインツールの特徴について見ていきましょう。
オンラインツール①Progate
引用：Progate
Progateは初心者向けのオンラインプログラミング学習サービスで、JavaScriptの基礎から応用までの使い方について学べます。
豊富なスライドと実践的な課題が特徴で、視覚的に理解しやすいのが魅力です。
実際にコードを書きながら学習できるため、初心者でもスムーズに学習を進められます。
スマホアプリ版も用意されているので、隙間時間にゲーム感覚で学習できるのも魅力です。初歩的なレッスンは無料で提供されているので、まずは無料プランから学習を始めてみましょう。
オンラインツール②ドットインストール
引用：ドットインストール
ドットインストールは、3分間の短い動画を通じてJavaScriptの使い方を学べるオンライン学習サービスです。
短い時間で集中して学べるため、スキマ時間に少しずつ学習を進めたい方に最適です。
初級から中級、応用まで幅広いコンテンツが揃っており、ステップバイステップで理解を深められます。
さらに、プレミアムプランなら現役エンジニアに直接質問できるため、わからない箇所を解消しながら学習を進められるのも魅力です。
基礎的な導入部分は無料で使えるため、まずはどのようなレッスンがあるのか確認してみるとよいでしょう。
JavaScriptの使い方のまとめ
今回は、JavaScriptの基本的な使い方から、応用的な使い方までを解説しました。JavaScriptは、Web開発に欠かせないスキルです。
JavaScriptを使うには、テキストエディタの導入、変数や条件分岐の方法について押さえておく必要があります。
そして、効率的にJavaScriptの使い方を学ぶなら、オンラインツールを利用した学習法がおすすめです。
これからJavaScriptを学ぼうとする方は、ぜひ本記事の内容を参考にしてみてください。
