javascriptの記法をざざっと
細かいルール
コメントアウト
/*コメントアウト*/
// コメントアウト
行の改行
var width = 7;
var width
= 7;
javascriptは途中で改行してもいいのでセミコロンで終わらなくても大丈夫な場合もあるが念のためセミコロンで終わるのに統一。
変数の定義
var 変数 = 値
/*下記のように複数一度に定義するのも可能*/
var msg = "hello",
x = 20,
y = 30;
varを使うか、letを使うかconstを使うか迷ったらこの記事。一旦下記のルールが一番良さそう。
- 再代入が必要ならlet
- 基本はconst
変数の更新
var name = "太郎";
name = "次郎";
更新の際はvarはいらない。
文字列の連結
var s;
s = "hello" + "world";
/* => hello world*/
javascriptは片方が文字列の場合+が連結になる
命名規則
キャメルケースで単語の区切りに大文字を使う
yourName
等号
x === y
// xとyは等しい
x !== y
// xとyは等しくない
html内の記述箇所
head内
<head>
<script type="text/javascript">
JavaScript命令および関数...
</script>
</head>
body内
<head>
</head>
<body>
<script language="JavaScript">
document.write("テスト")
</script>
</body>
おすすめはbodyのとじタグ直前
javascriptは読み込まれて処理が終わるまで他のcssなどが読み込めないため他の処理が終わった後に読み込んだほうがページの表示が早くなる。またもしhtml内に処理の結果を表示する場合、htmlが読み込まれたあとでないとその処理は行われないため読み込まれていない場合また再度読み込むという内容をjavascript内に記述しないといけない。
条件文
if(条件){
インデントを入れて何か
}else if{
console.log("あばば")
}else{
console.log("あばば")
}
// うしろにセミコロンは不要
switch文
var item = "ほうき"
switch(item){
case "掃除機":
console.log("掃除機");
break;
case "ちりとり":
console.log("ちりとり");
break;
default:
console.log("掃除用具");
}
// breaｋでswitch文から抜ける。どれにも当てはまらない場合、defaultになる。
while文
var i = 1
while(i<=5){
console.log(i)
i = i + 1
}
while文は()内の条件がtrueだったら処理を続ける。falseになると繰り返しの処理から抜ける。
for文
for(変数の定義; 条件式; 変数の更新){
処理
}
for(var i = 1; i <= 5; i += 1){
console.log(i);
}
1,変数の定義
2,条件
3,繰り返す処理→console.log
4,変数の更新
配列
var 変数 = [値0,値1,値2];
セミコロンで終わるの注意。
連想配列（オブジェクト）
var 変数名 = {キー１:値１,キー2:値2};
console.log(変数名.キー);
console.log(変数名["キー"]);
// キーが文字列の場合""で囲うのを忘れずに
このキー：値はプロパティとも言う。
変数名.キー
で取り出すことができる。
var user{
name:太郎
};
console.log(user.name);
=>太郎
オブジェクトはnewで生成できる
var s = new String("太郎");
push（配列に値を追加する）
const numbers = [a1,b1,c1];
numbers.push(d1);
console.log(numbers);
=>[a1,b1,c1,d1]
forEachメソッド（配列１つ１つに処理）
const numbers = [1,2,3];
numbers.forEach((number) => {console.log(number)});
=>
1
2
3
find（配列の中で条件にあった値を１つ引っ張ってくる）
const numbers = [1,2,3,5,7];
const foundnumbers = numbers.find((number) => {
return numbers > 3;
});
console.log(foundnumbers);
=>5,7
filter（配列の中で条件にあった値をすべて引っ張ってくる）
const numbers = [1,3,5,7];
const filteredNumbers = numbers.filter((number) => {
return number > 3;
});
console.log(filteredNumbers);
map（配列の各値に同じ処理をする）
const numbers = [1,2,3];
const doubledNumbers = numbers.map((number) => {
return number * 2;
});
console.log(doubledNumbers);
スプレッド演算子
const ary = ['Pen', 'Pineapple', 'apple'];
const myAry = [...ary];
メソッド
var user{
name:太郎
greet: function(name){
console.log("hello" + name)
}
};
user.greet("太郎");
=>hello,太郎
オブジェクトの中に関数を定義したものをメソッドという。
this
var user{
name:太郎
greet: function(name){
console.log("hello" + this.name)
}
};
user.greet("太郎");
=>hello,太郎
オブジェクト内でそのオブジェクトを指すもの
thisの詳細はこの記事がわかりやすい
thisが参照先を決めるルールは、Arrow Functionとそれ以外の関数定義の方法で異なります。
アロー関数と他の関数で挙動が異なっており、下記の挙動
これは、変数におけるスコープチェーンの仕組みと同様で、そのスコープにthisが定義されていない場合には外側のスコープを探索するのと同じです。 そのため、Arrow Function内のthisの参照先は、常に外側のスコープ（関数）へとthisの定義を探索しに行きます（詳細はスコープチェーンを参照）。
グローバル変数とローカル変数
var name = "あばば";
function hello{
var name = "えへへ";
console.log(name);
}
hello();
console.log(name);
// => これでえへへで出力される。あばばがグローバル変数でえへへは関数内のローカル変数
関数
function 関数(){
}
// 実行する場合
関数名();
アロー関数
let getTriangle = (base, height) => {
return base * height / 2;
};
変数 = (引数) => {
};
無名関数
var hello = function(){
}
変数に関数を入れて関数名を入れない形が存在します。この形を無名関数と言います。
即時関数
(function hello(){
console.log("hello");
})();
/*関数名は省略できる*/
(function(){
console.log("hello");
})();
functionを()で囲み、後ろに()をつけると即時関数としてすぐに関数を実行できる。
ユーザーに対しての警告、情報提示
alert("");
/*ブラウザで注意文言を提示*/
confirm("");
/*okと閉じるの注意文言を提示*/
prompt("");
/*ユーザーに質問を提示*/
以下ES6
es5とes6の変更点
「ES5とES6の違いをまとめてみた(メモ)」
https://qiita.com/rifutan/items/a55f132d4dae7e2f1941
ここによくまとめられている。下記重複もあるが復習も兼ねて。
letが使えるようになる
let name = "太郎";
var name = "太郎";
letはブロックスコープでvarは関数レベルでのスコープ
テンプレートリテラル
console.log(`${変数}`);
変数を値の中にいれることができるのがテンプレートリテラル。下記の書き方をしないといけない。
- テキストを`バッククオートで囲む
- 変数を${}の中に入れる
class
constructor
classを使用する際に同時にしたい処理を書く。
class Animal{
constructor(){
処理
}
}
要素はプロパティ、動作はメソッド
ES6ではclass直下にプロパティをかけないのでconstructorで代入する。
class Animal{
constructor(name,age){
this.name = name,
this.age = age
},
greet(){
console.log("こんにちは！");
}
}
fileの分割
class Rei{
}
export default Rei;
import Rei from "./rei.js";