死の犬、その薬

忘れないで

Vue & Flux アプリケーション設計 【3】

f:id:syakuya_sachiko:20180729140249j:plain 前回からの続きです。
今回はツールの選定をします。
フロントアーキテクチャの設計 は長くなるので次回。

ツール

今回はSPA (Single Page Application) という前提なので、Java Scriptフレームワークを導入したいと思います。そもそも、SPAとは一枚のHTML (ページ) に対して、Java Script で状態や結果を変化させるアプリケーションです。反対にPHP などを使ったウェブアプリケーションはサーバーサイドで画面を生成します。

フレームワーク

Angular、React、Vue.js このあたりのJava Scriptフレームワーク が広く使われておりナレッジも豊富です。よっぽどのイレギュラーがない限りゼロから作る場合はこの3つの中から選定することになります。
それぞれの特徴は下記のブログがわかりやすかったので参照してください。

iwasiman.hatenablog.com

会社ではReact を使っているので、プロダクトを作るときはReact を慣習的に使用します。ですが、今回はVue.js を選択。 勉強も兼ねているので、あえて使ったことのないフレームワークで作成しようかなと。

  • 日本語のチュートリアルもある
  • GitHub のStar ランキングもReact より上位になることが多い
  • 単純に使ってみたい

理由はこんな感じですね。

コーディング

Vue.js を使うことを決めたのでコーディングツールを決めます。
単純にJava Script を書くとき何を使うか (compile)、スタイルシートはどうするか、コーディング規約的なところも考えます。
今回は以下に決めました。

Compile

  • Webpack
    • Webpack 以外を選ぶ理由がない

JavaScript

  • TypeScript
    • 静的型付けがしたい
    • Vue.js 公式でサポートしている
  • コーディング規約
    • ESLint ( + TSLint)
    • Prettier

Style

  • Sass
    • 変数、mixin を使いたい
    • StyleLint

テストフレームワーク

ユニットテスト、表示テストのフレームワークを決めます。
Component はアトミックデザインを想定しているのでView 側はStoryBook です。
(フロントアーキテクチャの設計で詳しく説明します)

jp.vuejs.org

公式ページではKarma がおすすめらしいので以下に決めました。

これでreadme.md のspecificationが書けそうです。
次回はフロントアーキテクチャの設計をします。