福野泰介の一日一創 - create every day

2020年入社予定の内定者合宿 in 鯖江!

Vue x Node のウェブサービース、IoT、チーム開発手法スクラムをギュッと凝縮した1時間半レクチャーからスタート!


早速アイデア会議でも活躍した、Vue x Node でつくるサンプルサービス「チャット」をWebSocketを使ってリアルタイム化!
step6.js で、さまざまな Content-Type に対応させて、もう少しまともなウェブサーバーに改良。
step7.js は、ポート番号 5001 に、WebSocketを使ったリアルタイム中継サービスを準備、chat2.html でリアルタイム版チャットを体験できます。

WebSocketを使う準備

npm i ws --save

WebSocketで受けて、全クライアントに転送するサーバー側のコードはわずかこれだけ!

const WSServer = require('ws').Server const wsserver = new WSServer({ port: 5001 }) wsserver.on('connection', function(ws) { console.log('open') ws.on('message', function(message) { console.log(message) wsserver.clients.forEach(function(client) { client.send(message) }) }) ws.on('close', function() { console.log('close') }) })

vuenodechat src on GitHub


サーボを接続して動かしてみよう!


スマホからもサーボ、動かしてみよう!


スマホからいろいろコントロールし放題!?


デバイスからネットへもコマンドひとつ!


合宿地、ラポーゼ河和田へ移動して、アイデア出しして、スクラム開発の要、チームで合意するゴールである「ビジョン」を決定!


温泉入ってリフレッシュ!ビジョンを掲げ、実現に必要なコトのリストであるプロダクトバックログから、それを実現するためのタスクに分割。 付箋紙に書いたタスクが人別に「TODO」「Doing」「Done」へと遷移していく様子をリアルタイムに共有しながら進める、スクラムのプラクティスのひとつ「タスクかんばん」を使って進める短期開発、できあがりが楽しみです!


Scrum Interaction 2019 ジェフ・サザーランド博士 メッセージ - YouTube
スクラム開発者によるイベント、あるそうです!

webの本質は共同作業、みんなの力をキュートに集めるウェブサービス、自分でも創ってみたいですね。
進化するプログラミングの世界、随分簡単にステキなサービスが作れるようになりました。

今回は、IchigoJam BASICからのステップアップにイチオシの言語「JavaScript」と便利ツール「Vue.js」と「Node.js」を使った「チャット」づくりのチュートリアル!

みんなの力を集める、つまり、ひとりひとりが持つコンピューターからデータを集約するためにいつも動いているコンピューター、サーバーが必要です。自宅のパソコンを動かし続けてもOKですし、さくらインターネットなどで借りることもできます。

そんなサーバー上で動かすための便利ツールその1「Node.js(ノード・ジェイ・エス)」を使えば、サーバーでJavaScriptが使えます。

まずは Node.js のセットアップ!
【Node.js入門】各OS別のインストール方法まとめ(Windows,Mac,Linux…) | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト

GitHubから今回のチャットサービス「vuenodechat」をダウンロード。
ダウンロードしたファイル、まずは JavaScript での基本表示。console.logを使って、計算しましょう。(step0.js)

console.log(1 + 1)

こちら、コンソールを開いて、ダウンロードしたフォルダに移動し node コマンドを使って動かします。

node step0.js 2

1+1の計算ができました!

続いて、ウェブサーバーを作ります。(step1.js)

const http = require('http') const server = http.createServer() server.on('request', function(req, res) { console.log(req.url) res.writeHead(200, { 'Content-Type' : 'text/html; charset=utf-8' }) res.write('ハロー' + req.url) res.end() }) server.listen(8001)

短い!こちらも同じように動かします

node step1.js

何も出ずに固まっている?エラーが出てなければ無事動いているはずです。ブラウザで http://localhost:8001/ を開きましょう。

