# Riot.js<br>開発環境構築<br>について --- ## 自己紹介 Akira Hayatake * フリーランス歴4年 * 小型案件でRiot.jsを利用 [twitter@am_nimitz3](https://twitter.com/am_nimitz3) / [Github@ampcpmgp](https://github.com/ampcpmgp/) --- Riot.js で開発するとき、どうしていますか？ --- ざっくり３パターン💡 * ブラウザ上でtagファイルをコンパイル <!-- タグファイルをそのまま読み込むもの --> * ビルド環境を自力構築 <!-- webpack とか ちょっと前だと gulp+browserify など --> * starter-kitを利用 --- ### 💡ブラウザ上でコンパイル <!-- 楽にライブリロード環境を構築できるかなと思います --> <!-- オンラインエディタを使うと、データが他の人のサーバーに上がってしまうので、ローカルで作りたいときは、live serverを利用することになるのかなと思います --> * オンラインエディタを利用 * [Plunker](http://plnkr.co/) / [コードサンプル](http://plnkr.co/edit/bQCdWM3eXPHPdyilMVWW?p=preview) * [Runstant](http://runstant.com/) / [コードサンプル](http://runstant.com/am-akira/projects/2a98b8b8) * [CODEPEN](https://codepen.io/#) * live serverを利用 * [vscode](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) * [atom](https://atom.io/packages/atom-live-server) * [npm](https://www.npmjs.com/package/live-server) --- #### 長所😊 * とにかく楽に作り始められる <br><br> #### 短所😢 * コンパイル時間分、パフォーマンスが落ちる --- ### 💡ビルド環境を自力構築 * webpack * parcel * ... --- #### 長所😊 * カスタマイズ性が高い <!-- jsファイルを圧縮したり モック環境を作ったり --> <br><br> #### 短所😢 * 環境構築に手間がかかる --- ## 💡starter-kitを利用 * [github search (sort: recently updated)](https://github.com/search?o=desc&q=riot+start&s=updated&type=Repositories) git clone + npm install で開発可能になる --- #### 長所😊 * 楽にパワフルな環境を手に入れられる <br><br> #### 短所😢 * やりたいことが出来なかったり、やろうとすると手間がかかることがある --- ## 最後に 自分のstarter-kitのご紹介 → [Github](https://github.com/ampcpmgp/parcel-riot-mocktimes-starter) --- ### 利用module抜粋 <!-- package.json を見ると、大体何を使っているかがわかります。その一部を簡単に紹介します --> * [parcel](https://github.com/parcel-bundler/parcel) (ビルドツール) * [prettier](https://github.com/prettier/prettier) (js整形) * [standard](https://github.com/standard/standard) (js構文チェッカー) * [dob](https://github.com/dobjs/dob) (状態管理) * [am-mocktimes](https://github.com/ampcpmgp/am-mocktimes/) (モック生成ツール) --- より良い環境で<br> コーディングを楽しんでいきましょう！ <!-- という思いを込めて、この資料を作りました --> --- <!-- 以上になります --> ご清聴ありがとうございました。