スタッフブログ

STAFF BLOG

やってみた

2017.02.02

KnockoutでサクっとWebサービスを作ろう

サーバー開発担当の木下です。
昨日、GitLab.comで、SQLサーバーの操作ミスによって本番データをほぼ全部失うというトラブルがあったようです。幸いリポジトリ本体は無傷で、偶然取ってあった6時間前のスナップショットから復元できたとのことでした。細かな分析はこれからされていくことと思いますが、データベースの操作を担当する者としては気の引き締まる思いでした・・・

さて今回は、最近活用しているJavaScriptライブラリーの「Knockout」についてです。

Knockoutとは

MITライセンスとしてオープンソースで開発が進められている、JavaScriptライブラリーの1つです。MVVMパターンのVMをKnockoutで構築します。
いくつか特徴を上げてみます。

  • リッチなAjaxページを構築できるにもかかわらず、最新版(v3.4.1)で60kBという軽量さ
  • 双方向バインディング・UIの再描画に特化しているため、シンプルにコーディングできる
  • View(HTML)に出てくるHTML属性は”data-bind”だけなので、デザイナーさんとの並行作業がしやすい
  • jQueryと共存できる

他のJavaScriptフレームワークと大きく異なるのは、”data-bind”の部分だと思います。例えばAngularの場合、HTML側に”ng-model”, “ng-repeat”などたくさんの属性が現れます。昨年ごろから人気が出始めたVue.jsの場合、”v-model”, “v-on:keyup.enter”など、更に多様化してきます。HTMLタグの属性で処理を切り分けようというアプローチは悪くないと思いますが、可読性は落ちますし、ModelやViewModelに触れないデザイナーさんにとっては挙動が読みにくくなる原因になりそうです。
これに対してKnockoutの場合、属性は”data-bind”のみで、その中で処理を切り分けます。<span data-bind='text: hogehoge'>とか、<button data-bind='click: hogehoge'>といった具合です。Viewの可読性は確保しつつ、コーディングも円滑にすすめることができる、ちょうど良い落とし所なのが気に入っています。

実際に、Knockoutを使って簡単なウェブページを構築してみましょう。

Knockoutを使ってみる

とりあえず、JSで入力した値をHTMLに表示させてみましょう。

index.html

// Knockoutライブラリーの取得
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js'></script>
// JSスクリプトの取得
<script type='text/javascript' src='./sample.js'></script>

// バインディング
<span data-bind="text: name"></span>

// 使用するクラスの宣言
<script>
    ko.applyBindings(new sampleViewModel());
</script>

sample.js

// クラスの中身
function sampleViewModel() {
	var self = this;

	// self.nameをバインディングできる変数として宣言、'きのした'を初期値にセット
	self.name = ko.observable('きのした');
}

index.htmlの出力
1

たったこれだけで、JSで設定した値をHTMLに表示することができました。
ただ、これだけでは面白くないので、PHPを使って「ひらがなで入力された値をカタカナに変換して表示する」ページを作ってみましょう。

index.html

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js'></script>
// $.getJSONを使うのでjQueryもインクルードしましょう
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript' src='sample.js'></script>

// フォームを作成
<form>
    ひらがな:<input type="text" data-bind="value: hiragana">
    <button type="button" data-bind="click: execute">変換する</button>
</form>

// 出力先も作成
カタカナ:<span data-bind="text: katakana"></span>

<script>
    ko.applyBindings(new sampleViewModel());
</script>

sample.js

	function sampleViewModel() {
		var self = this;

		// 入力フォームのテキストボックスと出力先を、バインディング可能な変数として宣言
		self.hiragana = ko.observable();
		self.katakana = ko.observable();

		// 「変換する」ボタンの挙動を設定
		self.execute = function(){
			// jQueryのgetJSONでPHPに投げる
			$.getJSON("./convert.php", {value: self.hiragana()}, function(res){
				// PHPからのレスポンスをself.katakanaにバインディング
				self.katakana(res);
			});
		}
	}

convert.php

<?php
echo json_encode(mb_convert_kana($_REQUEST['value'], "C", "UTF-8"));

index.htmlの出力
out

ちゃんとひらがなをカタカナに変換することができました。HTMLもスッキリしていて、いい感じです。PHP側でDBへの接続などをすることで、CMSをシンプルに構築していくことができるでしょう。

JavaScriptライブラリー戦国時代を生き抜こう

今回ご紹介したKnockoutは、簡単な管理画面などのCMSにちょうどよいライブラリーではないかと思います。しかし、もっと大規模なシステムを、できるだけJS側をメインにして開発したいということであれば、AngularやReact.jsなどのほうが向いているかもしれません。
作りたいものやプロジェクトメンバーの構成などに合わせて、最適なライブラリーを選択することによって、開発効率を上げていきましょう!

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 木下 晴晶
    Mail:[email protected]

    3.取得した個人情報の利用目的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。