Peeeks

Chapter1 基礎

 

001 JavaScriptの基礎を覚えたい

※省略

 

002 JavaScriptの書き方を知りたい

HTML

 

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="style.css"/>
  <script>
    alert('こんにちは');
  </script>
</head>
<body></body>
</html>

動作確認

 

003 JavaScriptを別ファイルに書きたい

HTML

 

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="style.css"/>
  <!-- main.jsを読み込む -->
  <script src="main.js" defer></script>
</head>
<body></body>
</html>

JavaScript

 

alert('こんにちは');

複数ファイルを読み込む場合

 

<head>
<script src="main1.js" defer></script>
<script src="main2.js" defer></script>
<script src="main3.js" defer></script>
</head>

「相対パス」で指定する場合

 

<script src="./script/main.js" defer></script>

「ルートパス」で指定する場合

 

<script src="/project/script/main.js" defer></script>

「絶対パス」で指定する場合

 

<script src="https://example.com/script/main.js" defer></script>

 

004 プログラムの実行途中の値をログで確認したい

JavaScript　コンソールパネルで値を確認

 

const a = 10;
const b = 20;
const sum = a + b;
console.log(sum); // 結果： 30

JavaScript　複数の引数をカンマ区切りで設定

 

console.log('こんにちは。', '現在', new Date(), 'です');

動作確認

 

005 計算プログラムを書きたい

JavaScript　四則演算

 

console.log( 100 + 200 ); // 300
console.log( 200 - 80 ); // 120
console.log( 100 * 3 ); // 300
console.log( 400 / 5 ); // 80
console.log( 402 % 5 ); // 2
console.log( 2 ** 3 ); // 8

動作確認

 

006 変数を使いたい（let）

JavaScript　定数「myName」に「鈴木」を代入

 

let myName = '鈴木';
alert(myName);

JavaScript　現在の日付を代入

 

let currentData = new Date();
console.log(currentData);

JavaScript　関数を代入

 

let myFunction = () => console.log('関数です');
myFunction();

JavaScript　定数「myName」に別の値を再代入

 

myName = '高橋';
console.log(myName);

JavaScript　変数を使った足し算

 

let number1 = 10;
let number2 = 20;
let sum = number1 + number2;
console.log(sum); // 結果：30

JavaScript　文字列の変数を結合

 

let familyName = '鈴木';
let firstName = '太郎';
let fullName = familyName + firstName;
console.log(fullName); // 結果：'鈴木太郎'

JavaScript　変数を別の変数に代入

 

let value1 = 100;
let value2 = value1;
console.log(value2); // 結果：100（value1と同じ値）

JavaScript　letの初期値は省略できる

 

let value;
console.log(value); // undefined

JavaScript　複数の変数をまとめて宣言することもできる

 

let a = 1, b = 2, c;
console.log(a + b); // 3
console.log(c); // undefined

動作確認

 

007 定数を使いたい（const）

JavaScript　定数「myName」に「鈴木」を代入

 

const myName = '鈴木';
alert(myName);

JavaScript　文字列を代入

 

const myString = '鈴木';
console.log(myName);

JavaScript　関数を代入

 

const myFunction = () => console.log('関数です');
myFunction();

JavaScript　定数を使った計算

 

const number1 = 10;
const number2 = 20;
const sum = number1 + number2;
console.log(sum); // 30

JavaScript　文字列の変数を結合

 

const familyName = '鈴木';
const firstName = '太郎';
const fullName = familyName + firstName;
console.log(fullName); // 鈴木太郎

JavaScript　複数の定数をまとめて宣言

 

const a = 1 , b = 2;
console.log(a + b); // 結果3

JavaScript　配列やオブジェクトだと変更できる

 

// 配列
const myArray = ['鈴木','田中','高橋'];
console.log(myArray[0]); // 鈴木
myArray[0] = '後藤'; // エラーは出ない
console.log(myArray[0]); // 後藤

 

// オブジェクト
const myObject = { id: 20, name: '山田'};
console.log(myObject.name); // 山田
myObject.name = '斎藤';
console.log(myObject.name); // 斎藤

