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

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

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

周辺ツール

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

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

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

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

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

@storybook/riot

Riot.js で作成したパーツを一覧表示できます。
サンプルページ / Github

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

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

参考サイト

am-mocktimes

こちらは僕の自作ツールで、アプリのパターン管理をしています。
サンプルページ / Github

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

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

lint-staged

コミット前に、何らかの処理を入れるツールです。
Github

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

parcel-bundler

es201* の ビルドツールです。
Github

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

prettier

コード整形ツールです。
Github

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

standard

構文チェック・コード整形ツールです。
Github

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

dob

状態管理ツールです。
Github

web standardであるProxyを使った状態管理・変更検知ツールです。

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

フォルダ構成

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

/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 - Windows のみ
  • explorer のタブ化。めちゃめちゃ使いやすい。
  • 中華製ということで、ウイルス疑惑が一度ありましたが、僕のセキュリティソフトは何も言わなかったです。便利ツールを作っている人は個人的には応援したいです。
• clibor
  • クリップボード履歴記録ツール。何個か前にコピペしたものをすぐ使える。めっちゃ便利です！

終わりに

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

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

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