田中賢一郎氏の
Webアプリ開発入門: 3.Firebase編 Future Coders テキスト Kindle版
を読んでいます。
手を動かす量と、学ぶ量がちょうどよい学習テキストです。
今回は、FireStoreに登録した「titanic」データをnodejs python vue.jsから取得する練習です。
notejs pythonはなんとか行けたのですが、vue.jsが曲者。
なかなか動きません。
エラーとしては、、、
30:15 error 'query' is not defined no-undef
30:28 error 'where' is not defined no-undef
30:53 error 'where' is not defined no-undef
むむむ、ちゃんと答え通りに実装したのですが、、、
一応ダウンロードしてきた回答ともdiffをとって、スペース有無の違いはあるものの
綴りミスはないことは確認済み。
しかも where とか間違うはずがない。
1つ気になることがあるとすれば、回答のソースのなかで、
<script>タグの中の一部が省略されているんですね。
とはいえ、何を書けばよいかよくわからない。。。
公式ドキュメントを見て何を書くべきか調べるのが正攻法なのでしょうが、
いったんざっくり通したいのであまり時間は取りたくない、、、
どうしたものかと思案していたのですが、一つ前で勉強した、データを単にとってくるソースがありました。
import {initializeApp} from 'firebase/app';
import {collection,getDocs,getFirestore} from 'firebase/firestore';
ということは、、、
import {initializeApp} from 'firebase/app';
import {collection,getDocs,getFirestore,query,where} from 'firebase/firestore';
not defined と言われてた query と where も追加しました。
これで動いたりしないかな、、、
動いたよ
当てずっぽうでやってしまったので、公式ページも見ることにします。
うん、ちゃんと query や where を使うときは、import の中で定義していますね。
nodejsやpythonと比べてvuejsはちょっとやりずらいか、、、
しかし慣れればいろいろできそうだから頑張ります。
田中賢一郎氏の書籍は、最初この本を見てほれ込みました。
プログラミングは興味があったものの、ゲーム作りとなると、ちょっと遊んでいるようなイメージで敬遠していたのですが、氏のこの書籍はJavaScriptの基礎から丁寧に解説してくれており、途中から「プロトタイプ」「関数オブジェクト」など、高度な部分の解説までやってくれて、実装スキルがまだまだな私には読みごたえがありました。
そしてChapter5 実践：ゲームプログラミング では
「Dungeon」という、主人公を中心にした迷路マップ移動のゲームがあり、
100～200行で、見事に作成されていました。
この人は天才だ、、、
なんでこんな少ないコードでこんなことできるんだろう。
そう思いつつ、夢中になって同じように実装してみました。
うまく動かなくて、またお手本のソースを見て、の繰り返し、でも良くわかない、でももう一回書いてみる、というのを繰り返し、やっと書いてある内容が理解できました。
これほどプログラムに熱中になったのは初めてでした。
もともとマリオのようなアクションゲームを作りたくて挫折した経験もあり
「自分はゲームは作れないんだ」という固定観念がありましたが
今回は答えがあるので「できない」というのは言い訳にしかなりません。
不安だけどやってみるか、、、という感じで始めましたが、結果的に大成功でした。
もしプログラミングに興味のある方であれば、ぜひご一読いただきたいです。