動作確認

定数は、値の再代入ができない

 

const myName = '鈴木';
myName = '高橋'; // エラーになる

constの初期値は省略できない

 

const value; // エラーになる

 

008 プログラムに対してコメントを書きたい

JavaScript

 

const value = 100; // 価格
const tax = 1.1; // 消費税10%

 

// 消費税込みの値段を求める
const price = value * tax;

 

const result = 100 + 200 /* + 300 */ + 400;
console.log(result); // 700　←　300が無視される

 

/* これは複数行のコメントです。
改行しても有効です。　*/

 

/*
*　このように体裁を整えて
*　使うこともできます。
*/

動作確認

 

009 ふたつの値を比較したい（比較演算子）

JavaScript　文字列や数値の比較

 

console.log('鈴木' == '鈴木'); // true
console.log(10 < 30); // true
console.log(20 >= 30); // false

JavaScript　配列の比較

 

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
console.log(array1 == array2); // false 参照先が異なるから

 

const array3 = [1, 2, 3];
const array4 = array3;
console.log(array3 == array4); // true 参照先が同じだから

JavaScript　==と===の違い

 

console.log(10 == '10'); // true
console.log(10 === '10'); // false
console.log(20 != '20'); // false
console.log(20 !== '20'); // true

動作確認

 

010 複合代入演算子を使いたい

JavaScript　複合代入演算子

 

let a = 10;
let b = 20;
a += b; // a = a + b と同じ意味
console.log(a); // 結果：30

 

let c = '鈴木';
let d = '一郎';
c += d; // c = c + d と同じ意味
console.log(c); // 結果：鈴木一郎

 

let e = 5;
let f = 2;
e *= f; // e = e * f と同じ意味
console.log(e); // 結果：10

動作確認

 

011 関数（function）を扱いたい

JavaScript　入力値aを受け取ってa+2の結果を返す関数

 

function myFunction(a){
const result = a + 2;
return result; // 戻り値
}
console.log(myFunction(10)); // 結果：12

JavaScript　引数はカンマ区切りで何個でも設定可能

 

function calcSum(a,b,c){
const result = a + b + c;
return result;
}
console.log(calcSum(1,2,3)); // 結果：6

JavaScript　引数を与えないこともできる

 

function myMessage(){
console.log('こんにちは');
return 100; // 戻り値
}
myMessage(); // こんにちは
console.log(myMessage()); // 結果：こんにちは 100

JavaScript　処理結果が不要な場合は、戻り値を省略できる

 

function myMessage2(){
console.log('こんにちは');
}
myMessage2(); // 結果：こんにちは

JavaScript　returnによって、その時点で関数の処理は終了

 

function myFunction2(){
return 100;

 

// return以降のブロック内の処理は実行されない
console.log('こんばんは');
}
console.log(myFunction2()); // 結果：100

JavaScript　条件によってreturnを出し分ける使い方も可能

 

function myFunctiou3(a,b){
// aが100以上ならaを返す
if(a >= 100){
return a;
}
// aが100未満ならbを返す
return b;
}
console.log(myFunctiou3(200,500)); // 結果：200
console.log(myFunctiou3(10,500)); // 結果：500

JavaScript　戻り値を定数に代入して使う

 

// 関数の宣言
function calcFunction(price,tax){
const result = price + price * tax;
return result;
}

 

// 関数を実行し、戻り値を定数に代入
const myResult = calcFunction(100 , 0.1);
console.log(myResult); // 結果：110

動作確認

 

012 アロー関数（=>）で関数を定義したい

JavaScript　functionを使わずに、=>で関数を定義する

 

const calcSum = (a, b, c) => {
const result = a + b + c;
return result;
}
console.log(calcSum(1, 2, 3)); // 結果：6

JavaScript　引数が「1個」のときのみ（カッコ）を省略できる

 

const myFunction1 = (a) => {
return a + 2;
}
console.log(myFunction1(5)); // 結果：7

 

const myFunction2 = a => {
return a + 2;
}
console.log(myFunction2(6)); // 結果：8

