Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

9e3a9b57a1ef86c7636c9f80f4a9555d?s=128

firecolor

March 02, 2019
Tweet

More Decks by firecolor

Other Decks in Technology

Transcript

  1. None
  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. 慣れれば面倒じゃない! むしろ効率上がるし! モダンな…大変そう

  10. None
  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 ありがとうございました