<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Sample</title>
    </head>
    <body>
        <h1>IME Sample</h1>
        <div id="vue-sample">
            <input type="text" v-model="message">
            <p>{{ message }}</p>

            <hr>

            <input type="text" v-on:keyPress="withIme" id="with-ime">
            <p>{{ with_ime }}</p>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#vue-sample",
                data: {
                    message: "",
                    with_ime: ""
                },
                methods: {
                    withIme() {
                        message = document.getElementById("with-ime").value
                        this.with_ime = message
                    }
                }
            })
        </script>
    </body>
</html>

2018-01-08

雑魚サーバサイドエンジニアがSPAに入門してみた

プログラミング Vue.js Firebase

TL;DR

とりあえず作れ。実装は github にある。

モチベーション

最後にやったのがいつなのかを記録するWebアプリが欲しかった。iOSを持っていないのと、ここ最近ようやくJS界隈が落ち着いてきた感があったので入門として規模が良さそうに感じたため、練習がてら作ってみた。

どう取り組んだか

雑魚なので今までアプリ作りを挫折していたが、この記事を読んで とりあえず超MVPで 作ることを重視することにした。

qiita.com

仕事は常に超短納期で正直アホみたいなコードばかり量産しているので、機能追加を自分で制御できるぶん「捨てるもの」は判断しやすい。今回は以下のような順序で実施することにした。

JSのツールチェインに慣れるため、まずはexpressをSinatraライクにして、単純なAPIとして振る舞うように作った
- この実装も一応リポジトリにしている -> https://github.com/t-chov/telos
gihyoのVue.js入門をやる
- ここではNuxt.jsに触れられていないが、一旦仕組みを理解するべく vue-cli init webpack して始めることに
1で書いたものをSPAっぽく書き直していく

Vue.jsに関して言えば、この順番でやっていけばとりあえずSPAっぽいものは書けるんじゃないだろうか。

逆に、学習に時間がかかりそうなので今回は以下の要素を捨てた

単体テスト
E2Eテスト
TypeScript化

その代わりESLintはAirbnbスタイルでほとんどきっちり通している。

成果物

f:id:tkmk_k:20180108110033p:plain

Firebase + Vue.jsでSPAっぽく作った。CSSは bulma を使った。「SPAっぽく」というのはそうでほとんど遷移がない。今後機能が欲しくなったらいろいろ追加したい。

加えて、Vuexを使っていないのであんまりVue.jsのスキームに乗り切れていない。これは今後改善していく。単にVuexに慣れていなくてvuexfireの使い方がすぐわからなさそうだったので、今は大急ぎで https://vuex.vuejs.org/ja/ をやっている。

得られた成果

作りながら覚えることで学習が進む

今までチュートリアルをやってはデプロイまでいかず挫折する雑魚だったが、デプロイを最優先にすることで「これは後回し」という割り切りをできるようになり、結果として挫折するより数百倍学習が進んだ。今までは「趣味なんだからこだわろう」と考えていたがそんな考えは捨てたほうがいい。この精神はたぶん同人活動で獲得した気がする。

アウトプットできることによる自信

「何か作れる」というのはやっぱり達成感がある。筋トレもすれば倍ドンだ。既存のアプリを変にカスタマイズするより、欲しいものを自分で生産できると精神衛生にも良い。

技術的に困ったところ

以下、JS初心者ならではの困ったポイントを列挙していく。

bulma(というか外のCSS)をインポートするには?

main.jsで以下のようにする。

require('bulma/css/bulma.css');

日付の取扱が面倒

moment.js を使うのだ。こんな感じで使うと「期限まであと何日」が簡単に出てくる。

    getDue(interval, latest) {
      const latestMoment = moment(latest);
      const due = latestMoment.add(interval, 'days');
      const now = moment();
      return due.diff(now, 'days');
    },

人生裏ローテ

通年裏ローテを守って地味に重宝がられる人生を送りたいITエンジニアのブログ

書評『いつも「時間がない」あなたに　欠乏の行動経済学』

Vue.jsのv-modelとIMEの小話

tl;dr

補足