Webアプリ開発コース初級編
WEBサイトとミニアプリを作れるようになろう
- DAY 16JavaScriptの基本文法を学ぼう①
ここからは、JavaScript・jQueryの基礎学習編を進めていきます。より実践レベルの内容になり、難易度も大きく上がりますが、コーディングスキルをさらに昇華させたい方は、ぜひ挑戦してみてください！
今日は、サイトに動きをつける上で欠かせないJavaScriptを学びます。まずは以下の動画でJavaScriptとは何かについて学びましょう。
01.準備編
JavaScriptファイルの準備
それではJavaScriptとは何かについて学んだところで、実際にJavaScriptを書いていきましょう！
例) Discord名がtaroの場合はtaro_js-practice
まずはJavaScriptファイルを作成するところから始めましょう。
CSSでは「ファイル名.css」のように名前を付けたテキストファイルに書き込んだかと思います。 JavaScriptでも同じように「ファイル名.js」と名前を付けたテキストファイルを作成して、そこにJavaScriptを書き込んでいきます！
以下の手順で準備してください。
- 作業用のフォルダを準備してVScodeで開く
- 「index.html」ファイルを作成する
- 「js」フォルダの中に「script.js」ファイルを作成する
フォルダ構成はこんなイメージです↓
js-practice
┣ index.html
┗ js
┗ script.js
JavaScriptファイルを読み込む
ファイルが準備できたら、HTMLからJavaScriptファイルを読み込むための設定を行います。
まずはEmmetを使って「!」でHTMLの雛形を展開させ、タイトルを<title>JavaScriptの練習</title>に変更しておきましょう。
次に作成したJavaScriptファイルを読み込むためにHTMLへコードを追記します。
<script></script>タグとは、JavaScriptを埋め込んだり外部スクリプトを読み込むために使用するタグで、読み込む場所は、HTMLの</body>の直前になります。
コピー<script src="./js/script.js"></script>
</body>
</html>
読み込みができたら、script.jsにアラートを実行するコードを書いてみましょう。
HTMLファイルをLive Serverで立ち上げて、アラートが表示されれば、JavaScriptファイルを読み込むことができています！
コピーalert("Hello World");
02.文字列を表示してみよう！
JavaScriptで何か表示(出力)する方法は、大きく分けて3つになります。
- HTMLやCSSに出力
- コンソールに出力
- ダイアログボックスに出力
まずはconsole.log()を使って、コンソール画面にテキストや数字を出力していきましょう！
※コンソール画面とはJavaScriptを入出力できる場所のことで、エラーのデバックや、JavaScriptのテスト環境として使用されます。
これから出てくるJavaScriptやjQueryで使用するコードについては、基本的に公式やリファレンスにまとまっています。積極的にリファレンスで役割を理解してください！
- console.log() （リファレンス）
どちらでも問題ありませんが、「 " 」を文字列で出力する時は「 ' 」で囲みましょう！
コピーconsole.log('"デイトラ"');
//出力結果 "デイトラ"
03.数字の計算をしよう！
04.変数と定数
変数と定数の基本
スニペットとは単語登録のようなもので、何かの文字をキーにコード一式を登録しておき、簡単に使い回しできる機能のことです。
以下のコードをjavascript.jsonに貼り付けてみましょう。
コピー"Console Log": {
"prefix": "cl",
"body": [
"console.log($1);",
],
"description": "Console Log"
}
詳しくは、はにわまんさんの記事を参考にしてください。VSCodeにコードスニペットを登録して効率的にコーディング！
基本はconstでの定義がおすすめです。再宣言と再代入ができないため、意図しない書き換えによるエラーを防ぐことができます。
- const ・・・再代入と再宣言ができない
- let ・・・再代入ができて再宣言ができない
- var ・・・再代入と再宣言ができる
変数を文字列へ埋め込む
※動画ではfirstNameを山田、lastNameを太郎と定義していますが、一般的にはfirstNameが太郎、lastNameが山田となるべきです。
変数名はラベルであるため、プログラム自体は正常に動作します。