Javascriptで押さえておきたい基礎知識

2025.04.09

コーティングの際のルール

変数宣言、const使うかlet使うか

const ⇒ 変数の中身を変えることができない

let ⇒ 変数の中身を後から変える（再代入）することができる

基本的にはconstを使う。

constが使えない部分がでてきたら、letを使う。

例えばfor文の中で変化させる変数や、true/false等の演算子を入れる変数はletにする。

letの使用を限定することで、「変数の中身が思ったものと違っててバグが起きる」という事態を防ぐことが可能。

varという変数宣言もありますが、ありゃ死語です。

変数の命名ルール

・2つ以上の単語を繋げて変数名にする場合のやり方

大文字で分割するキャメルケースがJavascriptではよく使われます。

const SampleNameStr = "キャメルケース"; //各単語の頭文字を大文字にする
const sample_name_str = "スネークケース"; //単語の間にアンダーバーを入れる

・中身が固定の文字列の場合には、変数名を全部大文字にする

const DOMAIN = "https://xxxxx.com/index.html";

・特定の意味を持つ変数であることをプレフィックスで表す。

プレフィックス：$などの決まった記号を変数の先頭につけること

const $foo = doqument.getElementByClassName("class名")
$foo[0].innerHTML = "<div>追加されたdiv要素</div>

・true/falseで状態を表す変数は「is○○」と名付ける。

const isActive = true; //アクティブな状態かどうか

文字列の中に変数を入れる「テンプレートリテラル」

可変である変数の値を組み込んだ文字列(URL等)を作りたい場合におススメの書き方

const imagePath = "./images/result-" + number.toString() + ".png"; //普通の書き方
const imagePath = `./images/result-${number.toString()}.png`; //テンプレートリテラル

