reactってむずかしい

ってほどでもないんですが,自分みたいなjs情弱にとってはとっつきにくいところあると思ってましてね。 とっつきにくいというか最初の一歩のハードルが高い。

自分はとりあえず動くもの作る前に,pluginとかディレクトリ構成どうしようとか,そこら辺後からグチャグチャにしたくないなーってことを考えてしまうタチでして,reactに手つけるにあたりイケてるサンプルコードをひたすら探しまくるところからスタートするわけです。

自分が探した限りではtypescriptとの連携周りでピンとくるサンプルコードがあんまり無かったり(特にredux-saga,thunkなど絡むと)action,reducer,storeの パッケージ構成(ディレクトリ構成)とかもオリジナリティが溢れてたりすることがしばしばあって読み解くのに苦労したりしたんですね。

create-react-appなどもいい感じではあるんですが,webpack周りが遮蔽されててそこら辺いじりたくなったらまたゴニョゴニョ変えるのめんどいなーと感じまして手出しづらいなーと。

vueいいじゃない

reactじゃなくvue選んだ(英語)とか見てもreactこりすぎじゃんと考えてる方々もいらっしゃるようで最小構成好きな自分としては前々から気にはなってたんです。 あと,2017/9に話題になりましたwordpressではreact使わねーよ発言とか見ても react一強体制がもしかして変わってくかも,,という事でvue使ってみっかとなりました。 (reactのライセンス問題は解決されたぽいので問題はなくなったと思いますがね。GraphQLはまだあれっぽいですか)

似たようなフレームワークでは以前riotを使った事があるのですが,その時は既成のコンポーネントがあんまりなくて苦労した思い出があります(ゼロイチでバリバリ作っていくcss力はない。頑張って作りましたが)

vueはどうやらreactと人気を二分してる感がありますし,周辺ライブラリ(とドキュメント)も充実してるんじゃないかと言う期待が持てます。 (riotのシンプルオシャレな感じ好きなんですがね)

rollupいいじゃない

riotjs使ってたときにrollup推しな雰囲気が出てて使ってみたんですがwebpackに比べてシンプルで直感的に書けてこれまた最小構成好きな自分には刺さりましたね。

あと心なしかトランスパイルが早い(気が)。ここらへんいつか比較してみたいですな。

typescriptいいじゃない

vueでもreactでも型は欲しいのです。ファイルをまたいで動的型付な変数とか使いこなせるほどLL脳が発達してないのです。 あとgoogleさんが標準で選んだというブランド力。

vue-cliとtemplateでサクッとhello vue world

前置き終了という感じでここから10分でvue使ってみたいと思います。

vue.jsにはclientツールがありこれでプロジェクトの雛形を作る事ができます(react-create-appとは違いただのgeneratorな感じ)

下記コマンドでinstallできます。

> npm install -g vue-cli
または
> yarn global add vue-cli

またvue-cliにはproject template機能があり,github上に誰かがあげてくれてるtemplateから雛形を作ることができます。 これにはvue initコマンドを使います。

vue initのhelpを見てみるとシンプルな感じが分かります。

> vue init --help

  Usage: vue-init <template-name> [project-name]

  Options:

      -c, --clone  use git clone
      --offline    use cached template
      -h, --help   output usage information

template-namehttps://github.com/[template-name]のようにgithubのドメインは含めず指定します。

さて,vue+typescript+rollupのtemplateが転がっているかどうかですがちょうどバッチリなthghさん作成 のtemplateを見つけました。 これがrollup-plugin-livereloadrollup-plugin-serveを使っており,webpack-server的にhot reloadもできるのでイケてはいるのですが,やや残念なことにこのtemplateが対応しているrollupのバージョンが古く,雛形作ってからrollupをアップデートするとうまく動きませんでした。

新しくなきゃ嫌なわけでもないんですが,ちょっといじればなんとかなりそうでしたのでforkして作らせてもらいました。

https://github.com/tacogips/vue-rollup-ts-template

> vue init tacogips/vuejs-templates-rollup hello-vue

  A newer version of vue-cli is available.

  latest:    2.9.1
  installed: 2.8.2

? Project name hello-vue
? Project description A Vue.js 2.4 project
? Author tacogips <xxx@tacogips.me>

   vue-cli · Generated "hello-vue".

> cd hello-vue
> yarn install  # or npm install
> yarn dev      # or npm run dev

これでhttp://localhost:10001/が勝手にブラウザで開いてくれるはずです。

hello vue

Vueワールドが広がりましたね。

ところでなんかVueのロゴってぱっと見Vimっぽいんじゃない?と思って改めて見てみたら

vim logo

全然違った。