1
1

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 3 years have passed since last update.

製薬企業研究者がJavaScriptの基本的な文法についてざっくりまとめてみた

Last updated at Posted at 2020-02-29

はじめに

ここでは、JavaScriptの基本的な文法をざっくりとまとめてみます。

基本的な記述方法

JavaScriptは、.jsが拡張子の外部ファイルを作成するか、HTMLファイルに<script>タグを作って記述するかのどちらかで利用することが多いです。
外部ファイルをHTMLに読み込むには、以下のようにします。

head.html
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="sample.js"></script>
    </head>
    <body>
        
    </body>
</html>

HTMLファイル中に直接記述する場合は以下のようになります。

javascript.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>サンプルページ</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <script>
            console.log("JavaScript");
        </script>
    </body>
</html>

文末には、セミコロン;を書くようにします(セミコロンがなくても動作しますが、書いた方が良いです)。
//以降は、その行の最後までコメントと認識され、プログラムの実行範囲から除外されます。
複数行にわたってコメントを書きたい場合は、/* */を用います。
オブジェクトの値を出力するときには、console.log()を用います。

変数とデータ型

変数は、let 変数名 = 値で宣言します。

variable.js
let str = '文字列'; // 文字列
console.log(str);

let num = 12345; // 数値
console.log(num);

let isBool = true; // 真偽値
console.log(isBool);

let arr = ['Python', 'R', 'JavaScript', 'PHP']; // 配列
console.log(arr);

let obj = {'Python': 'AI', 'R': 'statistics', 'JavaScript':'web', 'PHP': 'WordPress'}; // オブジェクト
console.log(obj);

一方、定数を使いたい場合は、constを使います。
letで宣言した変数は値が更新できるのに対し、constで宣言した定数は値を更新することができません。

constant.js
const str = '定数';
// str = '変数'; // 定数の値は更新できない

制御文

条件分岐

if文

if文は、if (条件) {処理}と記述します。
さらに場合分けするときは、elseelse ifを使います。

if.js
let num = 3;

if (num == 1) {
    console.log('1');
} else if (num == 2) {
    console.log('2');
} else if (num == 3) {
    console.log('3')
} else {
    console.log('1でも2でも3でもない')
}

switch文

if文で場合分けが多くなる場合は、switch文を使うと簡単に書けます。
switch文は、switch (変数) {case 値: 処理; ・・・}と記述します。

switch.js
let num = 3;

switch (num) {
    case 1:
        console.log('1');
        break;
    case 2:
        console.log('2');
        break;
    case 3:
        console.log('3');
        break;
    default:
        console.log('1でも2でも3でもない');
        break;
}

なお、breakを書かないと、条件に合った場合でも後続のcaseの処理が走ってしまうので注意が必要です。

反復処理

for文

一定回数だけ繰り返し処理を実行する(繰り返し回数があらかじめ分かっている)ときは、for文を用います。
for文は、for (var 変数名 = 初期値; 変数 <= 最大値; 変数の値の更新)と記述します。

for_1.js
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

ここで、i++となっているのは、i = i + 1すなわち反復処理を繰り返すごとに変数iを1ずつ大きくしていくことを示しています。これは、i += 1とも書けますが、変数の値を1ずつ更新していく場合は、この書き方はあまりせず、i++またはi--と書きます。変数の更新幅が1以外の場合は、i += 2のように書きます。

また、for (var 変数名 in 配列) {処理}とすると、配列の要素を一つずつ取り出すことができます。

for_2.js
let arr = ['Python', 'R', 'JavaScript', 'PHP'];

for (let key in arr) {
    console.log(key); // キーを出力
    console.log(arr[key]); // 値を出力
}

さらに、配列の代わりにオブジェクトを対象とする場合は、以下のようになります。

for_3.js
let obj = {'Python': 'AI', 'R': 'statistics', 'JavaScript':'web', 'PHP': 'WordPress'};

for (let key in obj) {
    console.log(key); // キーを出力
    console.log(obj[key]); // 値を出力
}

for (let key of arr) {
    console.log(key); // キーを出力
}

while文

ある条件を満たす間だけ処理を繰り返す場合は、while文を用います。
while文は、while (条件) {処理}と記述します。

while_1.js
let num = 1;

while (num < 5) {
    console.log(num);
    num++; // 変数の値の更新
}

以下のように、do whileを使うと、必ず1回は処理が実行されます。

while_2.js
let num = 1;

do {
    console.log(num);
    num++;
} while (num < 1);

関数

関数は、function 関数名(引数){処理}とすることで作成できます。

function_1.js
function copyNumber(num) {
    return num;
}

console.log(copyNumber(123));

以下のように書くこともできます。

function_2.js
let myFunc = function copyNumber(num) {
    return num;
};

console.log(myFunc(123));

オブジェクト

オブジェクトは、var オブジェクト名 = {キー: 値, ・・・}とすることで作成できます。

object_1.js
let human = {
    name: 'Yukiya',
    age: 31,
    introduceMyself: function() {
        return 'I am ' + human.name + ' and ' + human.age + ' years old. ';
    }
};

console.log(human.introduceMyself());

以下のように書くこともできます。

object_2.js
let human = {};
human.name = 'Yukiya';
human.age = 31;
human.introduceMyself = function() {
    return 'I am ' + human.name + ' and ' + human.age + ' years old. ';
}

console.log(human.introduceMyself());

new演算子を用いることで、新しいインスタンスを作成できます。

object_3.js
let human = function(name, age) {
    this.name = name;
    this.age = age;
    this.introduceMyself = function() {
        return 'I am ' + this.name + ' and ' + this.age + ' years old. ';
    }
};

let human1 = new human('Yukiya', 31);
console.log(human1.introduceMyself());

まとめ

ここでは、JavaScriptの基本的な文法について解説しました。
Webページのソースコードを見るときに役立ちます。

1
1
4

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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?