Vue.jsを使って高校情報のDB単元の教材を作った

はじめに

　今回は高校情報の情報の科学の教科書に記載されているDB単元のDBの機能について教える教材を作った。
　GitHub pagesにあげているのでぜひ動かして使ってみてほしい。またソースコードも全てGitHubで公開している。

データベース単元の教材リンク

GitHub

開発環境

Node.js v8.2.1
npm 5.6.0
Vue.js 2.9.2
Foundation(CSS) 6.4.3

機能

　雛形の作成にはvue-cliを用いた。
　教材はDBの機能について学習できるものとなっている。
本教材では本テーブルと著者テーブルを用いて学習を行う。
具体的に学習できるDBの機能は

• 選択（whereを使った条件指定のSelect文）
• 射影（カラム指定のSelec文）
• 結合（Inner　Joinを用いたテーブル結合）

これ以外の他にテーブルにレコードを挿入することができる。

レコードの挿入

1. 画面メニューのAdd Columunをクリック。
2. ISBN、タイトル、著者、出版年、出版社、ジャンルを入力し、add bookをクリック。
3. レコードが追加される。
   

選択

1. 画面メニューのSelectionをクリック。
2. ISBN,author,genre　の欄に条件を入力する。
3. 条件に合う検索結果が表示される。

射影

1. 画面メニューのProjectionをクリック。
2. 表示したいカラムのチェックを入れる。
3. 検索結果が表示される

結合

1. 画面メニューのJoinをクリック。
2. スイッチボタンを押す。
3. 結果が表示される。

使ったVue.jsの機能

• {{data}}
• v-if
• v-for
• v-bind
• v-on
• methods,watach関数
• vue-router
• コンポーネント間の値の受け渡し(props)、親要素の関数呼び出し（emit）

おわりに

今回はVue.jsを使って高校情報のDB単元の教材を作った。
vue-cliを使うことで非常に開発がしやすかったし、何かアプリケーションを作ることによってVue.jsの理解も深まったので非常に良かった。

参考文献

• Vue.js公式リファレンス