案件で利用している Riot.js の開発環境周りについて

自分が携わっているフリーランスの案件で Riot.js を利用していますが、その周りのツール・環境・フォルダ構成等を書いていきます。

基本的には、↓の自作starter-kitを利用しているので、その中身の簡単に説明します。
https://github.com/ampcpmgp/parcel-riot-mocktimes-starter


## 周辺ツール

レポジトリを見たときには、まず `Readme.md` を読むと思いますが、 node.js を利用したレポジトリであれば、次に `package.json` を見ると良いみたいです。

そこで特に見たほうが良いのは、以下二つのようです。

* `dependencies` `devDependencies` - 依存ツール
* `scripts` - タスク

上記を見ることで、そのレポジトリの概要をざっくりと知ることができます。

https://github.com/ampcpmgp/parcel-riot-mocktimes-starter/blob/master/package.json



依存ツールを上から順に、めぼしいところをざっくり説明していきます。

### @storybook/riot

Riot.js で作成したパーツを一覧表示できます。
[サンプルページ](https://storybooks-riot.netlify.com/?selectedKind=Button&selectedStory=rounded&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel) / [Github](https://github.com/storybooks/storybook/tree/master/app/riot)

アドオンを併用すると強力で、以下の二つは特にパワフルです。

* addon-knobs
    * `opts` に当たる部分を、画面上で動的に設定し表示できる。
* addon-viewport
    * スマフォ / タブレット / PC サイズを簡単に切り替えられる。
        * storybookでは左メニューと、上記knobsが出るので、その表示を残したまま切り替え出来る。

[参考サイト](https://blog.spacemarket.com/code/storybook-addon/)

### am-mocktimes


こちらは僕の自作ツールで、アプリのパターン管理をしています。
[サンプルページ](https://ampcpmgp.gitlab.io/plane-puzzle/pattern.html) / [Github](https://github.com/ampcpmgp/am-mocktimes)

これを使うと、以下の嬉しい点があります。

* そのアプリの画面パターン一覧が簡単に見れて、簡単に共有できる
* 面倒な設計書を作る必要性が薄れる
* 面倒な画面操作を、一度定義するだけで、画面を触らなくて良くなる


### lint-staged

コミット前に、何らかの処理を入れるツールです。
[Github](https://github.com/okonet/lint-staged)

後述する コード整形ツール `prettier` と 構文チェックツール `standard` を利用しています。


### parcel-bundler

`es201*` の ビルドツールです。
[Github](https://github.com/parcel-bundler/parcel)

webpackだと面倒な記述を、すべてparcelが担ってくれるので、本当に楽です。
ただし、ドキュメントに書かれていない複雑なことをやらせようとするとはまります。

### prettier

コード整形ツールです。
[Github](https://github.com/prettier/prettier)

indentや空白マスなどを、機械が勝手に入れてくれます。
何も言わずにコードを見やすくしてくれる気の利きよう、好きです。

### standard

構文チェック・コード整形ツールです。
[Github](https://github.com/standard/standard)

使っていない変数を定義したり、絶対に通らないコードを書くと怒ります。
最初は怒られると、しぶしぶ直すんですが、だんだんその奥にある優しさが伝わってきます。
好きです。

### dob

状態管理ツールです。
[Github](https://github.com/dobjs/dob)

web standardである[Proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)を使った状態管理・変更検知ツールです。

IE11を捨てるとこれを使えます。どんなフレームワークでも使えます。


## フォルダ構成

ざっくり、以下の階層のようになっています。出来る限りシンプルに、を意識しています。

```shell
/mock # ローカルでのみ必要なモックコード
/src # プロダクトコード
  /const # 定数
  /image # 画像
  /state # 状態
  /tags # Riot.js のパーツ
    /pages # atomic-design でいう page
    /organisms # atomic-design でいう organism
    /parts # atomic-design でいう molecule + atom
  /util # 文字整形やobject変換などの、ユーティリティ
  app.js # js エントリ
  index.html # html エントリ
```

## その他の開発環境

### ブラウザ
Firefox をメインブラウザにしています。Rustが好きだからです。
たまに chrome か、 firefox developer edition を利用。

### エディタ
vscode

atom信者から乗り換えて、快適なことを知りました。

### Git

Github Desktop をメインに、gitkrakenやgit CLIを使っています。

### その他
マイナーな便利ツールを一応置いておきます。

* [Clover](http://cn.ejie.me/) - Windows のみ
    * explorer のタブ化。めちゃめちゃ使いやすい。
    * 中華製ということで、ウイルス疑惑が一度ありましたが、僕のセキュリティソフトは何も言わなかったです。便利ツールを作っている人は個人的には応援したいです。
* [clibor](https://www.vector.co.jp/soft/winnt/util/se472890.html)
    * クリップボード履歴記録ツール。何個か前にコピペしたものをすぐ使える。めっちゃ便利です！


## 終わりに

ここで紹介したものは、すべて便利だと確信しているので
１個でも使ってみたいものがあれば、積極的に入れてみることをお勧めします！

もし、入れ方がわからない＞＜って人がいたら気軽に聞いてください！

そんな感じでしたー( ｀ー´)ノ