まず、クォーテーションではなく「`(バッククォート)」で囲む

変数を入れたい箇所に「${}」を記述し、その中に変数を記載

標準組み込みの関数/オブジェクト

Javascriptに標準で備わっている関数やオブジェクトと標準組み込み関数・標準組み込みオブジェクトと言う。

例えばconsole.log()は、consoleという標準組み込みオブジェクトのlogメソッドである。

ブラウザAPI（windowオブジェクト）

Webページの情報を取得したり、ソースコードの要素を変更したりするためのオブジェクト。

windowという標準組み込みオブジェクトのメソッドである。

alart（ポップアップ）やdocument（タグ取得）もwindowのメソッド。

windowオブジェクトのメソッドは、「window.」の部分を省略して使うことができる。

documentオブジェクト

HTMLタグやclass、idなどを取得したり変更するwindowオブジェクト。

Javascriptで特定のHTML要素にアニメーションを入れる際に使うやつ。

//documentオブジェクトの例
document.querySelectorAll(".main"); //CSSセレクタの記法で検索

document.getElementById("id名"); //id名で検索
document.getElementByClassName("class名"); //class名で検索

element.innerText = "タグに入れたい文字列"; //タグの内側に文字列を追加

//特定のイベントに応じてアクションを追加
element.addEventListener("scroll", "関数"); //ページがスクロールされたら関数を実行 
element.addEventListener("click", "関数"); //要素がクリックされたら関数を実行

getElementはgetElementsにすることで、該当する要素を配列で全部取得するようにできる。

また、「要素の取得」と「要素の操作」は行を分けて書くことが多い。

//DOM操作の例
const $foo = doqument.getElementByClassName("class名")
$foo[0].innerHTML = "<div>追加されたdiv要素</div>"

この際、HMTL要素が格納された変数は「$」を付けることが慣例である。

特殊なデータ型（演算子、null、未定義）

演算子：true、false

null：値無し

未定義：undefined

nullは値が入っていないことを明示したもの、undefinedは結果的に値が無かった時に出力されるもの

一旦、空の値のまま変数を定義したいならnullを使う。

わざとundefinedを自分から書くケースはなく、基本はエラーとして表示される文字。

配列 [ ]

const foo = "変数の中身";
let array = [ 0, "リストの2つ目", foo];

配列の各要素には、どんなデータ型でも入れることができる。

配列の番号の数え方は0からスタートである。

オブジェクト

オブジェクト：プロパティと値のセットをたくさん格納しておくもの

基本の形は以下の通り。

// オブジェクト
const obj = {
  property: "値",
  userName: "Taro",
  method: function(){
    //処理
  }
}

// 呼出し
console.log(obj.userName);
obj.method();

「プロパティ名: 値」という形で記述。

値には関数を入れることもできる。値に入れた関数をメソッドと言う。

値には他にも配列や、違うオブジェクトを入れることもできる。

オブジェクトの中のオブジェクトを指定する時は「.(ドット)」で繋いで表記する。

「this」を使ってオブジェクト内でそのオブジェクト自体を指定

オブジェクトの中でthisを使うと、そのオブジェクトその自体を参照できる

// オブジェクト内のthis
const obj = {
  userName: "Taro",
  method: function () {
    return "アカウント名：" + this.userName;
  },
};

console.log(obj.method());

↑の場合、this=objなので、this.userNameで”Taro”を呼び出せる。

thisを使用する場合はメソッドはfunctionsを使う。arrow関数を使うと結果が変わってしまうので。

ループ（forループ）

const array = ["1","2","3"]
for (let index = 0; index < array.length; index++) {  //(初期値 ; 条件式 ; 増減式)
  console.log(array[index]);
}

↑は配列arryの中身を全て出力するまで回り続ける式。

条件文（if文）

let isLogin = false;
if (!isLogin) { // === trueは省略可、!==を省略なら変数名の前に"!"
  alert("ログインしていない")
} else if (isLogin){
  console.log("ログイン成功");
} else {
  console.log("予期しないエラー");
}

「if ( 条件文 ){ 処理 }」という形。

条件文は”===”などが多いが、trueか否かの判別であれば、省略して変数名だけでOK

論理演算子

>、<、>=、<=　は省略

// ===  完全一致
// !==  同じでない（○○以外ならtrue）
// &&  かつ
// ||  または

※==は使わない方針、≒みたいな意味合いになっちゃうらしい

関数

関数の基本の書き方は以下の通り。

//伝統的な記法
function 関数名(引数) {
  //処理
  return "戻り値";
}

//arrow関数
const 関数名 = (引数) => {
  //処理
  return "戻り値";
}

//呼び出し
const 戻り値 = 関数名();

function()とarrow関数は、どちらの書き方でもほぼ同じ。

戻り値はあってもなくてもいい。

関数のスコープ

スコープ：変数の効果が及ぶ範囲のこと。

関数内で定義された関数は、関数の外では使えない。

特定のスコープ(関数)内で定義される変数をローカル変数。

関数の外で定義され、どこでも呼び出せる変数をグローバル変数と言う。

特定の関数でしか使われない変数ならば、なるべく関数内で定義しローカル変数にするのが良い。

引数

引数は、関数宣言時にデフォルトの値を入れておくこともできる。

//引数のデフォルト値を設定
function 関数名(day = 1,hour = 0) { 
  //処理
}

引数にはオブジェクト形式のデータを入れることも可能。

//オブジェクト形式の引数
function 関数名(obj) {
  objA = obj.day;
  objB = obj.hour;
}

関数名({day: "5", hour: "30"}); //引数をオブジェクト形式で指定

オブジェクト形式にすることで入れる順番を考える必要が無くなるので、引数がたくさんある時には便利な書き方です。

コールバック関数

コールバック関数とは、引数として関数を指定するもの。

//コールバック関数
function 関数名(callback) {
  console.log("私はケンです。");
  callback();
}

function bar() {
  console.log("いいえ、私はリサよ。");
}

関数名(bar);//引数callbackに関数barが入る

細かい関数に分割し、必要に応じて関数を組み合わせて実行することができる。

コメント

タイトルとURLをコピーしました