講義 第1回

初めに

今回の目的

• JavaScriptの基礎知識を身につける
• 実装の仕方・調べ方を身につける

講義中の確認資料

• 【入門】初心者が練習すべき Linux コマンドの一覧　
  https://hogetech.info/linux/base/command
• Linux viのコマンド一覧
  https://itsakura.com/centos_vi_command

講義

開発

流れの一例

• 要件定義
• 機能設計
• 開発 ←ここ
• テスト
• プルリクエスト レビュー
• リリース

開発とは...

要求された機能をコーディングなどで実装していく作業

JavaScriptとは...

クライアントサイド（ブラウザ内）・サーバーサイドどちらの処理も出来る多目的な言語

• 動的型付け言語
• インタプリタ言語
• 非同期処理
• イベント駆動型
• シングルスレッド環境

Node.jsとは...

サーバーサイドでJavaScriptを使う実行環境の一つ

体験(ハンズオン)

ファイル作成

$ vi test.js

プログラム記述

test.js

console.log("test");

プログラム実行

実行結果

$ node test.js

開発をする上での基本スタンス

覚えようとしない　　

調べれば良い

完全に理解できなくても気にせず先に進む

徐々に理解できる

一定期間調べ、考えてもわからなければ聞く

例：15分

考えることが大事

似たような事象が起きたときに役に立つ

とにかく書いてみる

自分なりに変更してみる

人が読みやすいコードを書く

チームで開発するため

エラーをよく読む

oddEvenIdentifier.jsの12行目で
ReferenceError: aa is not defined
というエラーが発生している

/hoge/answer/oddEvenIdentifier.js:12
    };aa
      ^

ReferenceError: aa is not defined

Geogle検索をうまく使う

• after:2023
  2023年以降の記事のみ表示
• ReferenceError: * is not defined
  *にはどんな文字が入っても良い→エラー検索に活用
• site:developer.mozilla.org
  developer.mozilla.orgのドメインの記事のみ表示
• apple "green"
  appleの記事の中からgreenを必ず含む記事のみ検索

基礎知識

変数

値を再利用するため、変数に格納する。

• const 再代入しない変数を定義する 基本的にはこちらを使う
• let 再代入する変数を定義する

const word = "hello";
let number = 12;

word = "bye"; // エラー
number = 13; // OK

データ型

データ型	説明	例
String	文字列	"hello" 'Bye'
Number	数字	100 -3
Boolean	真偽値	true false
(Undefined)	変数に値が未割り当て	undefined
-----------	-------	--------------
Object	オブジェクトなど	{"本":"book", ペン:"pen"}
	配列(Array)	[1,2,5]
	空(Null)	null

それぞれの型がそれぞれメソッドを持つ

const word = "hello";
const upperWord = word.toUpperCase(); // "hello".toUpperCase()
console.log(upperWord);

実行結果

HELLO

※メソッド

処理をひとまとまりにしたもの
toUpperCase()は文字列を大文字にする処理

調べ方：

• Stringのメソッドは下記から参照する(String.prototype.を見る)
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
• Geogle・chatGPTで調べる

ハンズオン(5分)

処理を記述して下記が表示されるようにしてください。

$ vi helloworld.js

helloworld.js

const hello = "Hello!";
const world = "World";
// 下記に処理を記述

実行結果

$ node helloworld.js
Hello!World

Tips:

• 公式リファレンス　　
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/concat
• Geogle で検索

JavaScript 文字列　結合　メソッド

• Chat GPTに聞く

JavaScriptで文字列を結合する方法を教えてください。

配列とオブジェクトについて

配列 []

使用ケース

同種のデータを集めて、順番付ける際に使用されることが多い

例

const colors  = ['red', 'yellow', 'blue'];
const numbers = [1, 2, 3];

データへのアクセス方法

※最初のindexは0

console.log(numbers[0]);
1

console.log(numbers[1]);
2

オブジェクト {}

使用ケース

異種のデータを関連づけて、構造化する際に使用されることが多い
値だけでなく関数保持できる
{ key:value }

objectが保持しているもの	名称
値	プロパティ
関数(処理)	メソッド

例

const user = {
  name: "Taro",
  age: 24
};

データへのアクセス方法

console.log(user.name);
Taro

console.log(user["age"]);
24

注意点

文の末に;を付ける

つけなくても挙動に差はほぼない

全角は使わない

文字やスペース
バイト数が違うため

コメントアウト

