Zenn
Open10

学生エンジニアがJavaScriptを学びながらアウトプットするためのスクラップ

JavaScript
ピン留めされたアイテム
naokinaoki

JavaScriptの学習法

JavaScriptの学習をはじめていきます！
友人から「このサイトは、練習問題が豊富でやってて楽しいんじゃない？」とオススメして頂いたので、こちらの学習を進めてみます！

コードの可読性向上面も考慮した、ドキュメントなので
読んでいてとても楽しいです。
https://ja.javascript.info

naokinaoki

"use strict" / 最新? 厳しい?

use strictは、classやmoduleなどの高度な言語構造の場合、自動で有効化

// わからんかもしれんけど、とりあえず明示しておくと良いゾ。
'use strict';

javascript.infoさんから引用させていただきました！
厳しくなるみたいなイメージで良さそうですね！

naokinaoki

変数 / 箱?ラベル?

userNameという箱の中に、Johnと書かれてあるラベルを入れているというものですね！

let userName = 'John';
naokinaoki

プログラムの出力方法 / alert cofirm prompt

javascript.infoでは、Webの出力を中心に学習していくので、

<!DOCTYPE html>
<script>
  alert('Hello world!'); // ポップアップ表示のやつ
  prompt(title[, default]); // alertに入力機能をつけるやつ
  confirm(question); // alertにキャンセル機能つけるやつ
</script>

$node fileName.jsを使って、console.logで出力していました。
(でも、環境構築の手間もあるので.htmlでalertが良いのかもですね)

console.log('hello world!');
naokinaoki

厳密な等価 / とりあえず===にしとけ!

2つの変数を比べる時に、==を使うことがあると思います。
適当に掃除する人より、きちんと綺麗に掃除する人の方が良いですよね！
そういうことです。

==と===の違い

型の違いまで、確認してくれるんです。

// ==
console.log( 0 == false ); // true

// ===
console.log( 0 === false ); // false 型が異なるため

// スイートカップル
console.log( null == undefined ); // true
console.log( null === undefined ); // false
naokinaoki

条件分岐 / if elseと三項演算子について知る

if elseと三項演算子という、2通りの書き方があります。動作は同じです。
a+bが4未満なら、Trueとなり、result = 'Below'
そうでないのであれば、Falseとなり、result = 'Over

if (a + b < 4) {
  result = 'Below';
} else {
  result = 'Over';
}

// 三項演算子
result = (a + b < 4) ? 'Below' : 'Over';

だけれど三項演算子は可読性が悪いため、「あまり使用したくない」だそうです。
確かにぱっと見、どちらの方が処理が読みやすいかと言われると...
if elseが見やすいですね。

naokinaoki

動くものを実際に作ってみた! 遊んでみた!

マックシェイクのランダム出力

マイクシェイクが飲みたくなった僕は、
「そうだ！配列に格納された種類をランダムに出力させてみよう！」と思いました
(なんて、エンジニアの鑑なんでしょうか)

const macShake = ["バニラ", "イチゴ", "チョコレート"];

const randomIndex = Math.floor(Math.random() * macShake.length);

// 愚策、黒歴史
// if (randomIndex === 0) {
  //   console.log(macShake[0]);
// } else if (randomIndex === 1) {
  //   console.log(macShake[1]);
// } else {
  //   console.log(macShake[2]);
// }

console.log(macShake[randomIndex]); // チョコレート

Math.randomで、0以上1未満のランダムな少数を生成してくれます

console.log(Math.random()); // 0.32179860276033856

配列の数と書けることでrandomIndexとして、それを少数切り捨てするために
Math.floorを使っています！

console.log(Math.random()); // 0.32179860276033856
console.log(Math.floor(Math.random())); // 0

コメントアウトしているものは愚策でした...
説明するのが恥ずかしいので割愛します。
ちなみに私が購入したのはチョコレートでした！

naokinaoki

論理演算子

OR / ||

説明

左から順に真偽を確認し、**真(true)**であれば値を返す

構文

result = value1 || value2 || value3;

実例

let firstName = "";
let lastName = "";
let nickName = "SuperCoder";

alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder

AND / &&

説明

左から順に真偽を確認し、**偽(false)**であれば値を返す

構文

result = value1 && value2 && value3;

実例

alert( 1 && 2 && 3 ); // 3, 最後のオペランド

章末問題

説明

