死の犬、その薬

忘れないで

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

f:id:syakuya_sachiko:20180803000112j:plain
前回からの続きです。
今回はフロントアーキテクチャの設計をします。

アーキテクチャ

アーキテクチャとは設計方法、設計思想をいいます。「どうやったらこのView が更新されるか」「情報をどこにもっているか」「どこから情報を呼び出すか」とかそういうのを図にしたり、文章にしたりして共有します。
今回はVue.js を使用するのでまずは公式のアーキテクチャを把握する必要があります。

012-jp.vuejs.org

下記の図がVue.js のアーキテクチャです。

f:id:syakuya_sachiko:20180803000752p:plain コンセプト概要

処理の流れはModel → ViewModel → View または View → ViewModel → Modelですね。
必ず ViewModel を経由するようになっています。このモデルをMVVMモデルと言います。ViewModel は View と Model を同期させるいわばブリッジとしての役割になっています。
Model はデータオブジェクト とされています。

{ hoge: 'mogemoge' }

上記のようなオブジェクトがあればModel 足り得ます。重要なのはModel はViewModel に監視されているということです。
説明すると長くなるので「監視されている」ということだけ覚えておいたほうがいいです。
View はブラウザに表示されているDOM要素になります。HTML と考えても間違いではないと思います。役割は「結果の表示」「ユーザーアクションの発火元」です。
「結果の表示」はそのまま、ViewModel で処理された内容が表示されることです。上記のオブジェクトならこのように表示させたりできることです。

<p>{{ data.hoge }}</p> 

これで、HTML上には<p>mogemoge</p>とDOMが生成されれば理想通りです。
「ユーザーアクションの発火元」 はクリックなどから発火されたイベントによってModel を変更させたりするように使用します。

f:id:syakuya_sachiko:20180803003336p:plain

公式ページの「クイックな例」を分解してみました。
比較的View 側はわかりやすいと思います。ViewModel と Model が合体していますが、これが「監視」という処理になります。
ViewModel 内のdata にModel を流し込むイメージです。

Vue.js はViewModel が色々と処理をしているということがわかったと思います。 しかし、まだまだ触りも触り、ギターで言うと構え方を知ったくらいです。
フロントアーキテクチャフレームワークで行う際はしっかりとした前知識が必要です。

次回はVue.js コンポーネントの設計をします。

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が書けそうです。
次回はフロントアーキテクチャの設計をします。

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

前回からの続きです。
機能要件と非機能要件を考えます。

f:id:syakuya_sachiko:20180726120133p:plain

機能要件と非機能要件

機能要件

機能要件はシステムまたはアプリケーションで何をやりたいのかということです。
この機能要件をすべて網羅した段階で完成ということになります。
機能要件は要件定義書に書いてあると思います。
なのでどちらかというとエンジニアは期間内にやれるかとか、ここは技術的に難しいとかフィルタリングをしています。
今回はデザインがあるのでデザインを見ながら決めましょう。

非機能要件

非機能要件はユーザーの価値とかユーザの満足度と言われますが、「やったほうが良さげなこと」と考えます。
「良さげ」なことは大概、暗黙の了解になってやらなかったとき色々言われるので自分やチームの中で「やったほうが良さげ」だと思ったことを、開発期間を無視して箇条書きでまとめて形にしておくと後から楽になります。

まとめる

エンジニアは機能要件と非機能要件をまとめる必要があります。
形はわかりやすければ何でもいいですが、MarkDownパワポでまとめることが多いです。
パワポはとくにミーティングの際に発表しやすいのでおすすめです。
今回はミーティングはしないのでMarkDown でまとめます。
GitHub やGitLab のIssue に書くと想定して画像や動画を含めてわかりやすくまとめます。
ここで前回決めた名前が活躍します。

機能要件

ヘッダー

f:id:syakuya_sachiko:20180724235415p:plain

  • 「ロゴエリア」にロゴが表示されていること
  • 「検索ボックス」が表示されていること
    • 「検索ボックス」に文字を入力できること
    • 入力された文字に応じて「カード」がフィルタリングできること ※1
  • 「お気に入り」が表示されていること
    • 「カード」をD&D で「お気に入りカード」に追加できること ※2
    • クリックで追加した「お気に入りカード」を表示できること ※2
    • 「お気に入りカード」はログイン不要でブラウザに保持されること
※1

f:id:syakuya_sachiko:20180725003118g:plain

※2

f:id:syakuya_sachiko:20180725002734g:plain

コンテンツ

f:id:syakuya_sachiko:20180725000247p:plain

  • 「カード」が32枚表示されること
  • 「カード」内には以下の要素が表示されていること
    • 「問題エリア」
      • 問題は※3のようなデータをCSVに保持すること
    • 「セレクトエリア」
      • 正解以外の選択肢2つはWikipediaAPI を利用してとってくること
    • 「アンサーボタン」
      • 正解の選択肢を選んで「アンサーボタン」を押下すると正解の「リザルトレイヤ」が表示されること ※4
      • 不正解の選択肢を選んで「アンサーボタン」を押下すると不正解の「リザルトレイヤ」が表示されること ※4
※3
id question answer
1 座っているのに、空にあるものってなんだ? 星座
※4

f:id:syakuya_sachiko:20180725003157g:plain

非機能要件

f:id:syakuya_sachiko:20180725003433g:plain

次回は機能要件に基づいてツールの選定、フロントアーキテクチャの設計を決めます。

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

Vue を使ってサーバーレスのアプリケーション っぽいものを作ります。
仕事で学んだこと覚えておきたいので順にそれっぽく進めます。

デザイン

f:id:syakuya_sachiko:20180722235041p:plain
f:id:syakuya_sachiko:20180723000916p:plain
なぞなぞを選択肢付きで表示させる簡単なアプリケーションです。
まず最初にデザインを見ます。
自分の作ろうとしているものがどんななのか、機能要件&非機能要件を考えます。
要件を決める前に名前がないと意思疎通できないのでプロジェクトを通じて決めます。
今回は独断で下記に決めました。

名前決め

  • 一番上の青い要素のところは「ヘッダー」
    • 左側のロゴは「ロゴエリア」
    • 右側の検索は「検索ボックス」
    • 一番右側の星マークは「お気に入り」
  • ヘッダー以外の要素は「コンテンツ」
    • コンテンツ内なぞなぞが表示されているものを「カード」
      • カード内、なぞなぞの出題文は「問題エリア」
      • カード内、選択肢は「セレクトエリア」
      • カード内、一番下のボタンを「アンサーボタン」
      • カード内、正解不正解のレイヤを「リザルトレイヤ」

次回は機能要件&非機能要件 を決めます。