4
1

More than 1 year has passed since last update.

自作一本ノック

Last updated at Posted at 2022-09-14

こんにちは。
N予備校でプログラミングをせっせせっせと勉強中のふーちんです。
N予備校プログラミング入門コースの「千本ノック」というものを真似して自分も一つ作ってみたので、「一本ノック」です。

N予備校プログラミング入門コースの千本ノック

N予備校プログラミング入門コースでは、今年「JavaScript 千本ノック」というのが追加されました。
それは簡単に言うと、JavaScriptの文法の問題集です。
演算子について、文字列について、ループ処理について、配列についてなどや他にもたくさんありますが、
それらを一つ一つできるだけ一言で説明し、それらを使って解くことができる問題を用意してあります。もちろん答えもあります。
流石に1000問もないですが、簡単な問題から、少しずつ工夫が必要になってくるので、ものすごく身に付くと思います。
問題の題名やフクロウのつぶやきが面白いなと思ったりもします。
やりたいと思ったあなた、是非ともN予備校に入学しよう~

作った問題

簡単な電卓の関数を作る問題です。もともと、引数の数値を2つ入れてそれらを足す、という問題があったのですが、四則できるように、記号も引数にして、それらを条件分岐するという問題にしました。
スクリーンショット 2022-09-09 204909.png

N予備校にある本当の「千本ノック」はこんな変な言葉づかいではないので「こんな問題なんか」とは思わんとってください笑
「ポイント!」なのに「ここがポイントなんだぜ!」になってたり
(自分の頭でやれとか言わんとってねー笑)とかあったりするわけありませんので、笑

問題の作り方

  1. 簡単な問題を考える。(アイデア勝負)
  2. N予備校の千本ノックがある教材ページを開く。
  3. どこでもいいので(できるだけ何も無い白い所で)右クリックする。
  4. 「検証」を押す。→するとデベロッパーツールのElementsタブが開くはず
  5. そこから、千本ノックの題名や問題文、ポイントとなる箇所が書かれてあるタグの部分をダブルクリックして、テキストを編集する。
  6. 場合によっては、Elementをコピーしたり、削除したりする。(その場合は右クリックしたり何とかやったらできる)
  7. 問題文とか編集出来て、完成したら、スクリーンショットをパシャ!

リロードしてしまうと全部元通りになっちゃいます!

スクリーンショットの取り方

Windows: Windows + Shift + S
Mac: Command + Shift + 3

僕が作った問題の答え

HTML
calc.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自作一本ノック「電卓で~す!」</title>
</head>
<body>
  <script src="./calc.js"></script>
</body>
</html>
JS
calc.js
'use strict';

/**
 * 自作千本ノック「電卓で~す!」
 * @param {number} n1 数1
 * @param {string} kigou 演算子の文字列
 * @param {number} n2 数2
 * @return 計算結果
 */
const calc = (n1 = 0, kigou = '+', n2 = 0) => {
  let result = null;
  switch(kigou) {
    case '+' || '':
      result = n1 + n2;
      break;
    case '-' || '':
      result = n1 - n2;
      break;
    case '*' || '' || 'x' || '×':
      result = n1 * n2;
      break;
    case '/' || '' || '÷':
      result = n1 / n2;
      break;
    // 余りも追加してしまった汗
    case '%' || '':
      result = n1 % n2;
      break;
    default:
      result = '無効な演算子です。';
      break;
  }
  return result;
}

console.log(calc(6, '*', 5));         // 30
console.log(calc(5.5, '+', 7.8));     // 13.3
console.log(calc(67879, '-', 55432)); // 12447
console.log(calc(13332, '%', 7));     // 4
console.log(calc(6, '', 5));          // 無効な演算子です。

ちなみに、N予備校の千本ノックでは答えはJavaScriptしか載ってないですが、実行させようと思ったらHTMLいるので作って下さい。(どっかのページのデベロッパーツールのコンソールとかnodejsのREPLとかでもいいけど)

最後に

N予備校最高です!初心者さんにめっちゃお勧めできます!
これからも僕は頑張って勉強していこうと思います!
ありがとうございました!

4
1
0

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
4
1