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

はじめに

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

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

GitHub

スクリーンショット 2018-01-12 14.13.03.png

開発環境

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. レコードが追加される。 add_column.mov.gif

選択

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

selection.mov.gif

射影

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

projection.mov.gif

結合

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

join.mov.gif

使ったVue.jsの機能

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

おわりに

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

参考文献

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.