お気軽にチャレンジ モダンフロントエンド

2019.03.03のゆるゆるIT勉強会 feat.Reedex Vol.6で発表。
とりあえず今どきのフロントエンドを簡単に・気軽にチャレンジ、でも開発環境をチェンジするときは使いどころも考えようねという話

Transcript

2. 自己紹介 ↓ 割愛
3. モダンなフロントエンド？
4. モダンなフロントエンド？ とりあえず・・・ • SassとかPostCSSとか • TypeScriptとかES6とか • ReactとかVueとか • Webpackとかgulpとかnpmとか
5. 俺的普段環境
6. OS: Win10Pro エディタ: Visual Studio Code デザイン: Photoshop、AdobeXD CSS: SCSS JS: いろいろ ビルドとか: Webpack4 俺的普段環境
7. モダンな…大変そう
8. node.jsいれて・・・ npmでインストールして・・・ Vueとかフレームワークとか タスクランナーとかバンドラーとか package.jsonとかwebpack.config.js いちいちコンパイルだのトランスパイルだの モダンな…大変そう
9. 慣れれば面倒じゃない！ むしろ効率上がるし！ モダンな…大変そう
11. とはいえ慣れてないとつらい！！ 特にデザイナーとかHTMLやCSSコーダーメ インとかだと余計ですね モダンな…大変そう
12. そんなときはPrepros
13. https://prepros.io/ そんなときはPrepros
14. 簡単に言えばGUIコンパイラ オートコンパイルやオートリロード、ウェブ サーバーなども機能も付属 そんなときはPrepros どんなものなの？
15. Sass、Less、Pug（Jade）、CSS、 JavaScript、Stylus、Markdown、Haml、 Slim、CoffeScript、Livescript、Kit、 TypeScript Autoprefixer、Uglify Js、Cssnext、Babel etc... J S X も い け る か ら R e a c t な ん か で も … そんなときはPrepros こんなことができる
16. そんなときはPrepros
17. これであなたもモダンな開発が試せます そんなときはPrepros
18. 実話：最近であった案件
19. nuxt.jsで静的ページを生成するプロジェクト なんだけど… 実話：最近であった案件
20. まとめ
21. 肝心なのは使いどころ 道具だもの まとめ
22. 気軽にいろいろチャレンジしたら 開ける道もある まとめ
23. 登壇者 小泉 誠 こいずみ まこと Website：https://www.firecolor.com/ Blog：http://www.jetbaby.net/ Facebook：Makoto Koizumi Twitter：@FireColor Line：@qsn3162t ありがとうございました