Gs9gxzlm

2018-11-30 tagucchCreated on 2018-12-01 by tagucch

    おひさしぶりです、どうも。
    いやもうnippoなのにデイリーで書く気なさすぎるだろという感じですが、まあ大目に見てやってください。
    で、まあなんで今日書こうと思ったかというと、単に週末だし一週間やってきたこと軽くまとめるかみたいな気持ちになったからと、軽い気持ちでVue.jsのアドベントカレンダーに登録してしまったのでそのための思考整理をしなきゃなという気持ちになったからと、あと気持ちになったからです。

    自分は最近仕事でVue.jsを利用したSPAを作成しています。
    Vueをチョイスした理由としては、今回のプロジェクトで実装するプロダクトの規模が小さいこと / プロダクトを出してからどの程度の人気が出るかわからないためなるべく作りやすく、かつ捨てやすいこと / 新しい技術(特に専任のフロントエンドエンジニアがいないのでモダンなフロントエンドフレームワーク)を試して知見を貯めたいこと、の主に三つです。
    以前自分はほんのすこしだけReactとReduxを使ったことがあるのですが、まあいうてもReactもほんのすこしなのでどのみち多くのインプットが必要だと考えた際に、公式ドキュメントの日本語の充実度を見てVueを選択しました。まあただ英語から逃げてるだけなんですが。

    VueでSPAを作成しようとしたときに、選択肢としてNuxt.jsが挙がりますが、今回はSSRをするつもりも特になかったので選択しませんでした。またReactを触っていた時代はセットでReduxも触っており、逆に単体のReactだけでのアプリケーションの作成をした経験がないのもあって、Fluxアーキテクチャに頼らざるを得ない状況だったのでVuexを採用しました。

    実装予定のプロダクトは本当に小規模なもので、どれくらいかというと初めてVueを触る自分が1ヶ月半程度で完成する見積もりなくらい小さいです。
    まあSPAを組み立てるだけの見積もりで、実際には他にもいろいろやらなければいけないことがあるのですが。
    なのでVuexでアプリケーションのStateを全体で管理すると言っても大したサイズにはならないので、とりあえず一極集中でStoreにStateをぶちこむかみたいなノリでスタートしました。

    Vuexすごいなと思ったのはStoreをModulesに分割できることです。どう分割するかは悩ましかったのですが、今回は画面ごとにしました。
    画面ごとにModulesを切って、画面ごとに必要なStateを分けることで、今回は小規模ですが多少大きくなってもStoreが肥大化することなくなると思います。
    それとVuexはStoreにすべて乗っけてしまうというのもReduxを触ってた身からすると新鮮でした。actionと、Vuexにはmutationやgetter/setterという概念もあるのですが、それらをすべてStoreのModules内にぶちこみます。そしてnamespacedオプションで各Moduleにnamespaceを付与することで、コンポーネント側でActionやStateを呼ぶ際もnamespaceを指定できます。
    画面ごとにnamespaceを切ったことでactionやstateの取得の複雑度がかなり下がっていて良いな〜と思いました。

    Reduxを使っていたときは、Reactの外の世界(いわゆるFluxの部分)はすべてContainerを経由していました。StateもDispatchもContainerを経由してpropsとして子Componentに渡し、子からイベントを受け取りContainerを経てFluxのActionをDispatchするという感じです。
    ですがVuexではちょっと違って、ReduxでいうところのContainerはViewsという名前で、このViewsは本当にViewの管理という感じです。
    詳しくはあろえりーなさんの記事が大変よくまとまっていて参考になったのですが、stateやdispatchをContainer(Views)を経由せずにコンポーネントごとに行っていく感じです。なのでpropsとして子にstateやdispatchを渡すのではなく、コンポーネント自身が直接Storeとやり取りしてdispatchやcommit(mutationを発行すること)を行っています。
    これは最初ちょっと戸惑ったのですが、まあ小規模なこともあってあまり困ることなく順応できました。

    ここ最近はCSSを書いているのですが、CSSほんとにわからん。マジで助けてくれ。
    VueはVueインスタンスを作成することもできるのですが、Single File Componentという書き方もできます。
    コンポーネントに必要なtemplate, script, styleをすべて一つのファイルで管理でき、かつtemplateではHTMLとPug、scriptではJSとTS、styleは生CSSや様々なプリプロセッサを自由に選択できます。styleはscopedにもできて、他コンポーネントとのセレクタ名の被りを気にすることなく利用できます。なのでガンガンbuttonとかimgとかセレクタとして使えます。楽ですね。
    まあ楽なんですが、そもそもCSSをガッツリ書くという経験をやったことがない自分は全然CSSわかんなくて、とにかく手探りでいろいろやりました。
    まあ手探りとはいえあんまりレガシーな書き方をしたくないので、flexboxを使ってみたりしました。あとこれは自分は何もしていないのですが、@vue/cli 3.0以上でプロジェクトをcreateするとPostCSSのautoprefixerの設定がデフォでされているので、ベンダープレフィックスとかいう忌まわしき悪を自動でよしなにやってくれます。ありがてえ。

    長くなりましたが、@vue/cliでVueのプロジェクトを作成してVuexでよしなにやるといい感じでしたという感想です。
    まあ思考整理なのであんまり気にしないでください。弊社Tech Blogにも年明けに自分のVueプロジェクトの話を書く予定なので、まあ暇な方はぜひ読んでください。宣伝失礼しました。
    また時々書きたいのでよろしくお願いいたします。

    P.S. Twitter連携解除しちゃったけど再連携できなくなってしまった、みなさんこういうときどうしているのでしょうか

    9fe49721a7974b0a8d6fa70d1cadcf24
    Commented on 2018-12-01

    現状ツイッターログインができないっぽいので、前に使ってたセッション切れてない端末で細々更新してます。

    Kzezszuy
    Commented on 2018-12-01

    Twitter連携解除

    最初からメアドで登録しておいてよかった……

    Gs9gxzlm
    Commented on 2018-12-02

    あーーーなるほど、やっぱそうなりますよね……