Node.js
MongoDB
reactjs

ReactでテールスピンRPGを作るっ!Day#04 はじめてのNoSQL

More than 1 year has passed since last update.

これまでのあらすじ

神の啓示を受けて「テールスピンRPG」を作ることを決めたノアnoah_40w.pngが神の御使いロジカlogica_40w.pngの助けを借りて開発に着手!Material-UIのCardコンポーネントを利用してダミーのストーリーデータの表示をしてみたが・・

データベースにデータを登録する

「ストーリーのデータは実際にはデータベースに入れることになるよね?データーベースからデータを取ってきてそれを表示する、ってところまで作ってみたいな。」

「OKケロ。やってみるケロ!
データベースは何を使うケロか?」

「仕事で触ったことがあるのはMySQLとかPostgreSQLとかだけど・・・。」

「WEBアプリ定番のリレーショナルデータベース(RDMS)ケロね。もちろんRDMSでも構わないケロが、最近はドキュメント指向データベースとかオブジェクトデータベースとか、SQLを使わないNoSQL系のが流行っているケロよ。JavaScriptからアクセスする場合はこっち系の方が相性もいいみたいケロ。」

「へぇそうなんだ。だったそっち系を使ってみようかな。何がオススメなの?」

「今のところネット上に情報が多いのは『MongoDB』っていうドキュメント指向データベスケロね。」

「じゃその『モンゴデービー』でやってみようか。インストールはと・・・。
Macではbrewを使ってインストールできるみたい。まず、brewをupdateしてください、か。」

$ brew update

「ありゃ、エラー・・・パーミッションの問題?」

$ sudo chown -R $(whoami):admin /usr/local

「で、も一回。
成功!でこのメッセージは・・・『もう必要ないのでパーミッション元に戻してね』か。なんという親切。」

$ sudo chown root:wheel /usr/local

「では改めて、MongoDBをインストールするね。」

$ brew install mongodb

「特に問題なくインストール完了!
最初にすべき準備として、データ格納用のディレクトリを作ります、か。
場所はどこでもよいということなので、とりあえずアプリディレクトリ、『toldot』の下に作るね。」

$ cd toldot
$ mkdir -p data/db

「OK。準備完了ケロね。じゃターミナルを新しく開いて、そこでMongoDBを開始するケロ!」

$ mongod --dbpath ./data/db

「無事に起動したケロね。ではもう一つターミナルを開いてmongoシェルを起動するケロ。」

$ mongo

「シェルを通してデータベースの操作を行うケロ。
まずデータベースを作るケロね。名前は・・・『toldot』でいいケロか。」

> use toldot

「useで操作するデータベースを指定するケロが、存在しないデータベース名の場合は新しく作成されるケロ。」

「へぇ、それは簡単だね。でもミスタイプしてもエラーにはならずに間違った名前のデータベースが作られる、ってことだよね・・・。それはそれでちょっと怖いね。」

「まあね、でも間違えて作ったデータベースは削除すればいいケロから、慎重になり過ぎなくてもいいケロ。
じゃ次はストーリーのデータを入れるコレクションを作るケロ。」

「コレクション?」

「RDMSでいうところの『テーブル』ケロ。ちなみにRDMSの『レコード』は『ドキュメント』と呼ばれるケロ。
コレクションも、すでに存在する体でドキュメントを挿入するとその時点で作成されるケロ。やってみるケロ!」

> db.stories.insert({
  about: 'ノア', 
  date: '2017.7.24', 
  title: 'ストーリーを読む', 
  body: 'MongoDBに保存されたデータだよ。'
})

「これで『stories』コレクションが作成され、1件のドキュメントが挿入されたケロ。」

「え!マジで!?
テーブル、じゃなかったコレクションのスキーマ定義は必要ないの?」

「スキーマの定義が必要ないのもドキュメント指向データベースの特徴ケロ。」

「へー、それは楽チンだね!」

「そう。しかし便利な反面、スキーマが定義されていない、ということはどんなデータでもチェックなしに入っちゃうので、誤ったデータが混入しても気づけないなどの危険性もあるケロ。そのへんはやっぱり注意が必要ケロ。」

「なるほど。いいことずくめってわけでもないんだね。気をつけるよ。
えと、じゃ次はReactからMongoDBにアクセス。登録したデータを取り出して、表示する処理を書けばいいってことだね。」

「って行きたい気持ちはわかるケロが、そうは問屋が卸さないケロ。
何度も言っているようにReactはクライアントサイドで動くフレームワークケロ。
一方MongoDBはサーバ上で動くケロね?そうじゃなきゃ他のユーザとも繋がれないケロ。」

「それは・・・そうだね。」

「今は開発環境ということで全部同じマシン上で動いているケロが、本番のサービスではクライアントとサーバの距離は遥かケロ。
React側からサーバに対してコンタクトをとることはできるケロが、データベースは直接それに応答する仕組みは持っていないケロ。」

「ということは、React側から来た要請を聞いて、データベースからデータを取り出し返す仲介人が必要、ということ?」

「そうケロ!その『仲介人』がサーバサイドプログラムケロ!
次はサーバサイドプログラミングに挑戦ケロ!!」

次回予告

Expressを使ってサーバサイドプログラムを作るケロ。お楽しみに!