さてさて！これからJavaScriptをやっていきますよ！
JavaScriptが使えるようになると、ウェブサイトが一気に華やかなものに変身します。
アコーディオンメニューやスクロールアニメーション、スクロールトップボタンなど、ユーザービリティの向上にも欠かせません。
とってもわくわくしますね！
そもそもJavaScriptってどうやって始めればええんや？
という方へ向けて、JavaScriptの使い方を紹介していきます。
まずはファイルを用意するところから、どこにどう書いていくのか、事細かにやっていきますよ〜！
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！
それでは本文へ、レッツゴー！
① index.htmlを準備する
HTML/CSSの準備と同様、index.htmlを準備します。
それだけでいい！すごい！
PHPの場合、.htmlを.phpに変更し、プレビューを見るためにソフトをインストールしてローカルサーバーを準備する必要があるのですが、JavaScriptにその必要はありません。
HTMLのファイルにそのまま書き込むだけで実装することができます。
② JavaScript開始のサイン、scriptタグを準備する
JavaScriptの記述ルールとして、.htmlファイルに直書きする場合、<script></script>の中に記述していきます。
そしてそのscriptタグは、</body>の直前に設置します。
</body>の直前に<script></script>を書く！
サンプルコード
<body>
<h1>見出し</h1>
<p>こんにちは</p>
<!-- scriptタグはbody閉じタグ直前に記述する -->
<script>
// ここにJavaScriptの記述をしていく
</script>
</body>これで準備完了です！
あとはscriptタグ内に、JavaScriptの記述をしていくことで実装することができます。
JavaScriptでのコメントアウト
scriptタグ内でコメントアウトは
- // ●●●●
- /* ●●●● */
のいずれかを使うことができます。
// は自動的に有効範囲が1行になるのに対して、
/* */ は複数行コメントアウトすることができます。
<script>
// 1行コメントアウト
/*
複数行
コメントアウト
*/
</script>サンプルコードでJavaScriptを体験してみよう
とにかくまずは体験してみましょう！
これをindex.htmlに丸ごとコピペすることでJavaScriptを体験することができます。
ボタンをクリックすることでテキストの色が変わるめちゃしょぼイベントですが、これでJavaScriptの第一歩を踏み出します！
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptサンプル</title>
<style>
.lets_try{
color: red;
}
</style>
</head>
<body>
<button id="lets_try_button">ボタン（#lets_try_button）</button>
<p id="lets_try_text">いざ実践！（#lets_try_text）</p>
<!-- scriptタグはbody閉じタグ直前に記述する -->
<script>
// ボタンとテキストの要素を取得
const lets_try_text = document.querySelector('#lets_try_text');
const lets_try_button = document.querySelector('#lets_try_button');
/*
ボタンをクリックすることで色が変わるイベント
ボタンをクリックすることでpタグに.lets_tryがついたり消えたりする
*/
lets_try_button.addEventListener('click', function(){
lets_try_text.classList.toggle('lets_try');
});
</script>
</body>
</html>さすがにこの段階でJavaScriptの記述をいじってみるのは難しいので、適当にCSSの内容を変えてみましょう。
#lets_try_textにtransitionをつければふんわりと色が変わっていくし、.lets_tryにfont-sizeやfont-weightと付け加えたらそれもしっかり反映されます。
【おまけ】実際の現場ではscript.jsを用意する
勉強の段階なのでさほど気にする必要はないのですが、実際の現場ではscript.jsなどの.jsファイルを用意して、そこにJavaScriptを記述していきます。
cssもindex.htmlにstyleタグで記述していくことができますが、多くはstyle.cssを用意してそこにcssを記述しているのと同じです。
JavaScriptもscript.jsに記述して、それを読み込ませるのが一般的です。
main.jsだったりもします。
その際の読み込みも、body閉じタグ直前で行います。
<body>
<h1>見出し</h1>
<p>こんにちは</p>
<script type="text/javascript" src="パス/script.js"></script>
</body>JavaScript実装のまとめ
今回はJavaScriptへの第一歩を踏み出しました。
これからどんどん楽しくなっていきます！
それでは最後に少しだけまとめて、終わりにしましょう。
お疲れ様でした。
- HTMLのファイルがあればそれだけでJavaScriptは実装できる。
- </body>の直前に<script></script>を記述し、その中にJavaScriptを記述する。
