Twitter Facebook github

Posts Tagged with “Scss”

モダンなフロントエンド開発環境をつくる

最近、趣味で作りたいWebアプリがあって、結構クライアント側が要になりそうなので、思い切って勢いで Deep Dive してみた話。かなり長いです。

モダンって言ってるけど、TypeScriptが苦手ならES2015+ES7も全然アリだと思う。前回の記事で触れてるから、TypeScriptの代わりに書き換えればうまく載るはず。というか人口的にはTypeScriptよりES2015使う人のが当然多いだろうけど、今回はTypeScript使ってみたかったんです・・・。

背景

わたしは今までフロンドエンド開発っていうと、CSS3+HTML5で特別な開発環境も使わず、気合いで頑張って作ってきた勢です。

一応、フリーランスでバックもフロントもまとめて依頼されたり、趣味で書いたり、プログラミングスクールで先生やってた頃はフロントも教えていたんですが、とても苦手でした。特にデザインとか全くセンス無いし、デザインも決まってないようなサイトをまるっと任されたりするとすごくストレスで辛かったのを覚えています。

最近はバックエンドやインフラにフォーカスした仕事をしていて、ほぼほぼフロントを書くこともなくなったのですが、数年前より便利なツールや面白そうなライブラリがいろいろ増えていて、せっかく書くならとことんモダンに!ということでやってみました。

今回のゴール

ここで作る環境の最終的なコードはgithubにあります。
https://github.com/syamn/sakuio-blog-160314

  • node.js と npm をインストール
  • JavaScript には TypeScript を使う
  • CSS には Scss (Sass) を使う
  • ビューライブラリには RectJS を使う
  • WebPackだけでビルド (GruntやGulpは使わない)
  • WebPack-Dev-Serverで自動リフレッシュを試してみる

ネットで情報を探すと、TypeScriptやScssのトランスパイルには未だにGulpが主流で(Gruntは減ってきましたね)、せっかくWebPackを導入してもGulpと組み合わせて使うみたいな記事を多く見かけます。

せっかくWebPackを導入したのなら、WebPackだけで完結させましょう〜!

Read More »