promptでログインを要求するコードを書いてみよう
仕組みは図の通りです。

実例

<script>
  const userName = prompt("あなたの名前は", '');

  if (userName === "Admin") {
    const passWord = prompt("あなたのパスワードは", '');

    if (passWord === "TheMaster") {
      alert("Welcome!");
    } else if (passWord === '' || passWord === null) {
      alert("Canceled.");
    } else ("Wrong password");

  } else if (userName === '' || userName === null) {
    alert("Canceled");
  } else {
    alert("I don't know you");
  }
</script>

特に==を使う理由がないので、積極的に厳密等価である===を使うようにしました。
また、変数の命名については、「以降のコードを読まずとも、変数名だけでどんなプログラムなのか」が伝わることを意識しながら書いてみました！

naokinaoki

NULL合体演算子

説明

a ?? bの結果:

  • aがnullあるいはundefinedでなければa
  • そうでなければ、b

構文

const firstName = null;
const lastName = null;
const nickName = "Supercoder";

// 最初の null/undefined でない値を表示します
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

「ん？ || と同じなんじゃないの？」と思うかもしれません。

OR演算子との違い

const height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0
  • || は最初の 真 の値を返します。
  • ?? は最初の 定義済み の値を返します。

|| は false, 0, 空文字""とnull / undefinedを区別しない！

naokinaoki

素数を出力には!?

素数(prime)とは

素数とは、１より大きい自然数かつ、１と自分自身以外では余りなく割り切れない値のこと
prime
1 3 5 7
not prime
2 4 6 8 9

解法1 ラベルを使った処理

const maxValue = 10; // 指定した値までの処理

nextPrime: // 次の素数判定処理へスキップするためのラベル
for (let i = 2; i <= maxValue; i++) {
  // isPrime 素数かの判定処理
  for (let j = 2; j < i; j++) {
    // (余りが出なければ)素数でなければ、falseとなりconsole.logをスキップ
    if (i % j === 0;) continue nextPrime;
  }
  console.log(i);
}

説明

iが4の場合、4 % 2 === 0がtrueとなるので、nextPrimeラベルへスキップ

解法2 関数を使った処理

Copilotを使いながら...

function printPrimes(maxValue) {
  for (let i = 2; i <= maxValue; i++) {
    if (isPrime(i)) {
      console.log(i);
    }
  }
}

function isPrime(num) {
  for (let i = 2, sqrt = Math.sqrt(num); i <= sqrt; i++)
    if (num % i === 0) return false;
  return num > 1;
}

printPrimes(10);

説明

解法1と、処理の仕方はcontinueではなく、true falseでスキップ処理をしていて、
同じような感じなのだけれど、表現の仕方が違う部分は

sqrt = Math.sqrt(num);
i <= sqrt;

ここでのnumは、printPrimes関数処理のfor文で定義している、iが該当する。
また、Math.sqrtは平方根にする役割を持っていて、numが9の場合、i <= 3となり
無駄なループ処理を削減し、速度の向上をはかっている(たぶん)

解法3 アルゴリズム体操〜

はじめてのアルゴリズムを使ったプログラムを組んでいきます
(copilotくんとのペアプロ)
素数のアルゴリズムで有名な、エラトステネスのふるしというものがあるそう...
https://algo-method.com/descriptions/64

function printPrimes(maxValue) {
  let primes = Array(maxValue + 1).fill(true);
  primes[0] = primes[1] = false;

  for (let i = 2; i <= Math.sqrt(maxValue); i++) {
    if (primes[i]) {
      for (let j = i * i; j <= maxValue; j += i) {
        primes[j] = false;
      }
    }
  }

  for (let i = 2; i <= maxValue; i++) {
    if (primes[i]) console.log(i);
  }
}

printPrimes(10);

アルゴリズムのレベルとしては、比較的易しめなのかな...

説明

配列に素数のみを入れていき、倍数は格納しないようにするプログラムです。
2の倍数である、4 6 8は素数ではないので、false
3の倍数である、9は素数ではないので、false （6はすでに2の時にfalse判定）
よって、現在配列に格納されているのは
2 3 5 7となります！

感想

アルゴリズムをはじめて触れた感触としては、
最初「わけわかんねー！！」でしたが、
時間をかけて「楽しいぞ！？」となるようになりました。
Copilotくんがこのアルゴリズムを提案してくれたので、Copilotくんのおかげですね！？