1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScript学習メモ

Last updated at Posted at 2019-08-29

##デベロッパーツールの使い方

・デベロッパーツールの立ち上げ
GoogleChromeを開いてからoptionキー + commandキー + i

・Consoleの改行
shiftキー + Enterキー

・ダイアログに出力

alert(〇〇〇);    // 出力結果: ダイアログに()内の文字が出力

・コンソールに出力

console.log("〇〇〇");    // 出力結果: コンソールに(" ")内の文字が出力

##識別子(変数名、関数名、メソッド名)のルール

1.半角のアルファベット
2.頭文字に数字は使えないが _ と $ はオッケー
3.予約語は使えない(下記参照)
break case catch class const continue debugger default delete do else enum export extends finally for function if import implements in instanceof interface let new package private protected public return static super switch this throw try typeof var void while with yield null true false

・コメントの記入

//一行だけ
/* 複数行 */

・エスケープ

文字列の途中に " を表示させたい場合 → " と記入

("〇〇〇 \" 〇〇〇")    // 出力結果: 〇〇〇"〇〇〇

文字列を改行させたい場合 → \n と記入

("〇〇〇 \n 〇〇〇")    // 出力結果: 〇〇〇
                      //         〇〇〇

・文字列の結合

("〇〇〇"+"〇〇〇")    // 出力結果: 〇〇〇〇〇〇

・変数の代入

var 変数名 = "数値、文字列など";

##関数

・関数の作成

function 関数名(引数) {
        処理
}

・関数の呼び出し

関数名();

・関数に結果をもどす

function 関数名(引数) {
        処理
    return 戻り値
}

##配列

・配列の作成

var 変数名 = [,,,×];

・配列の呼び出し

変数名[番号]    //例 console.log(変数名[番号]);    ※番号は0から 

・既存の配列の要素を使って新しい配列を作る場合sliceを使う

変数名.slice(最初の番号,最後の番号)    // ※最初の番号だけ記載するとそれ以降の要素が全部よびだされる

・配列の要素追加するときはpushを使う

変数名.push    //例 console.log(変数名.push(新しい要素));

・配列を順番に処理するときはforEachを使う

変数名.forEach(引数){
        処理
}

・既存の配列の要素を全て新しい配列に作り直す場合mapを使う

変数名.map(引数)    // ※returnで値を戻す必要あり

・要素を条件によって選別して新たな配列を返すときfilterを使う

変数名.filter(関数の引数)    // ※returnで値を戻す必要あり

##for文

・for文の作成

for (初回だけ実行する処理; ループ継続条件; 毎ループ後の処理) {
  毎ループごとに実行する処理
}
記述 処理
変数名.length 配列の要素の数の取得
変数名++ インクリメント 1ずつ増やす
変数名-- デクリメント 1ずつ減らす

##if文

・if文(条件分岐)

if ( 条件 ) {    // ※条件の前に!つけると反転。〜であるとき→〜でないとき
    条件を満たす場合に実行される処理をこの中に記述する
} else {
    条件を満たさない場合に実行される処理をこの中に記述する
}

・AND : 条件を追加したい場合 && をつかう。

( A && B )    // AとBに当てはまるとき

・OR : 条件をどちらかに当てはまる場合にしたい場合は || をつかう。

( A || B )    // AかBどちらかに当てはまるとき

##オブジェクト

・オブジェクトの作成

var 変数名 = {
    プロパティ名1 : "値1",
    プロパティ名2 : "値2",
    プロパティ名3 : "値3"
}

・オブジェクトの使用(ドット記法)

変数名.プロパティ名    // ※例 console.log(変数名.プロパティ名);

・もうひとつの方法(ブラケット記法)※動的に使える

変数名[プロパティ名]    // ※例 console.log(変数名["プロパティ名"]);

・プロパティの値の変更したい場合

変数名.プロパティ名 = "新しい値";

・プロパティを追加したい場合

変数名.新しいプロパティ名 = "新しい値";

・プロパティを削除したい場合

delete 変数名.プロパティ名;

・プロパティに関数を入れることも可能

変数名.プロパティ名 = function() {
    処理
}

・同じオブジェクト内のプロパティを使うときはthisをつかう

this.プロパティ名

・一度セットした値をリセットしたい場合

変数名 = null;

##NaNについて
数字ではないという意味。isNaN()を使うと数値かどうかを判断できる

if (isNaN(引数)){
    処理
}

ついでに : コンソールにundefinedと出る場合=定義されていないという意味

##非同期処理

・非同期処理について
setTimeoutを使うと指定した時間後に処理が実行される。

setTimeout(function() {
    処理
},時間);    // ※1秒=1000ミリ秒

・clearTimeoutを使うと設定したタイマーをキャンセルできる

var 変数名 = setTimeout(function() {
    処理
},時間);
clearTimeout(変数名);
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?