Part5:Model

海未「今回はMVCの最後、モデルについて見てみましょう」
にこ「話は聞かせてもらったわ!」
穂乃果「うわっ!にこちゃん!?」
海未「またですか・・・もうオチが見えているのですが」
にこ「モデルと聞いてはこのにこにーが黙っているわけにはいかないじゃない」
海未「いえ、モデルというのは・・・」
ことり「でもにこちゃん、モデルやるには背も胸も足りないよね♪」
にこ「・・・うぐっ」
海未「・・・っ」
穂乃果「わー、ことりちゃんストレート」
にこ「・・・こ、今回は見逃してあげるわ。覚えてなさいよーーーっ!!」
ことり「あ、行っちゃった」
穂乃果「まあ、それだけ恵まれたプロポーションのことりちゃんに言われたら、ねえ」
海未「・・・胸・・・」


海未「気を取り直してモデル、すなわちデータを扱う層を見ていきます。今回、データベースとしてMongoDBというものを使ってみます」
穂乃果「データベースって、全然知らないけど・・・」
海未「MongoDBの解説が趣旨ではありませんから、今回のアプリケーションに必要な部分だけ説明することにします。特に前提知識は必要ないと思います」

海未「まずはMongoDBと、Expressから扱うためのモジュールをインストールしましょう」

$ sudo apt-get install mongodb
$ sudo apt-get install build-essential
$ sudo apt-get install libkrb5-dev
$ npm install kerberos –save
$ npm install mongoose –save

海未「Ubuntuなら、これで。他の環境では適宜読み替えてください」

海未「ではモデルのコードを書いていきます。model.jsを以下のように実装してください」

海未「ここではMongoDBへの接続と、アプリケーション内で使うデータ構造の定義をしています。接続はとりあえず定型文と考えてもよいでしょう」
穂乃果「ということは、重要なのは下半分、と」
海未「そうですね。ここでスキーマという概念が出てきます。RDBであればテーブル定義ですが・・・ここではJavaScriptのオブジェクトの定義と考えてください」
ことり「namevotesってプロパティを持ったオブジェクトができるってこと?」
海未「そんな感じです。StringとかNumberは、DBに格納するときの型なのでJavaScriptではそれほど意識する必要はありません」
穂乃果「じゃあ、とりあえず各グループの名前と得票数がデータベースに保存されるって思えばいいんだね」

海未「routes/add.jsに、POSTの時のデータ登録の処理を書きます」

海未「さきほどのmodel.jsexportしているGroupを使ってデータを扱います。new Groupで新しいグループを作成しますが、その引数はオブジェクト、リテラルで書くと{name: 'μ\'s', votes: 0}のようなものです」
ことり「さっきのスキーマと同じだね」
海未「はい。フォームから送信されたデータ、req.bodyにはグループ名が{name: 'μ's'}のように入っていますから、それにvotesを付け足したものを基にGroupを作っています」
穂乃果「うん、大体わかるよ」
海未「作ったGroupオブジェクトのsave関数を呼び出すと、データがDBに保存されます。コールバック関数を登録するので、その中で保存後の処理をします。ここではエラーがなければトップページへ飛ばしていますね」
穂乃果「これで、フォームからDBにデータが登録できるようになったの?」
海未「はい。といっても、それを表示する部分はまだですが。では、次はroutes/index.jsを」

海未「Groupオブジェクトのfind関数は、DBからデータを取り出すものです。引数が色々ありますが第1引数は検索条件、第2引数は取得するカラムというかプロパティというか。どちらも未指定なので無条件、つまり全件を取得します」
穂乃果「ふむ、ふむ・・・」
海未「第3引数は検索オプションですが、ここではソート順を指定しています。得票数の降順ですね」
ことり「得票数の多いグループを上に表示、って仕様だったね」
海未「最後はコールバックで、データの取得が完了したら取得したデータが渡されてきます。ここで、データをindex.jadeに渡しています」
ことり「このデータって、何が入ってるの?」
海未「このようなJSON形式になっています」

穂乃果「なるほど、これなら簡単に扱えそうだね」
ことり「_idっていうのは、ユニークになる感じ?」
海未「全てのデータを一意に識別できるように自動生成されるものです。投票機能のところで、これを使いますね」

海未「では、このデータをビューに表示してみましょう。views/index.jadeを編集します」

海未「groupsはコントローラからパラメータとして渡しましたね。配列ですからJadeのeachを使って反復処理ができます」
穂乃果「それで、さっきのデータからnameを取り出して、っと。書き方はJavaScriptと同じ感じなんだね」
海未「これでデータの登録とその表示ができるようになりましたから、実際に登録して反映されることを確認してみてください」
穂乃果「えーと、こっちの画面で登録ってやると・・・おおっ、できてるできてる!」
ことり「大したことじゃないのかもしれないけど、なんか楽しいね♪」

海未「では次回は、これに投票機能を付けてみましょう。ここまでに学んだMVCの仕組みが理解できていれば、そう難しい話ではないはずです」


LINEで送る
Pocket


返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です