じゃんけんLINEBOTを作りながら、超初心者がコードについて勉強してみました。

はじめに

普段はエンジニア業界とは無縁のふつーの会社員です。
ずーっと同じ食品会社にいるので、新しいことにチャレンジしたくて、
縁遠いプログラミングを学び始めました。
はじめて、まだ３週間・・・。
この技術がどんどん普及していくように
超初心者の視点、つまづきやすいことなど発信していきたいと思います。
これから勉強始める人、教える立場にある人に読んでもらえたらうれしいです。

これを作った目的

「習うより慣れよ」ということで、とりあえず作ってみました。コードって見ているだけだと覚えないし、暗記するのも年齢的につらいですう。
「簡単なコードでできる」、「身近で役に立ちそうなもの」として自分がいつも勝てるじゃんけんLINEBOTにしました。子供の遊び相手やちょっとしたゲン担ぎしたい友達に使いたいな・・・。

仕様

・じゃんけんをしたら、必ず自分が「勝つ」か「あいこ」にしてくれるボット。
・ぐー、ちょき、ぱー以外に一言そえてくれる。
・カタカナでグー、チョキ、パーを書かれたら、オウム返しであいこになる。
・子供が聞きがちな「名前」や「年齢」には別途対応する

使った環境

今回は1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefestを参考につくりました。
Node.js v10.16.3
Windows 10 pro
Visual Studio Code v1.39.1

動作確認

子供にやらせたら、きゃはは～と喜んでそれなり好評。

完成まで躓いたこと・・・
・コードの先頭に書いてある＄を間違えてコピペしてError
・コードの範囲を間違える。Visual Studioは色別で書いてくれたり、とっても親切なんですが果てしなく続いた後のカッコはどこで閉じているか分からず、迷子になる・・・・。
・Server.jsを修正・保存したあと、一度ターミナルをCtrl+Cで止めて再度サーバーを走らせないと変更が反映されず・・・。気づくまで頭を抱える。

コードとコードリーディング

プログラマーと方ってコードの前に説明を入れるときは//を入れるんですね。最初はすべてコードだと思ってました。学生時代、英語を１文１文訳して語学力が上がったので今回も同じように解読してみました。表現が間違えているところもあるかもしれませんが備忘録的に残します。

//厳格モードの宣言
'use strict';
//expressのモジュール（プログラムのパーツ）をインポート
const express = require('express');
//LINE message APIのSDK(ツールセット）をインポート
const line = require('@line/bot-sdk');
//コンピューターの外とやり取りするポート（ドア）を3000に設定
const PORT = process.env.PORT || 3000;
//Lin Message APIの変数を登録
const config = {
    channelSecret: 'LINE　Messeage APIのChannel Secret',
    channelAccessToken: 'LINE　Messeage APIのアクセストークン'
};
//expressを使ってサーバーを作る
const app = express();
//サーバー（https://localhost/）にアクセスしてきたときに「Hello」を返す
app.get('/', (req, res) => res.send('Hello LINE BOT!'));
//webhookにpost要求する。そのやり取りをterminalに記録する。
app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);
//サーバー内の細かな処理を一括で表すコード。Allが動いてからthenが動く。handleEventは下で動く関数の名前。
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});
//クライアント機能が動くようにする。
const client = new line.Client(config);
//handleEventという関数を動かす。
function handleEvent(event) {

  const message = event.message.text;
  let replyMessage = event.message.text;
//event、message以外はnull(空）で返す
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }


  // 部分一致（どこかで1つ「じゃんけん」の文言が出る場合の返答）
  if( message.indexOf('じゃんけん') > -1 ){
    replyMessage = 'お、いいね。ぐー、ちょき、ぱーのどれかだしてね。最初はぐー、じゃんけんぽん';
  }
 // 部分一致（どこかで1つ「なまえ」の文言が出る場合の返答）
  if( message.indexOf('なまえ') > -1 ){
    replyMessage = 'わたしのなまえは　〇〇です。';
  }
 // 部分一致（どこかで1つ「さい」の文言が出る場合の返答）
  if( message.indexOf('さいです') > -1 ){
    replyMessage = 'わたしはうまれたてです。';
}
 // 部分一致（どこかで1つ「へー」の文言が出る場合の返答）
if( message.indexOf('へー') > -1 ){
    replyMessage = 'ほー';
}

  // 特定の文言だけ返答する。３種類の返答をランダムに。
  if( message == 'ぐー' ){
    const randomMessages = [
        "ちょき　なかなかつよいね",
        "ちょき　まけちゃった",
        "ぐー　きがあうね"
    ];
    replyMessage = randomMessages[Math.floor(Math.random()*3)];
  }
  // 特定の文言だけ返答する。３種類の返答をランダムに。
  if( message == 'ちょき' ){
    const randomMessages = [
        "ぱー　くやしい＞＿＜",
        "ぱー　最強やん",
        "ちょき　二人合わせてバルタン聖人"
    ];
    replyMessage = randomMessages[Math.floor(Math.random()*3)];
  }
  // 特定の文言だけ返答する。３種類の返答をランダムに。
  if( message == 'ぱー' ){
    const randomMessages = [
        "ぐー　おぬしもやるな",
        "ぐー　どんだけ強いの",
        "ぱー　ハイタッチ　"
    ];
    replyMessage = randomMessages[Math.floor(Math.random()*3)];
  }
//オウム返しの設定
  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: replyMessage
  });
}
//一番上段のexpressのコードとのセット。ポートとつなぎます。
app.listen(PORT);
//つながれたらTerminalに記載します。
console.log(`Server running at ${PORT}`);

（参考にさせていただいた情報）
Express Node.jsのための高速で革新的な、最小限のWebフレームワーク
[不動の鳥の勉強記録　Javascripitが分からないなりにLINE　Botのサンプルを読み解く]
(http://hiyo-ac.hatenablog.com/entry/2018/02/04/230231)
Node.jsとExpressでWeb APIを作ってみよう

感想

超素人にもコードのコピペをすればLINEBOTができるのは感動的でした。ハイソなエンジニアの方には申し訳ないですが、こんなに早く物が作れるなんてお料理よりも手軽かも・・・。
今回は初めてなので単純な言葉を返すだけのものでした。今後は少し複雑なもの、例えば天気情報から明日の洗濯物外干しOK判定LINEBOTとか、位置情報からお出かけスポット紹介してくれるものなんかに挑戦したいと思います。