LoginSignup
1
2

More than 1 year has passed since last update.

Javascript入門

Posted at

Javascript超基礎文法

Javascriptを勉強し始めたので自分用にまとめていきます。


Hello World

cosole.log("Hello World"); // Hello World
  • console.log
    出力命令

  • 文字列
    文字列にはシングルクォーテーションかダブルクォーテーションをつける
    数値には不要

変数

var num = 1; // 再宣言、再代入可能
let number = 2; // 再代入可能
const name = "Taro"; // 定数

  • 変数
    let 英単語の形
    数字スタート・ローマ字不可

  • 変数更新
    後に書かれたコードが優先される
    +=や++など利用可能

let hello = 'こんにちわ'
let name = 'イチロー'
console.log(hello + name); // こんにちわイチロー
name += 'さん'; //イチローさん
console.log(`こんにちわ${name}`) //こんにちわイチローさん
  • 文字列の結合
    ドットを用いることで文字列を連結可能

  • 変数展開
    文字列内に変数を挿入する場合はバッククォートで囲む

条件分岐

let num = 50;

if(num > 40){
 console.log('40より大きい');
}else if(num >= 30){
 console.log('30以上');
}else{
  console.log('30より小さい');
} //40より大きい

 let remainder = $num % 3;

switch (remainder) {
 case 0:
  console.log('大吉');
  break;
        
 case 1:
  console.log('中吉');
  break;
      
 case 2:
  console.log('小吉');
  break;
        
 default:
  console.log('');
  break;
}
  • 条件分岐 if
    if(条件式) ~ elseif(条件式) ~ else の形

  • 条件分岐 switch
    switch(式) ~ case ~ default の形。
    式がcaseの値に一致した時、該当のcaseが実行される。(該当なしの時はdefaultが実行)
    break命令がないと後ろのcaseブロックが続けて実行される。

配列

let titles = ['aaa','bbb','ccc']
titles[3] = 'ddd'; //インデックス番号が3の位置に値を追加する
titles[1] = 'eee'; //bbbがeeeに値更新
titles.push('fff'); //配列の最後尾に値を追加する

let titles = {
           'a' : 'aaa', 
           'b' : 'bbb',
           'c' : 'ccc'
          }; // キー : 値
console.log(titles['a']); // 結果:aaa
console.log(titles.a); // 結果:aaa
titles['d'] = 'ddd'; // 値の追加
  • 配列
    ['aaa','bbb','ccc']  の形

  • 連想配列
    'キー' : '値'
    キーによって値を呼び出せる

繰り返し処理

for(let i = 1; i <= 100; i++){
 console.log(i);
}
  • 繰り返し処理 for

1.変数の初期化 let i = 1;

2.ループの条件 i <= 100;

3.繰り返す処理 console.log(i);

4.変数の更新 i++

let i = 1;
while(i <= 100){
 console.log(i);
 i += 1;
}
  • 繰り返し処理 while

1.変数の初期化 let i = 1

2.ループの条件 i <= 100

3.繰り返す処理 console.log(i);

4.変数の更新 i+=1

let names = ['Taro','Ichiro','Jiro'];
//アロー関数
names.forEach((value, index, names) => {
 console.log(value);
})
// 普通のfunction
names.forEach(function(value, index, names){
 console.log(value);
})

// ハッシュ
let names = {
 'Tanaka' : 'Taro',
 'Suzuki' : 'Ichiro',
 'Yamada' : 'Jiro'
};
Object.keys(names).forEach(function(key) { //Object.keys(names)でキーの配列を作る
  console.log(key, obj[key]);
});

  • 配列の繰り返し処理 forEach

配列namesの要素を順番に代入する (value, key, array) ←key,array省略可

ハッシュにそのまま使ってもエラーになる

関数

function hello(world){
 console.log(`hello,${world}`);
}

hello("Tokyo"); //結果:hello,Tokyo

// アロー関数
let hello = (world) => {
    console.log(`hello,${world}`);
};
hell("Osaka"); //helll,Osaka
  • 関数の定義
    function 関数(仮引数){処理}  の形で定義する
    アロー関数で簡潔に記述することもできる
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