ブラウザのアドレス欄、URLの末尾に数字やアルファベット足してエンター、アクセスしてみてください(例:http://localhost:8001/abc)。nodeを実行した画面に表示されますね。こうして伝わってくるデータをいろいろやって、端末側(クライアントと呼びます)に返してやればOKです!

※ localhostというのは自分のコンピューターを表し、コロンの後はポート番号といって窓口のID的なものです。同じ番号の窓口で複数のサーバーは起動できないので、必要であれば番号 8001 を好きな数に変えましょう(推奨:1024〜49151)。

step2.js で、static フォルダに入っているHTMLファイルや画像ファイルを返すようなプログラムを追記。
step3.js で、クライアント側とデータをやりとりするAPIの雛形を追記。

そしていよいよ step4.js でチャットを実現するAPIを追加!
こちらがそのハイライト、サーバーのデータを操作しています。

let data = [] function serveAPI(fn, query) { if (fn.endsWith('/add')) { data.push(query) } else if (fn.endsWith('/list')) { return data } else if (fn.endsWith('/get')) { return data[query.idx] } else if (fn.endsWith('/clear')) { data = [] } else if (fn.endsWith('/remove')) { data.splice(query.idx, 1) } }

5つのAPIを実装しました(addで追加、listで全部取得、getで1つ取得、clearで全件消去、removeで1つ消去)
こちらを動かし http://localhost:8001/chat.html を開きましょう。文字をいれて SENDボタンで、1行追記されます。別のウィンドウでも開いて一人二役チャットをやってお試しください。

ipconfig (Windows) や ifconfig (Mac/linux) を使って、今使っているIPアドレスを見つけたら、同一ネットワーク内にいる人や、Wi-Fiにつないだスマホから、IPアドレスで参加できます!(例、http://192.168.1.13:8001/chat.html

chat.html 内は、Vue.js という今風なクライアント用のフレームワーク(便利ツール)を使ってます。下記のようにサーバーのAPIと通信して変数にいれると、いい感じに画面のデータを同期してくれて便利です。(参考、Vue.js はじめのいっぽ

methods: { show: async function() { this.list = (await axios.get('/api/list')).data }, send: async function() { const text = encodeURIComponent(this.chat) const ts = Date.now() await axios.get('/api/add?text=' + text + "&ts=" + ts) }, clear: function() { axios.get('/api/clear') } }

この状態だと、サーバーを止めるとデータが消えてしまうので、ファイルとして保存するようにしたのが step5.js となって、以上でハンズオン終了です。おつかれさまでした!

テキスト、絵、音声、画像など、どんなデータを集めて、どう見せる?
それはあなたの自由です!

更新のラグが気になる?WebSocketを使ったリアルタイム化する続編、公開!
Vue.js x Node.js x WebSocket でつくる「チャット」ハンズオンのリアルタイム化

昨年に続き、仙台高専広瀬キャンパス、1年生向け講演会&IoTワークショップ。
3つのテクニックとして紹介した、創造、伝達、オープンデータ。
まだまだ足りないオープンデータ、IoTや足を使ってを使って身近なデータを増やしてみよう!


find5star
現在位置を取得してその付近の5つ星オープンデータを地図と共に表示するアプリ


Vue.js はじめのいっぽ
Leafletを使って国土地理院地図を表示する step9 を追加しました。


任意参加にも関わらず、40名もの仙台高専生が受講してくれた,IchigoJam x sakura.ioを使ったIoTワークショップ! プログラミングはじめのいっぽから、ゲームづくり、大会は盛り上がった!


温度、湿度、雨量、水位、交通量、騒音など、いろんな場所にIoTセンサーをばらまいて、勝手オープンデータを増やしてみるのも楽しいかも?

つくりたいものがないと嘆く学生さん、SDGsの17ステージ、自分の気になるところからチャレンジしてみては? 講演「高専生活を120%楽しむテクニック」にてコメント.netで寄せられた質問、こちらで一気回答。

4. イチゴジャムの着想はラズベリーパイから? YES 5. 彼女いますか 奥さんがいます 7. なんでネクタイの裏光ってるんですか? 電子工作へ関心をもってもらうためです 9. 海外で有名になりたいです 具体的な国とどういう人にまず喜んでもらえるか考えてみるとかいいかも 21. 寝る時間は何時間ですか? 6時間、時々4.5時間 28. 起業したきっかけは? 就職も進学も無理だなと思ったことと、起業したらと誘われたこと 29. おすすめのプログラミング言語ってありますか お手軽IoTづくりにIchigoJam BASIC、JavaScriptはいろいろ動いていいよ! 30. プログラミングで作りたいものがないです 好きな技術で遊んでみよう、身近な人からネタ(不満・不快)を聞いてみよう 33. ネクタイ光ってるの気になります ありがとう! 40. 高専でどのくらい勉強しましたか? 赤点とらない程度に、好きな技術は好きなだけ 44. 今日は何をつくりたいですか? 仙台に関係するものをつくりたい 47. やる気ってどう出していますか? 徹夜しない、無理しない 53. 何色好きですか? 最近はIchigoJamの影響で赤 54. ネクタイ重くないですか 単4電池1本を昇圧して駆動してるので大丈夫 55. 今まで作ったプログラムの中で、1番利便性が高いなと思ったものってどういうものですか jigブラウザ!(jigtwi、IchigoJamが続く) 71. 起業する際に周囲の反対はありましたか 全くなし 73. オタクですか? です 75. 一日一創へのモチベはなんですか? もはや習慣、やらないと気持ち悪いんです 191. 1番最初に作ったゲームのジャンルはなんですか 地味な数当てゲームでした、ジャンルでいうとなんだろう 195. 好きなゲームは何ですか スーパーマリオブラザーズ、バルーンファイト、パネキット 206. 誰もやったことがないことを思いつくにはどうすればいいですか? 誰もやったことない経験やその組み合わせをすること 213. おいくつですか? 40です 215. Twitterやってますか? やってます @taisukef 217. 赤点取ったらまずどう手をつければいいですか? リカバリー方法を模索しよう、または、もう1年楽しもう 225. iPhone11を使ってらっしゃっていますが、そう言った端末等は常に最新のものにしているのですか? 差分がワクワクする時は替えます! 229. iPhone11買うべきですか? スマホARづくりやAIに興味あればオススメ! 232. プログラミングの生かし方がわからないです 様々な社会問題の解決や、誰もやったことない新表現に便利です 233. 福井高専で一番楽しかった学年はいつですか? 卒研時間など自由時間がおおく、車で自由に移動でき、PHSでどこでもネットも使えた5年生 237. 起業して大変だったことありますか?? スマホで当たるサービスがなかなか作れなかったこと、役立ち、目立ち、稼げるもの、探そう! 242. なんでネクタイを光らせようと思ったんですか? ファッションもプログラミングできることを表現するのに一番身近だったからです 246. 海外の大学はどうやったらいけますか? 飛行機で行ってみて現地の学生や先生に何か作品持って訪問してみましょう 249. 起業って親に反対とかされなかったんですか? まるでなかったです 260. メガネ独特ですね 鯖江のメガネです!(影郎デザインワークスKANIという鯖江メガネです) 262. 英語が出来なくても留学出来ますか? 長期休みに行けるフィリピンの語学留学どうでしょう?(CNE1) 275. AIが人類を超した時どうなると思いますか? 地球外へと本格進出する第二大航海時代がスタートするでしょう! 276. 創作ネタ尽きませんか? 尽きません、日々新しい技術が登場するので 289. 社員数は?? 約70名 310. 部活はしていましたか? 中学校の時はソフトトニス、高専に入って地球物理学研究会という任意組織に所属しいろいろ教わりました 318. 尊敬してる人はいますか 梵、加藤社長 320. ワックスなに使ってますか? ギャッツビー 332. 起業をするに当たって一番大変だった事は何ですか 書類を書くこと(起業すること自体は手続きだけなので簡単!) 328. 実際、何人単位でどれくらいのもの(作業)が出来る目安などはありますか? 人それぞれ経験や分野によって時に生産性は何倍も差が出るので、小さく始めてチームで作業するスクラムが良いです 352. すごく面白かったです! ありがとう!

創るほどに成長しますよ!

不満不快不感を創造に「ないものはつくろう!」初めてから作品づくりまで2時間半IchigoJamワークショップ資料」 with PCN仙台


IchigoJam Tシャツ 争奪じゃんけん大会の勝者!


みんなと!


先生&PCN仙台と!


仙台名物で大好物「せり」もしっかりいただきました!

links
- キャリアマインド育成講演会とIoTプログラミング体験ワークショップを開催しました – 仙台高等専門学校

Vueはじめのいっぽの続きとして、読み込んだJSONデータからのオフライン検索(フィルター)を追加する step7 と、実践的に橋梁オープンデータをSPARQL取得する step8 を追加!

SAPRQLで取得した鯖江市の橋梁オープンデータ
鯖江市の攻めたオープンデータ、管理する全423の橋梁がオープンデータとして、橋梁名、工法、大きさ、緯度経度などが5つ星オープンデータとして公開され、web標準のAPI、SPARQLで取得できます。

こちら、取得SPARQLのテンプレート

prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#> prefix jrrk: <http://purl.org/jrrk#> prefix ipc: <http://www.ipc-pacific.com/ipc/> select ?uri ?name ?lat ?lng ?year ?stype ?desc ?route { ?uri rdf:type <%type%>; <%name%> ?name; ipc:bridgeNumber ?num; ipc:structureType ?stype; geo:lat ?lat; geo:long ?lng. optional { ?uri ipc:buildYear ?year. } optional { ?uri ipc:underBridgeDescription ?desc. } optional { ?uri ipc:route ?route. } filter(?lat < %latmax% && ?lat > %latmin% && ?lng < %lngmax% && ?lng > %lngmin%) filter(lang(?name) = 'ja') }

Vue.jsを使えば、データを画面に美しく反映できます。データ1行の表示部分はこのようになってます

<tr> <td><a v-bind:href="uri">{{ name }}</a></td> <td>{{ route }}</td> <td>{{ stype }}</td> </td><td>{{ year }}年</td> <td>{{ lat }},{{ lng }}</td> <td>{{ desc }}</td> </tr>'

書きやすい!


Vue.js はじめのいっぽ
step1 から、順にソースを見ながら、一歩ずつ試していったり、やりたいことに近いものから逆順に辿ったり、ご自由にご活用ください。

一昨日昨日に続き、食がテーマのjigインターン2019、成果発表会紹介3チーム目。
一人では続かない料理づくりのモチベーション。好きなアニメに登場するアニメメシ、時間を合わせて、みんなで作って、対戦すれば楽しくなるかも!?
その名は「オタクック」

チーム「オタクック」
たかげん(一関高専)、ぴ(木更津高専)、なべ(函館高専)、まこってぃー(明石高専)


作ってみたいな「のり塩すごもりチャーハン by 天気の子」
クラシル提供「天気の子」劇中登場レシピ のり塩すごもりチャーハン 作り方・レシピ | kurashiru [クラシル]


競技プロコン、AtCoderでおなじみ、レーティング!エンジニアなオタクは好きですね!
Twitterハッシュタグ #オタクック から、実際はじめても楽しいかも!?


フロントエンドは Vue.js、バックエンドは Flask by Python


Vue.js を使ったモダンなクライアント実装!(当初Golangで作っていたサーバー側ソース跡


Vue.js はじめのいっぽ
Vue.jsを本格的に使おうと決めました。はじめのいっぽから、axiosを使った非同期通信をシンプルに同期的に使って、JSONを読み込むまでの6ステップ。短いソースを見ながらお試しください!


以上、11高専から12名のjigインターン2019の成果発表会でした。
教えてくれないと嘆くのは早く卒業して、自分で学んで楽しむ高専生活!
日々改善される開発環境や手法に合わせ、毎年パワーアップする高専インターン。
来年もお楽しみに!

links
- jigインターン2019 成果物リポジトリ「jigintern - GitHub
- ブログ「jigintern2019のブログ

昨日に続き、食がテーマだったjigインターン2019、成果発表会紹介2チーム目。
今度は外食での悩みをモダンに解決するプロダクト。

チームnpm派「めしめーと」
箒コウモリ(香川高専高松キャンパス)、でみ(舞鶴高専)、watano(茨城高専)、はたはた(津山高専)


せっかくなら美味しいものを開拓したい外食。でも、レビューが当てになるとは限らない。そんな時、自分と味覚が近い人を頼ろう!
食べたものを投稿・チェックインすると、同じ好みな人をリコメンド。フォローすると優先的にタイムラインに並び、使うほどにヒット率上昇。


しゃもじをポインターとして解説する、はたはた。フロントエンドはモダンなフレームワーク Vue.js


GitHubのリポジトリから動かしてみました!(Foodmates-client (fixWholeDesignFinally) / server


幻の第4スプリントで、箒コウモリ(ホウモリ)がマージした、レスポンシブデザインバージョンで、スマホでもタブレットでも見やすい!


バックエンドは、Go言語(golang)で開発、データベースとしてMySQL、環境構築にDockerを使用。

ナウなDBの使い方を確認するため、Foodmatesのサーバー側を抜粋した、GoでMySQLにデータをいれてみるサンプル作成。
料理を、名前、価格、URLの3項目で、登録日時付きで、どんどん登録するシンプルなデータベースです。(src on GitHub)

package main import ( "fmt" "os" "time" "errors" "github.com/jinzhu/gorm" "github.com/joho/godotenv" _ "github.com/go-sql-driver/mysql" ) type Food struct { ID int `gorm:"primary_key" json:"id"` CreatedAt time.Time `json:"created_at"` Name string `gorm:"default:''" json:"name"` Price int `json:"price"` URL string `json:"url"` } var db *gorm.DB func InitDB() { USER := os.Getenv("MYSQL_USER") PASS := os.Getenv("MYSQL_PASSWORD") PROTOCOL := "" DBNAME := os.Getenv("MYSQL_DATABASE") CONNECT := USER + ":" + PASS + "@" + PROTOCOL + "/" + DBNAME + "?charset=utf8mb4&parseTime=True&loc=Local" var err error db, err = gorm.Open("mysql", CONNECT) // github.com/go-sql-driver/mysql if err != nil { panic(err.Error()) } db.LogMode(true) db.AutoMigrate(&Food{}) } func TruncateTables() { rows, err := db.Raw("SHOW TABLES").Rows() if err != nil { panic(err.Error()) } defer rows.Close() for rows.Next() { var table string if err := rows.Scan(&table); err != nil { panic(err.Error()) } db.Exec("TRUNCATE TABLE " + table) } } func GetDB() (*gorm.DB, error) { if db == nil { return nil, errors.New("can't get database") } return db, nil } func Finalize() error { err := db.Close() return err } func ShowAllFoods() { db, err := GetDB() if err != nil { fmt.Println(err) return } var foods []Food db.Table("Foods").Find(&foods) fmt.Println(foods) } func AddFood(name string, price int, url string) error { db, err := GetDB() if err != nil { return err } db.Create(&Food{ Name: name, Price: price, URL: url, CreatedAt: time.Now() }) return nil } func main() { err := godotenv.Load(".env") if err != nil { fmt.Println("Error loading .env file") return } InitDB() TruncateTables() AddFood("サラダ焼", 120, "https://www.sanrokusyoten-316.co.jp/products.html") AddFood("サバエドッグ", 280, "https://www.meat-sasaki.com") AddFood("眼鏡堅麺麭", 864, "http://echizen-yumekobo.com/?pid=52337987") ShowAllFoods() }

GORMを使うと、Go言語の構造体として定義したFoodを、db.AutoMigrate(&Food{})で呼び出せば、いい感じにテーブル生成をやってくれます。*GORM - ORM (Object-relational mapping / オブジェクト・リレーショナル・マッピング) for Go

MySQLのセットアップ、Mac編(参考、Mac へ MySQL を Homebrew でインストールする手順 - Qiita

brew update brew install mysql

MySQLにデータベースを1つ作成

mysql -uroot -p [dbrootpass] create database [dbname] create user '[dbuser]'@'localhost' identified by '[dbpass]'; grant all on *.* to '[dbuser]'@'localhost'; GRANT ALL PRIVILEGES ON [dbname].* TO '[dbuser]]'@'localhost'; exit

Go言語の設定ファイル「.env」にDB設定を記述

cat > .env <<EOF MYSQL_USER=[dbuser] MYSQL_PASSWORD=[dbpass] MYSQL_DATABASE=[dbname] EOF

Go言語のライブラリを取得

go get github.com/go-sql-driver/mysql go get github.com/jinzhu/gorm go get github.com/joho/godotenv

あとは動かすだけ!

go run fooddb.go [{1 2019-09-08 13:24:51 +0900 JST サラダ焼 120 https://www.sanrokusyoten-316.co.jp/products.html} {2 2019-09-08 13:24:51 +0900 JST サバエドッグ 280 https://www.meat-sasaki.com} {3 2019-09-08 13:24:51 +0900 JST 眼鏡堅麺麭 864 http://echizen-yumekobo.com/?pid=52337987}]

MySQLを初めて使ったのはもう20年前くらいかも・・・。
環境構築も、ライブラリも、便利になっていい感じですね!

自治体オープンデータの意義は、自治体の仕事を減らし、民間企業による豊かさの創出!


オープンイベントさいたま
埼玉県オープンデータ」で唯一の4つ星オープンデータ、RDFで提供されていた広報情報オープンデータをjig.jp、この夏のインターンに参加する高専生による作品「福井県のイベント (src on GitHub)」を埼玉化。 自治体による広報の仕事を減らせるかも。

RDFにもターゲット情報が入っていれば、若者や、高齢者など、対象別に見やすいアプリづくりもできるので、一層伝わりやすくなります。 Vue.jsを使ったモダンで見やすいアプリづくりは、地域の高専生や、JavaScriptが使える小中学生にとって良いネタにもなります。


オープンデータを庁内で広めるオープンデータリーダーを育成する総務省企画「オープンデータリーダ育成研修
自治体の中でやっている繰り返される仕事、オープンデータで効率化できませんか?
イノベーションのはじめのいっぽは、当たり前に疑問を持つこと。
今までを変える意識と行動力を持つ人、それがリーダーです。
教材はオープンデータ、今すぐ、行動を!


オープンデータによる連携を活かす、11万件もの公園データを提供する「PARKFUL
公園の設備を提供する会社、株式会社コトブキとの連携がおもしろい!


東さんによるオープンデータ講義。震災での反省から始まったオープンデータ。避難所データがオープンデータではないと、活用するために問い合わせが必要。実際に30箇所問い合わせて、OKの返事はたった9。 事実、災害時にサーバーがダウンしていて避難所データにすらたどり着けない事態が未だに発生しています。


ネット時代、データを広く共有するコストが劇的に下がりました。まだまだ市民意識が追いついていませんが、まずはデータがあれば、楽しく可視化するアプリが生まれ、広まります。 アプリを誕生させるためには、開発者にとって優しく横展開が可能でうれしい「5つ星オープンデータ」が必須!


鯖江市のオープンデータ産みの親、牧田さんに会ったことがきっかっけで、自分でなんでもやっちゃうことにしたという、埼玉県深谷市の斉藤さん! 「ふかやMap」から様々な位置情報付きデータをオープンデータとしてダウンロードできます。


odp - オープンデータプラットフォーム
5つ星オープンデータはじめのいっぽに、避難所データをExcelでまとめてアップロードするだけ。無料です。

さまざまな業務課題や、社会を豊かにする取り組みへのチャレンジに向けて、まずは最小限の手間で、5つ星オープンデータ化と、データをアップした瞬間に動くアプリをご体験を!

5つ星オープンデータ対応避難所ナビアプリ「ヒナンパス

世界をつないだOS、web。
JavaScriptを使って創れば世界中のPC、スマホを持ってる人に届けられます!

日々アップデートされる、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

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像