JavaScriptとは
まずJavaScriptとは、webブラウザ上で動くプログラミング言語です。
Webサイトといえば、htmlとcssで構成されますが、サイトに動きを加える際にJavaScriptを使用します。
JavaScriptには様々なフレームワークが存在しており、有名なものはReact.js、Vue.jsなどがあります。
JavaScriptのコーディング
変数宣言
constやlet、varを使用することで変数宣言ができます。
constは初期値が必須で、変数に値を再代入できません。同じ変数名を定義するとエラーが起きます。
letは初期値を設定しなくても良く、変数に再代入ができます。同じ変数名を定義するとエラーが起きます。
varは初期値を設定しなくても良く、変数に再代入ができます。同じ変数名を定義してもエラーにならず、値が上書きされます。
// 正常なパターン
const c1 = 1;
let l1 = 2;
let l2;
var v1 = 3;
var v2;
var v1 = 5;
// エラーパターン
const t;
const c1 = 5; // 2回目の呼び出し
let v1 = 5; // 2回目の呼び出し
メソッドの定義
メソッドはfunctionで定義できます。
メソッドを呼び出す際はメソッド名()で呼び出せます。
また、メソッドを定義する際にデフォルト引数を設定でき、メソッドを呼ぶ際に引数を指定しなかった場合はデフォルト引数の値が設定されます。
function hello(str){
// 処理を書く
}
hello('値');
配列とオブジェクト
配列は、[x]を変数に代入することで使用できます。
初期化したい場合は、[]を代入する必要があります。
配列に値を追加したい場合は.push(x)をすることで、追加できます。
配列には数値と文字列、Booleanなど型を区別することなく入れられます。
const ary = [1,2,3,"four"];
ary.push(ture);
オブジェクトは、配列とは違う形でデータを複数入れられます。
オブジェクトの中で変数をさらに定義して値を設定しているイメージです。
const person = {
name: ["sato", "gojo"],
age: 25,
pro: function () {
console.log(`${this.name[0]} ${this.name[1]} is ${this.age}`);
}
};
person.name;
person.name[0];
person.age;
person.pro();
ループと分岐
ループは、Javaのfor文とほとんど同じ認識です。
const ary = [1,2,3];
for(let i = 0; i < arry.length; i++) {
console.log(i);
}
for(let num of ary) {
console.log(num);
}
分岐も、Javaでいうif文と同じ認識です。
const result = true;
if(result){
console.log('true');
} else {
console.log('false');
}
アロー関数とコールバック関数
アロー関数は、=>
を使用して省略した関数リテラルを記載しています。
// アロー関数使用しない場合
let profile;
function pro(name, age) {
profile = '${name} ${age}';
}
console.log(pro('sato',25))
// アロー関数使用する場合
const profile = (name, age) => '${name} ${age}';
console.log(profile('sato',25))
コールバック関数は、引数に関数を渡すような関数を指します。
function profile(age, firstName, lastName, callback) {
const result = callback(firstName, lastName);
console.log(age + result);
}
function name(firstName, lastName) {
return firstName + lastName;
}
profile(25, 'sato', 'rikido', name);
Webサイトが実際に動くようにhtmlとJavaScriptを組み合わせる
実際に、HTMLの要素に対してJavaScriptを反映させる場合は、document.querySelector()
を使用する。
<h1 class="main-title">タイトル</h1>
<h2 class="sub-title">サブタイトル</h2>
<div id="description">内容</div>
<script src="main.js"></script>
// 要素の場合はそのまま指定
const h1 = document.querySelector('h1');
// classを指定する場合は最初に.を指定
const subTitle = document.querySelector('.sub-title');
// idを指定する場合は最初に#を指定
const description = document.querySelector('#description');
// 文字の色を変える
function color() {
description.style.color = 'red';
}