行の初めに//がある行は処理がされない
コードの説明などを書く場合が多い

// 読み込みがされない

ハンズオン(5分)

処理を記述して、下記が表示されるようにしてください。

$ vi introduce.js

introduce.js

const person = {name: "John", age: 24};
// 処理を記述

実行結果

$ node introduce.js
私の名前はJohnです。年齢は24歳です。

Tips

• Geogle で検索

JavaScript オブジェクト　値取得

• Chat GPTに聞く

JavaScriptでオブジェクトで値を取得する方法を教えてください。

※テンプレートリテラル

const temperature = 24;
console.log(`今の気温は${temperature}度です`);

実行結果

今の気温は24度です

実行パターン

順次実行

コードは上から下に実行される

ループ

繰り返し処理

for

for (初期化式; 条件式; 増分式){
  // 繰り返し実行する処理
};

-　初期化式
繰り返し処理の前に一度だけ実行される処理（変数の初期化など）
-　条件式
trueを返す間は処理を続ける
-　増分式
繰り返しの終わりに実行する処理

例

for (let i = 0; i < 10; ++i){
  console.log(i);
};
// 実行結果
0
1
2
...
9

Tips

• オブジェクト{}
  for ... in が使える
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in

const obj = { a: "あ", b: "い", c: "う" };
for (const key in obj) {
  console.log(key, obj[key]);
};

// 実行結果
a あ
b い
c う

• 配列[]
  for ... of が使える
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of

const array = [1, 2, 3];

for (const ele of array) {
  console.log(ele);
};

// 実行結果
1
2
3

while

while(条件式){
  // 繰り返し処理
  // 増分処理
};

-　条件式
trueを返す間は処理を続ける
-　増分式
繰り返しの終わりに実行する処理　　
記述しないと無限ループに陥るので注意

例

let i = 0;
while (i < 10) {
  console.log(i);
  i += 1 // i = i + 1
};

// 実行結果
0
1
2
...
9

条件分岐

条件によって処理を替える

if　・else　if　・else

if (条件式１) {
  // 条件式1がtrueの時　実行する処理
} else if (条件式2){
  // 条件式1がfalseかつ条件式2がtrueの時 実行する処理
} else {
  // 条件式1がfalseかつ条件式2がfalseの時 実行する処理
};

例

if (number > 0) {
  console.log(number + " は正の数です。");
} else if (number < 0) {
  console.log(number + " は負の数です。");
} else {
  console.log("数値は0です。");
};

switch

分岐が多いときに使用する
breakを記述しないと無限ループに陥るので注意

switch (値) {
  case a:
    // 値 === aの時に実行する処理
    break;
  case b:
    // 値 === bの時に実行する処理
    break;
  default:
    // 当てはまらなかったときに実行する処理
};

例

switch (food_categry) {
  case "meat":
    console.log("肉");
    break;
  case "vegetable":
    console.log("野菜");
    break;
  case "fruits":
    console.log("果物");
    break;
  default:
    console.log("知らない食べ物");
};

ハンズオン(10分)

switchを使って
dayが
"月"〜”金”の時平日
"土"、"日"の時休日
と表示する機能

$ vi day_of_week.js

day_of_week.js

let day = "火"; // 月火水木金土日のいずれかを入れる
// 処理を記述

実行結果

$ node day_of_week.js

平日

Tips

• それぞれの日で分岐する
• caseの後に複数条件を指定できるか
  • Geogle で検索

JavaScript switch 条件　複数

• • Chat GPTに聞く

JavaScriptでswitchを使用する際、複数の条件を指定したい

スコープ

変数がアクセスできる範囲の事
{}の中から外にはアクセス可能
{}の外から中にはアクセス不可

const name = "Tom";

if (true){
  console.log(name); // アクセス可
  
  const color = "red" ;
}

console.log(color); // アクセス不可

開発の進め方

ハンズオン(15分)
実装したい機能

1から10の値に
奇数には"奇数:"
偶数には"偶数:"
を付けて表示する

結果

実行結果

$ node oddEvenIdentifier.js

奇数:1
偶数:2
奇数:3
偶数:4
奇数:5
偶数:6
奇数:7
偶数:8
奇数:9
偶数:10

考え方

機能を細分化

• 1-10の配列の全ての値を判定する(= for)
  →配列にはfor ofが使える
• 偶数か奇数かの条件で処理を変える(= if)
  →偶数でない場合(else)は必ず奇数になる
