wikipediaのワードを使った連想ゲームアプリを作ってみた【Node.js+express】

9441 ワード
JavaScript アプリ開発 Express Node.js JavaScript テキストリンク

このアプリはいたってシンプルで、wikipediaからランダムに取得したワードに関連した言葉を３つ入力するアプリです。
（めちゃくちゃ簡単なアプリです。ご承知おきください。）

実装環境

ubuntu：18.04.5 LTS
node.js ：v10.14.2
express : 4.16.0

アプリの使い方


こちらがトップ画面です。「岐阜中警察署」と出ています。思いついたものなんでもいいので、３つ入力します。


中学校なのか、警察署なのか、どちらなのでしょうか…？
あとは岐阜から連想しました。

送信を押すと、また新しいワードが出てきます。「光原逸裕」って誰でしょうか。何回もやっていると「この人誰だよ」っていう人物名がめちゃくちゃ出てきます。笑
本当に知らないものが多いので、高度な連想力が試されます。

技術紹介

今回は、random-word-wikipediaというAPIを使いました。Wikipediaのあらゆるページからランダムに単語を引っ張ってきてくれるものです。

使い方

まずrandom-word-wikipediaをインストールします。

$ npm install random-word-wikipedia

そして、requireでモジュールを読み込み、thenによって取得できます。下のコードは公式ドキュメントのusageです。

const randomWordWikipedia = require('random-word-wikipedia');

randomWordWikipedia().then(console.log);
//=> [ 'Saxifraga spathularis' ]

randomWordWikipedia('ja', 2).then(console.log);
//=> [ 'ジョン・イサーク・ブリケ', '月は闇夜に隠るが如く' ]

ソースコード

実際にこのAPIを使用したコードの抜粋です。

index.js
const randomWordWikipedia = require('random-word-wikipedia');

function wrap_randomWordWikipedia(callback){
  randomWordWikipedia('ja').then((value) => {
    callback(value);
  })
}

router.get('/', function(req, res, next){
  function callback(param){
    var data = {
        theme: param,
    }
    res.render('index', data);
  }

  wrap_randomWordWikipedia(callback);

});

router.post('/add', (req, res, next) => {
  function callback(param){
    console.log('callback: ', param);
    var ans1 = req.body['ans1'];
    var ans2 = req.body['ans2'];
    var ans3 = req.body['ans3'];
    var data = {
      theme: param,
      ans1: ans1, 
      ans2: ans2, 
      ans3: ans3
    }
    res.render('index', data);
  }
  wrap_randomWordWikipedia(callback);
})
index.pug
extends layout

block content
  h1= "Output three objects"
  p 「#{theme} 」に関連したものを入力してください
  form(method="post" action="/add")
    input(type="text" name="ans1")
    input(type="text" name="ans2")
    input(type="text" name="ans3")
    input(type="submit" name="送信")

  p #{ans1} #{ans2} #{ans3}

苦戦したポイント

random-word-wikipediaが非同期で動くモジュールという点に苦戦しました。
後から動くモジュールをどうレンダリングするか色々試行錯誤しましたが、結局コールバック関数を使うことにより同期処理を非同期処理の後に実行させました。
もっといい書き方があればご教授いただけると幸いです。

解決方法を書いていたら長くなったので、別記事にします。（アップ次第、こちらにリンク貼ります。）

これを作った意図

人と会話するときに、何にも話題とか返答が思いつかないことってありませんか？
私はよくあるので、頭の体操になるんじゃないかという軽い思いつきで作りました。

最後に

まだデータベース接続もしておらずとても簡単なつくりですが、とりあえずアウトプットしました。
ちょっとだけ作るつもりでしたが、作り出すと色々発想が生まれてきて、タイム計測やオリジナル問題など色々機能追加しようかと考え中です。やっぱ自作アプリは楽しいですね。

最後までご覧いただきありがとうございました！
もし参考になったという方がいれば、LGTMお願いします！