JavaScript基礎を初心者向けに解説！必要なものや基本的な書き方
※本ページはプロモーションが含まれています。
JavaScriptは動的なWebサイトを表現できるプログラミング言語の1つ。
少し難易度を高く感じる方もいますが、PC上にブラウザとテキストソフトの２つがあれば誰でも簡単に扱うことが出来る言語です！
Web制作初心者の方でも、基礎を押さえれば簡単に導入可能。
今回は初心者の方を対象に、 Web制作におけるJavaScriptの基礎について解説していきます！
この記事の内容
- JavaScriptの基礎とできる事
- 必要な知識や準備物
- 基本的な書き方とファイル作成
- 基礎構文と使い方一例を紹介
なお、JavaScriptではHTMLファイルを常時併用します。
HTMLが全く分からない！という方は、お先にHTMLの基礎を押さえておくことを推奨します。
HTMLやCSSの基本に関しては下記の記事にまとめています。
この記事の内容
JavaScriptとは？基礎と出来ること
JavaScript（ジャバスクリプト）とはWebサイトだけでなく、ゲームアプリなどにも幅広く使われているプログラミング言語の1つ。
Javaという略称のような名称だけ似た言語がありますが、意味合いは全然異なるので注意してくださいね。
JavaScriptはHTMLやCSSと同じくクライアント側の言語として扱うことが可能で、ブラウザ上で処理・動作します。
そのため、PC上で特別な開発環境を設けなくても、初心者の方でも直ぐにコードを記述し動作確認することが出来ます。
Webサイト上のJavaScriptの役割
WebサイトでのJavaScriptの基本的な役割は、Web上のコンテンツを「動的に表現」することにあります。
例えば、バナー画像が横にスライドして切り替わったり、メニューを横から出現させたりといった手法はJavaScriptによるもの
です。
まとめると、下記のような芸当はJavaScriptによって実現されています。
- 画像のスライドショー
- ポップアップウインドウ
- 動きのあるグラフ
- ページ全体をフェードインさせる
- パララックス効果をつける
- その他アニメーション
この他にもJavaScriptで実現できる要素は沢山あります。
一先ず、Web制作におけるJavaScriptは、サイト上のコンテンツに動きやアニメーション効果を盛込める言語だという認識でOKです！
JavaScriptに必要な知識とツール
JavaScriptはローカル環境で動かせる言語なので、基本的にはHTMLやCSSと同じ要領で学習可能です。
そのため、主に下記の3点をPC上に備えておけば問題なく動作確認が出来ます！
- HTMLやCSSの知識
- テキストエディタソフト
- ブラウザソフト
JavaScriptに必要なHTML・CSS知識
JavaScriptを習得する前に必要なのがHTMLとCSSの基礎知識。
JavaScriptでは、HTMLのid属性を取得したり、CSSでよく使用するプロパティーの概念も加わります。
JavaScriptでアニメーション効果を付けるとき、基本的にCSSのプロパティー値とHTMLの構成で動作させます。
そのため、折角JavaScriptで正確なコードを記述出来ていても、CSSやHTMLの文法が間違っていれば全く機能しません。
HTMLの基礎文法やCSSで使用頻度の高いプロパティーや「親・子要素」といった知識に関しては、JavaScriptを学習する前に目を通しておきましょう。
テキストエディタがあると便利
JavaScriptのコードを記述するならプログラミングに特化したテキストエディタがあると大変便利です。
HTMLやCSSと比べ、JavaScriptでは文字列がより複雑化します。
テキストエディタは学習だけでなく実務でも使うツールなので、もしPC上に導入していない方はこの機会に取り入れる事をお勧めします！
ブラウザソフト
JavaScriptの動作を確認するのに必要なのがブラウザソフト。
Macやiphoneに標準搭載されているSafariや、国内外で需要が高いChromeなどの定番のラウザソフトを使うのがお勧めです。
なお、ブラウザソフト側で特別な設定をする必要はありません。
JavaScriptの書き方とファイル作成の基礎
ここからはJavaScriptの基本的な書き方や記述ルールについて下記のポイントで解説していきます。
- ファイルの作成
- 基本的な書き方パターン
- コメントアウト方法
実際にJavaScriptやHTMLのコードを記述するので、お時間のある方は是非PC上でテキストエディタとブラウザを起動して試してみてくださいね!
JavaScriptファイルの作成
最初にJavaScriptのファイルの作成方法から説明していきます。
JavaScriptファイルの作成自体はとても簡単で、HTMLやCSSと同じようにテキストエディタで拡張子を「.js」にして保存するだけです。
この中に専用のコードを記述していけば、JavaScriptとして機能します。
今回は下記のように、文字列を出力するプログラムを記述していきます。
document.write("<p>JavaScriptの基礎学習</p>");
こちらを「study.js」という名前で保存し、一例として使っていきますね。
JavaScriptの読込前の準備
JavaScriptのファイルが作成出来たら、次に任意の名前でフォルダを新規作成。
その中に「js」という名前でフォルダを作り、このjsフォルダ内に「study.js」のファイルをぶち込みます。
また、JavaScriptだけでは何も動作しないので、同時にHTMLファイルも作成。
最初に作成した新規フォルダに一緒に格納します。
この時点で、フォルダ内は「HTMLファイル」と「jsフォルダ」の状態になっています。
JavaScriptの基本的な書き方
JavaScriptは主に、HTMLファイルに直接記述するか、JavaScriptファイルを作成し外部から読み込ませるという２つの方法があります。
これを「直接定義」と「外部定義」と言います。
上記は少し堅苦しい表現ですが、CSSも「style」タグを用いてHTMLに直接記述出来たり、外部からの読込が出来ますよね。
それと同じように考えてもらえればOKです。
JavaScriptの場合は、「script(スクリプト)」というタグを用いて記述していきます。
外部から読込させる（外部定義）
まずは、JavaScriptを外部から読み込ませるという外部定義の書き方。
先ほど作成した、「study.js」というJavaScriptのファイルを使っていきましょう。
このJavaScriptファイルを読み込ませるには、HTMLファイル内に下記のように「script」タグでパスを指定し記述します。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>JavaScriptテスト</title>
</head>
<body>
<script type="text/javascript" src="js/study.js"></script>
</body>
</html>
ブラウザ画面で「JavaScriptの基礎学習」と表示されれば成功です。
このようにJavaScriptは一般的にbodyタグの中に上記のコードを設置します。
HTMLに記述（直接定義）
次にHTMLファイルに直接JavaScriptのコードを記述（直接定義）する方法です。
HTMLに直接記述する場合もscriptタグを利用します。このタグに囲われた箇所に直接JavaScriptのコードの記述が可能で、その内容が実行されます。
下記は、先に解説した外部定義と同じく「JavaScriptの基礎学習」の文字列を出力した一例です。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>JavaScriptテスト</title>
</head>
<body>
<script>
document.write("<p>JavaScriptの基礎学習</p>");
</script>
</body>
</html>
こちらもブラウザ画面で「JavaScriptの基礎学習」と表示されれば成功です。
コメントアウトの方法
HTMLやCSSと同様に、JavaScriptにもコメントアウトの機能があります。
JavaScriptのコメントアウトには、1行のみ指定できる「//」と複数行まとめて指定できる「/* */」の2種類があります。
//この行はコメント部分
//この行もコメント部分
/*
ここから
プログラムに一切反映されません。
ここまでコメント
*/
document.write("コメントアウトの方法");
指定された行はコメント扱いとなり、この部分はプログラムとしては機能せず、上記の例では「コメントアウトの方法」という文字のみが出力されます。
開発過程や後々の編集作業においてコメントアウトの機能は重要になるので覚えておきましょう。
JavaScriptの使い方や基礎構文
ここからはJavaScriptの基礎構文や関数、またその使い方について解説していきます。
下記はJavaScriptの基本的な文法や関数です。
- 文字列の出力
- アラートの使い方
- console.logの使い方
- 変数の基礎
- if文（条件分岐）の基礎
- for文（ループ処理）の基礎
文字列の出力
先にも解説したJavaScriptで文字列を出力するプログラムです。
下記のように、「ダブルコロン」で囲われたテキストがブラウザに出力されます。
document.write("<p>JavaScriptの基礎学習</p>");
アラートの使い方
JavaScriptでブラウザ画面にアラートボックスを表示させる事もできます。
アラートとは、ブラウザ上にメッセージ付きでポップアップ画面を表示させ、ユーザー側に確認を促すというものです。
下記のように「alert」を使い、「ダブルコロン」で囲われたテキストがメッセージで表示されます。
document.alert("アラートのテスト");
console.logの使い方
JavaScriptには「console.log」という関数を用いて、プログラムの実行内容の確認を行う事ができます。
JavaScriptの言語を用いてWeb開発する時の王道のデバック方法でもあります。
下記はconsole.log関数で文字列をを出力した例です。
console.log("こちらに任意の文字列");
//下記一例
console.log("コンソールログのテスト");
ブラウザのコンソール画面を開いて、任意の文字列が出力されていれば成功です。
コンソール画面の開き方
Google Chromeブラウザの場合「画面右クリック」→「検証」を選択し、左側にある「Console(コンソール)」というメニューをクリックします。
または、上部メニューの「表示」から「開発 / 管理」を選択。そして、デベロッパーツールを開くと上記の操作と同じ画面が表示されます。
変数の基礎
JavaScriptでは、「var・let・const」を使って変数を定義する事が出来ます。
変数とは、データや値を収納できるボックスのようなもので、必要に応じて利用する事が出来ます。
JavaScriptで変数を定義するには、下記のように「var 変数名 = 収納したいデータ(値);」という書き方をします。
var 変数名 = "変数名に代入したい値やテキスト";
また、変数を使うときは「変数名」を入力します。
変数の使い方一例
下記では「test」という変数名に「JavaScriptの基礎学習」を代入し、文字列を出力させています。
var test = "JavaScriptの基礎学習";
document.write(test);
if文（条件分岐）
JavaScriptによるif文（条件分岐）の基本的な書き方です。
条件分岐とは、英語のifと同じ意味合いで「もし(if)〇〇の時は、〇〇というプログラムを実行する。」という構文になります。
if (条件を記述) {
条件が満たした時の実行内容をここに記述;
}
PHP言語などの基礎を既に学習された方であれば、見慣れている王道の構文かと思います。
if文（条件分岐）の使い方一例
下記は40点未満を不合格とし、40点以上を合格とする条件分岐の一例です。
最初に変数名を「testscore」としています。
//40点未満は不合格という条件分岐
var testscore = 70;
if (testscore < 40) {
console.log("不合格です");
} else {
console.log("合格です");
}
条件分岐に使われている「<」は比較演算子の一つで、この場合だと40未満を意味します。
変数の値は70となっているので、「合格です」という結果になります。
for文（ループ処理）
JavaScriptによるfot文（ループ処理）の基本的な書き方です。
ループ処理とは、最初に決めた値を一定の条件下で繰り返し（ループ）処理をするというプログラムです。
for (初期値; 条件式; 加算式) {
条件式が満たされるまで加算式を繰り返し実行
}
先ほど解説したif文（条件分岐）の構文と同様に、他のプログラミング言語でも定番とも言えるプログラムです。
for文（ループ処理）の使い方一例
下記は、初期値を０とし、条件式と加算式で「３未満まで１を足し続ける」というループ処理にしています。
基本的にfor文ではこの形が使われます。
for (var i = 0; i < 3; i++) {
console.log("<p>" + (i+1) + "回目の処理を実行</p>");
}
初期値の０からループが始まるので、「0→1→2」で完了となります。
そのため、コンソール画面では下記のような結果となります。
<p>1回目の処理を実行</p>
<p>2回目の処理を実行</p>
<p>3回目の処理を実行</p>
この記事のまとめ
以上、今回はWeb制作初心者の方を対象にJavaScriptの書き方や使い方の基礎について解説いたしました！
JavaScriptはWebサイトで利用されていないのを見ない程に存在感の強いプログラミング言語の一つですが、難易度は決して高くなく、学習すれば誰でも習得できる言語です。
とくにWeb制作やアプリ開発に興味のある方は、この機会に是非JavaScriptの学習も取り入れてみてくださいね。
これからWeb制作やサービスに携わる方にとって少しでも参考になれば幸いです。
この記事を書いた人
