Chapter1 基礎
- 001 JavaScriptの基礎を覚えたい
- 002 JavaScriptの書き方を知りたい
- 003 JavaScriptを別ファイルに書きたい
- 004 プログラムの実行途中の値をログで確認したい
- 005 計算プログラムを書きたい
- 006 変数を使いたい（let）
- 007 定数を使いたい（const）
- 008 プログラムに対してコメントを書きたい
- 009 ふたつの値を比較したい（比較演算子）
- 010 複合代入演算子を使いたい
- 011 関数（function）を扱いたい
- 012 アロー関数（=>）で関数を定義したい
- 013 関数に渡す値の初期値を設定したい
- 014 関数に任意の数の引数を渡したい
- 015 条件に応じて処理を分けたい（if文）
- 016 条件に応じて処理を分けたい（switch文）
001 JavaScriptの基礎を覚えたい
※省略
002 JavaScriptの書き方を知りたい
<!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を別ファイルに書きたい
<!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>
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 プログラムの実行途中の値をログで確認したい
const a = 10;
const b = 20;
const sum = a + b;
console.log(sum); // 結果： 30
console.log('こんにちは。', '現在', new Date(), 'です');
005 計算プログラムを書きたい
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）
let myName = '鈴木';
alert(myName);
let currentData = new Date();
console.log(currentData);
let myFunction = () => console.log('関数です');
myFunction();
myName = '高橋';
console.log(myName);
let number1 = 10;
let number2 = 20;
let sum = number1 + number2;
console.log(sum); // 結果：30
let familyName = '鈴木';
let firstName = '太郎';
let fullName = familyName + firstName;
console.log(fullName); // 結果：'鈴木太郎'
let value1 = 100;
let value2 = value1;
console.log(value2); // 結果：100（value1と同じ値）
let value;
console.log(value); // undefined
let a = 1, b = 2, c;
console.log(a + b); // 3
console.log(c); // undefined
007 定数を使いたい（const）
const myName = '鈴木';
alert(myName);
const myString = '鈴木';
console.log(myName);
const myFunction = () => console.log('関数です');
myFunction();
const number1 = 10;
const number2 = 20;
const sum = number1 + number2;
console.log(sum); // 30
const familyName = '鈴木';
const firstName = '太郎';
const fullName = familyName + firstName;
console.log(fullName); // 鈴木太郎
const a = 1 , b = 2;
console.log(a + b); // 結果3
// 配列
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 プログラムに対してコメントを書きたい
const value = 100; // 価格
const tax = 1.1; // 消費税10%
// 消費税込みの値段を求める
const price = value * tax;
const result = 100 + 200 /* + 300 */ + 400;
console.log(result); // 700 ← 300が無視される
/* これは複数行のコメントです。
改行しても有効です。 */
/*
* このように体裁を整えて
* 使うこともできます。
*/
009 ふたつの値を比較したい（比較演算子）
console.log('鈴木' == '鈴木'); // true
console.log(10 < 30); // true
console.log(20 >= 30); // false
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 参照先が同じだから
console.log(10 == '10'); // true
console.log(10 === '10'); // false
console.log(20 != '20'); // false
console.log(20 !== '20'); // true
010 複合代入演算子を使いたい
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）を扱いたい
function myFunction(a){
const result = a + 2;
return result; // 戻り値
}
console.log(myFunction(10)); // 結果：12
function calcSum(a,b,c){
const result = a + b + c;
return result;
}
console.log(calcSum(1,2,3)); // 結果：6
function myMessage(){
console.log('こんにちは');
return 100; // 戻り値
}
myMessage(); // こんにちは
console.log(myMessage()); // 結果：こんにちは 100
function myMessage2(){
console.log('こんにちは');
}
myMessage2(); // 結果：こんにちは
function myFunction2(){
return 100;
// return以降のブロック内の処理は実行されない
console.log('こんばんは');
}
console.log(myFunction2()); // 結果：100
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
// 関数の宣言
function calcFunction(price,tax){
const result = price + price * tax;
return result;
}
// 関数を実行し、戻り値を定数に代入
const myResult = calcFunction(100 , 0.1);
console.log(myResult); // 結果：110
012 アロー関数（=>）で関数を定義したい
const calcSum = (a, b, c) => {
const result = a + b + c;
return result;
}
console.log(calcSum(1, 2, 3)); // 結果：6
const myFunction1 = (a) => {
return a + 2;
}
console.log(myFunction1(5)); // 結果：7
const myFunction2 = a => {
return a + 2;
}
console.log(myFunction2(6)); // 結果：8
const myFunction3 = a => a + 2;
console.log(myFunction3(7)); // 結果：9
013 関数に渡す値の初期値を設定したい
/**
* 税込みの値段を返す関数
* @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 関数に任意の数の引数を渡したい
/*
* 引数の合計値を返す関数
* @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文）
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未満です');
}
// 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文）
// const myFruit = 'りんご';
const myFruit = 'みかん';
// const myFruit = 'いちご';
switch(myFruit){
case 'りんご':
alert('りんごです');
break;
case 'みかん':
alert('みかんです');
break; // breakで処理が終了
default:
alert('その他です');
break;
}
// const myFruit = 'りんご';
const myFruit = 'みかん';
// const myFruit = 'いちご';
switch(myFruit){
case 'りんご':
alert('りんごです');
//break; ← breakを省略
case 'みかん':
alert('みかんです');
//break;
default:
alert('その他です');
//break;
}
// const myFruit = 'りんご';
const myFruit = 'みかん';
// const myFruit = 'いちご';
switch(myFruit){
case 'りんご':
case 'みかん':
alert('りんごかみかんです');
break;
default:
alert('その他です');
break;
}
const myValue = '100';
switch(myValue){
case 100:
console.log('数字の100です'); // 文字列の'100'ではないので実行されない
break;
case '100':
console.log('数字の100ではありません');
break;
// defaultは省略
}