JavaScript　アロー関数内の処理が１行のときは、{波カッコ}とreturnを省略できる

 

const myFunction3 = a => a + 2;
console.log(myFunction3(7)); // 結果：9

動作確認

 

013 関数に渡す値の初期値を設定したい

JavaScript　デフォルト引数

 

/**
* 税込みの値段を返す関数
* @param price 価格
* @param tax 税率　←　デフォルト引数0.08を設定
*/

 

function calcFunction(price, tax = 0.08){
const result = price + price * tax;
return result;
}

 

// taxの引数を省略すると、初期値の0.08が使用される
const result1 = calcFunction(100);
console.log(result1); // 結果：108

 

// taxの引数を指定すると、その値が使用される
const result2 = calcFunction(100, 0.1);
console.log(result2); // 結果：110

動作確認

 

014 関数に任意の数の引数を渡したい

JavaScript　引数の数が決まっていない関数

 

/*
* 引数の合計値を返す関数
* @param prices
* @returns {number}
*/

 

function calcSum(...prices){
let result = 0;
for(const value of prices){
result += value;
}
return result;
}

 

const result1 = calcSum(10, 20);
console.log(result1); // 結果：30

 

const result2 = calcSum(5, 10, 15);
console.log(result2); // 結果：30

動作確認

for...of文で、ループ処理が行える

 

// サンプル１
const iterable = [10, 20, 30];
for (let value of iterable) {
value += 1;
console.log(value);
}
// 11
// 21
// 31

 

// サンプル２
const iterable = 'boo';
for (const value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"

 

015 条件に応じて処理を分けたい（if文）

JavaScript　if、else if、else

 

const myPrice = 100;
// const myPrice = 20;
// const myPrice = 1;

 

if(myPrice >= 50){
console.log('myPriceは50以上です');
} else if(myPrice >= 10){
console.log('myPriceは10以上50未満です');
} else {
console.log('myPriceは10未満です');
}

JavaScript　else if、elseは必ずしも記述しなくていい

 

// else if,elseを省略
if(true){
console.log('Hello');
}

 

// else ifを省略
const randomNum = Math.random() * 10; // 0以上10未満の乱数
if(randomNum >= 5){
console.log('randomNumは5以上');
} else {
console.log('randomNumは5未満');
}

 

// ブロック内の処理が１行だけの場合には{波カッコ}は省略可能
// 記述が短くなるが、コードの見通しが悪くなるので注意
const randomNum2 = Math.random() * 10;
if(randomNum2 >= 5) console.log('randomNum2は5以上');

動作確認

 

016 条件に応じて処理を分けたい（switch文）

JavaScript　「みかんです」だけが実行される

 

// const myFruit = 'りんご';
const myFruit = 'みかん';
// const myFruit = 'いちご';

 

switch(myFruit){

 

case 'りんご':
alert('りんごです');
break;

 

case 'みかん':
alert('みかんです');
break; // breakで処理が終了

 

default:
alert('その他です');
break;
}

動作確認

 

JavaScript　「みかんです」「その他です」が続けて実行される

 

// const myFruit = 'りんご';
const myFruit = 'みかん';
// const myFruit = 'いちご';

 

switch(myFruit){

 

case 'りんご':
alert('りんごです');
//break;　←　breakを省略

 

case 'みかん':
alert('みかんです');
//break;

 

default:
alert('その他です');
//break;
}

動作確認

 

JavaScript　複数の条件をまとめて処理できる

 

// const myFruit = 'りんご';
const myFruit = 'みかん';
// const myFruit = 'いちご';

 

switch(myFruit){

 

case 'りんご':
case 'みかん':
alert('りんごかみかんです');
break;

 

default:
alert('その他です');
break;
}

動作確認

 

JavaScript　switchの式は厳密な等価（===）

 

const myValue = '100';

 

switch(myValue){

 

case 100:
console.log('数字の100です'); // 文字列の'100'ではないので実行されない
break;

 

case '100':
console.log('数字の100ではありません');
break;

 

// defaultは省略
}

動作確認

 

 

 

 

Chapter1 JavaScriptの基礎記事一覧

このページの先頭へ戻る