福野泰介の一日一創

日々アップデートされる、JavaScript用の数々な便利ツール。 そろそろリニューアルを考えている本ブログ、静的ページ生成もサクッとこなしてくれるという Nuxt.js の前段として Vue.js はじめ。

日本コミュニティがしっかりしていて、本家ドキュメントがわかりやすい！
「はじめに — Vue.js」

ひとまず、ネパールの車のナンバーや、お札など、まちなかでも良く見かける、ネパール数字変換アプリを、漢数字変換アプリをもとにつくってみます。

Vue.js を使い始めは簡単。1ファイル vue.js を読み込むだけ！

<meta charset='utf-8'/> <div id="app"> <input id="jp_num" v-model="num"><br> <span id="nepali_num">{{ npnum }}</span><br> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>"use strict" const toNepaliNumber = function(s) { return s } new Vue({ el: '#app', data: { num: "192.168.0.1", }, computed: { npnum: function() { return toNepaliNumber(this.num) } } }) </script>

v-model や、 {{ }} を使って、HTMLとJavaScriptをつなぎます。
数字をネパール数字に変換するJavaScriptのメソッド toNepaliNumber を実装して、できあがり！

const toNepaliNumber = function(s) { const NEPALI_NUM = "०१२३४५६७८९" let res = [] for (let i = 0; i < s.length; i++) { const c = s.charCodeAt(i) - "0".charCodeAt(0) if (c >= 0 && c < 10) res.push(NEPALI_NUM[c]) else res.push(s.charAt(i)) } return res.join("") }

「to Nepali Num (base)」 → to Nepali Num (with CSS and so on..) Vue.js の真骨頂は、配列や複雑なデータ構造も View としての DOM に即反映されるところ。
いろんなデータをきれいに整理したwebサイトやwebアプリ、更にすばやくたくさん作れそう！
PCN大阪、森さんの本もどうぞ！「動かして学ぶ！Vue.js開発入門 (NEXT ONE)」

世界中のプログラマーが自らの道具を創り、磨き、シェアされ、それらを使って一段と強い道具を作るループは、構造的に高速化するしかありません。 ぜひ、この輪に加わわっちゃいましょう！

はじめての JavaScript のための、時計、地図、AR、ゲームなど作成用シンプルフレームワーク jigjs もどうぞ！

links
- Vue.js
- jigjs - Numbers in Nepali language on IchigoJam