• 偶数は2で割って余りが出ない・奇数は余りが出る
  →余りを求める演算子がある

機能ごとに実装

調べながらコーディングする

• Googleで検索

JavaScript 余り　求め方

• Chat GPTに聞く

JavaScriptで余りを求める演算子を教えてください。
（演算子の意味も教えてください。）

具体化して実装する

• 抽象的なものは具体化して考える
• 繰り返し処理が必要なものは一回の処理のみで考える
  など

動作確認

• 変数に格納されている値を確認したいとき
  プログラムに下記を記述

console.log(<確認したい変数名>);

• プログラム実行

$ node <ファイル名>
変数の値が表示される

全体での動作確認

変数名の整理など

$ node <ファイル名>

関数とクラス

コードを構造化し、読みやすく再利用しやすくするために使用
メンテナンス性が向上
なるべく処理を共通化し、コード量を少なくすることを意識する

関数

// 関数定義
function plus (a, b) {
  return a + b;
};
// 関数実行
plus(1,5);

6

or

const plus = function (a, b) {
  return a + b;
};

or

const plus = (a, b) => a + b;

クラス

オブジェクトの設計図を決めて
それを元に新たなオブジェクト（インスタンス）を作成する

class Person {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  laugh(){
    console.log(this.name + "www");
  }
}

const tom = new Person("Tom", "22");
const nancy = new Person("nancy, 24");

tom.laugh();

nancy.laugh();

ハンズオン(10分)

• 関数を使って下記2問を計算してください

問題

1.
333 × 334 ÷ 3

2.
4857 × 4444 × 1111 ÷ 4

vi calculate.js

calculate.js

// 処理を記述

実行結果

$ node calculate.js

• 実行結果は同じ出力になるように、下記コードを記述量をなるべく減らして書いてください(コードを整理===リファクタリング)

$ vi national.js

national.js

const data1 = {place: "Japan", isMarried: true, food: ["mochi", "sukiyaki"]};
const data2 = {place: "America", isMarried: false , food: ["steak", "hamburger"]};
const data3 = {place: "France", isMarried: true , food: ["cheese", "quiche"]};


console.log("私は" + data1.place + "出身です");
if (data1.isMarried){
  console.log("結婚してます");
} else {
  console.log("結婚してません");
}

console.log(data1.food[0]);
console.log(data1.food[1]);
console.log("が好きです");

console.log("\n");

console.log("私は" + data2.place + "出身です");
if (data2.isMarried){
  console.log("結婚してます");
} else {
  console.log("結婚してません");
}

console.log(data2.food[0]);
console.log(data2.food[1]);
console.log("が好きです");

console.log("\n");

console.log("私は" + data3.place + "出身です");
if (data3.isMarried){
  console.log("結婚してます");
} else {
  console.log("結婚してません");
}

console.log(data3.food[0]);
console.log(data3.food[1]);
console.log("が好きです");

実行結果

$ node national.js

私はJapan出身です
結婚してます
mochi
sukiyaki
が好きです

私はAmerica出身です
結婚してません
steak
hamburger
が好きです

私はFrance出身です
結婚してます
cheese
quiche
が好きです

Tips

• 処理が共通している部分を探す
  →関数でまとめられる
  →ループも使用できる

チェックポイント

必須

• エラーが起きないで処理が完了している
• 要求を全て網羅している

できれば

• インデントを合わせる
  半角スペース2つ or 半角スペース4つ など
  チームによって違う
  他の人が見たときに処理の単位が分かりやすい
• 変数名をわかりやすくする
  変数名だけで何を定義しているのかを分かりやすくする

const a = "math";  // ×

const subject = "math"; // 〇

const bestSubject = "math"; // ◎

• 関数やクラスを使って、処理を共通化する
  読みやすく、修正する際に容易

いずれ

• 機能をそれぞれモジュール化する
• パフォーマンスの高い記述にする

よくあるエラー

タイプミス

Reference Error

const hoge = 12345;
console.log(hohe); // hogeが正しい

文法エラー

Syntax Error

for (let i =0; i < 10; i++ ) {
  if (a = 0) {
    console.log(a)
  };
  // } がない

型エラー

Type Error

const num = 12345;
console.log(num.toUpperCase());
// Number型でString型のメソッドを使用

宿題

実行すると今日の曜日を返す処理を実装する

$ node dayOfWeek.js
金曜日

次回予告

• 非同期処理
• APIから情報取得