ぴよがち

技術的な話をします。みんなで強くなりましょう。

くら寿司キャンセル待ちBotを作れるようになろう！（後編 - 実装編） - 初心者向け

この記事は永久に書きかけです。 途中まででも読みたいという方のみご覧ください。

前編はこちら

piyo-p.hatenablog.com

後編でやること

前編では、Webサイトの挙動を調べることで、「予約可否を調べる」とは具体的に何を意味するのか、を言語化することに成功しました。

今回は、それを20行程度のプログラムとして、コンピュータが解る言語に書き下していきましょう！

1. 調べたい時間帯向けのURLの内容を取得する
2. 取得した内容に、「～」が含まれているかを確認する
3-a. 含まれていた場合、何らかの形で通知する
3-b. 含まれていなかった場合、数秒待ってまた1を繰り返す

JavaScriptの文法を知る

プログラムは、言語です。

言語を使うには、文法や覚えるべき概念がたくさんあります。

とはいっても、とりあえず「変数という概念とその定義の仕方」と、「関数を定義・実行する方法」と「繰り返しという概念が存在すること」さえ覚えていれば、あとはGoogle検索で何とかなります。

あなたが思っているほど怖くないです。Google検索もあるし、困ったらこの記事のコメント欄や、Twitterにスクリーンショットでも貼って「たすけて！」と言えば、みんな優しく教えてくれることでしょう。

世界はあなたが扉を開くのを待っています。
やっていきましょう！

実行環境を起動する

コマンドプロンプトを開き、「node」と入力してEnterキーを押してみましょう。

nodeコマンドの実行結果

nodeのインストールがうまく行っていれば、このように入力してください的な感じになります。

変数の定義

変数とは、「計算した結果を名前をつけて保存しておくことで、あとで使えるようにする」という機能です。

JavaScriptでは、const や `let というキーワードを使って新しい変数の名前とその内容（=値）を定義することができます。

const name = 'ぴよ'
let age = 100

上記のように、行の最初に let あるいは const と書き、その次に変数名を記し、その後にイコールでつないで値（=内容）を記します。

ちょうど創世記第一章3節あたりで神が世界を創造している時のように、自分の世界に変数を定義することができます。

const と let の違いは、その変数の値を上書きすることが可能か否かという点です。

const は後から値を上書きして代入できず、letは後から値を上書きできます。

let myLover = 'Taro'
myLover = 'Jiro'  // 上書きの例（いま覚える必要はないですが、これは「コメント」という機能です。「//」以降は人間様向けのコンテンツとして、プログラム中に好きなように注釈を書けます。）
// コメントは無視されるので、コピペして実行する際にはコメントを含めなくても構いません。

変数を定義する際は基本的に const を使い、どうしても必要なときだけ let を使いましょう。（let を使うと、書いたコードを後日読み返すときにいつ再代入されるかワクワクしながら読み返せますが、疲れます。）
なお、太古の遺産として var というキーワードでも変数を定義できますが、面倒に巻き込まれがちなので近寄らないほうが無難です。

変数の名前には、「記号と絵文字以外のUnicode文字」と、「数字」を用いることができます。アンダーバー(_)とドル記号($)も、記号ですが用いることができます。ただし、数字で始めることはできません。

いま定義した変数の内容を確認したいときは、console.logという機能を使うと良いでしょう。

定義した変数を利用する

一度変数を定義したら、その後のコード内でその変数名を記述すると、そこには変数の内容が書いてあるものとして解釈されます。

console.log(name) // nameの部分には、’ぴよ’があるものとして解釈されます。

console.log()の使用例 console.log(変数の名前)を実行することで、指定した変数の中身を見ることができます。

関数

関数とは、定められた処理のまとまりに名前をつけて定義したものです。

これにより、同じような処理を複数回実行する際に記述量を少なくしたり、
大きな処理を分割することでコードを読みやすくしたりすることができます。

関数は、入力を受け取り、受け取った入力に対して定められた処理をした結果を出力します。
入力のことを、引数と呼びます。出力のことを戻り値と呼びます。

関数を自分で定義して実行することもできますし、世界の誰かが作ってくれた関数を実行することもできます。

関数を定義する

関数は、「【functionキーワード】 【関数名】 【(引数（0～複数）)】【{処理}】」の形式で定義できます。

例えば、以下のような感じです。

function add (arg1、arg2) {
  return arg1 + arg2
}

また、多くの場合、以下のような省略記法でも関数を定義できます。（細かい点で違ったりするのですが、それはまた今度。）

const addTwo = (arg1, arg2) => {
  return arg1 + arg2
}

関数を実行する

関数は、関数名に「()」をつけるて記述することで実行できます。
括弧の中に引数をカンマ区切りで記述できます。

// add関数に2と3を引数として渡した実行結果を、変数resultに代入する
const result = add(2, 3)
console.log(result)
// 5 と表示されるはず

繰り返し

今回のbotでは、数秒ごとに処理を繰り返し実行する必要があります。

JavaScriptでは、「for」や「while」というキーワードを利用することで実現します。

詳しい使い方は、最初は繰り返し処理を実行したくなったときに都度Google検索すれば良いと思います。
いま概要を読んでおきたい方は、ループと反復処理 - JavaScript | MDNをお読みください。

プログラムを書く環境を用意する

これまでは、プログラムはnodeのコンソールで実行してきました。

nodeコンソールは手軽に利用できるので、1-2行の処理を試しに実行してみるのには最適なのですが、
複数行に渡るプログラムを書いていくには不便です。

そこで、あなたがプログラムを書くのをサポートしてくれる道具を用意して、そこでまとめて書いたものを実行できる環境を用意しましょう。

VSCodeをインストールする

VSCode（Visual Studio Code）は、Microsoftが作って世界中の開発者が改良している、すごく高機能な無料のテキストエディタです。

基本的な機能はWindows標準の「メモ帳」と同じく「テキストを編集する」のみですが、プラグインとして様々な機能が提供されています。

プログラムを書いているときに間違っていたら教えてくれたりするのでとても便利です。

こちらからインストールしましょう。 code.visualstudio.com

インストールの仕方がわからなくても大丈夫です。私達にはGoogle検索があります。
「VSCode インストール方法」で検索しましょう！

今回はこのVSCodeを使って、前編でインストールしたNodeJSで動くJavaScriptを書いていきます。

VSCodeを起動する

無事インストールできたら、起動しましょう。

起動すると、このような画面が表示されます。

VSCodeのWelcome画面のスクリーンショット

画面最上部の左端にある「ファイル」から「新規ファイル」を選択することで、プログラムを書くための画面を表示することができます。