LoginSignup
6

More than 3 years have passed since last update.

javascript入門

Last updated at Posted at 2020-01-23

javascriptを勉強した内容をまとめます

ブラウザで使う場合

htmlのscriptタグ内に書く

index.html
<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script>
      const a = 50
      const b = 17
      const c = a * b
      console.log(c)
    </script>
  </body>
</html>

jsファイルに書いておいてscriptタグでインポートする

以下はindex.htmlと同じディレクトリにtest.jsを置いた場合です

index.html
<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>
test.js
const a = 50;
const b = 17;
const c = a * b;
console.log(c);

変数と定数

動的型付言語なので型を明示的に宣言しなくても動きます

定数
const a = 'hoge';
const b = 300;
const c = 2.9;
console.log(a);
console.log(b);
console.log(c);
変数
var d = 'hoge';
var e = 300;
var f = 2.9;
console.log(d);
console.log(e);
console.log(f);

d = 'fuga';
e = 123;
f = 1.8;
console.log(d);
console.log(e);
console.log(f);

配列

javascript
var arr = [1, 2, 3];
console.log(arr);
console.log(arr[1]);

arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
console.log(arr);
console.log(arr[1][1]);

論理演算

等号が「==」、NOTが「!」、ANDが「&&」、ORが「||」になります。

javascript
const a = true && true;
const b = true && false;
console.log(a);
console.log(b);

const c = true || false;
const d = false || false;
console.log(c);
console.log(d);

console.log(!c);
console.log(!d);

if文

javascript
const flag = true
if(flag){
  console.log('input value:' + flag + ' is True');
}else{
  console.log('input value:' + flag + ' is False');
}

const value = 300
if(value < 200){
  console.log('input value:' + value + ' is less than 200');
}else{
  console.log('input value:' + value + ' is more than 200');
}

for文

javascript
for(i=0; i<10; i++){
  console.log(i);
}

switch文

javascript
const place = '東京'
switch (place)
{
    case "東京":
        console.log('Tokyo');
        break;
    case "大阪":
        console.log('Osaka');
        break;
    default:
        console.log("不明");
        break;
}

関数の書き方

3つ書き方があるみたいです。
python勢的には1つに統一してほしいですが、いろんな書き方が出来ることを是とするカルチャーなんでしょうか。

返り値のない関数
function normalFunc1(x) {
    console.log(x);
}

let normalFunc2 = function(x){
    console.log(x);
}

let arrowFunc = (x) => {
    console.log(x);
}

normalFunc1('ふつうの関数1');
normalFunc2('ふつうの関数2');
arrowFunc('アロー関数式');
返り値のある関数
function normalFunc3(x) {
    console.log(x);
    return x * 2;
}

let normalFunc4 = function(x){
    console.log(x);
    return x * 2;
}

let arrowFunc2 = (x) => {
    console.log(x);
    return x * 2;
}

console.log(normalFunc3(3));
console.log(normalFunc4(3));
console.log(arrowFunc2(3));

sleep動作

javascriptはsleep関数が用意されていないようです。これはそもそもjavascriptではsleep()をするべきでないという事みたいなんですが、待機後に実行するsetTimeout()を使えばできます。第2引数ミリ秒待機してから第1引数の内容を実行しますので、例えば2秒待ってから「2秒待機しました」と表示する場合は以下で出来ます。

javascript
setTimeout(() => {
    console.log('2秒待機しました');
}, 2000);

async/awaitによる非同期処理

以下のような仕組みで非同期処理を実施します
1. async functionを定義する (async function内ではすべての処理を非同期で実行される)
2. async function内でfunctionを呼ぶと非同期処理を開始し、返り値としてPromiseを受け取る
3. 受け取ったPromiseをawaitすると発行元のfunctionが終了するまで待機して本来の返り値を受け取る

複数の関数を非同期で開始しておいて、最後にまとめてPromiseをawaitするような使い方になります。最初からawaitをつけて実行すると普通に同期処理します。

以下のコードを実行すると、f1()では毎回awaitしているので2秒待機を3回やって6秒かかりますが、f2()では非同期処理を3つ開始しておいて、まとめてawaitしているので2秒で終了します。

javascript
// 2秒後に値を返す
function getNum(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(num);
        }, 2000);
    });
}

// 6秒後に出力
async function f1(value) {
    const n1 = await getNum(value*1);
    const n2 = await getNum(value*2);
    const n3 = await getNum(value*3);
    console.log(n1, n2, n3);
}

// 2秒後に出力
async function f2(value) {
    const p1 = getNum(value*1);
    const p2 = getNum(value*2);
    const p3 = getNum(value*3);
    const n1 = await p1;
    const n2 = await p2;
    const n3 = await p3;
    console.log(n1, n2, n3);
}

f1(1);
f2(2);

上記はこちらのコードをお借りしました。
https://webbibouroku.com/Blog/Article/js-async-await

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
6