はてなトップのカテゴリに開発環境について載っていて、最近ほぼイチからWebフロントエンドの開発環境を整えたぼくにとってタイムリーな話でもあり、あとで環境触った時にわけがわからないという事態を避けるためのメモとしてここに残していこうと思います。
ネットワークとか
ローカルの作業環境はこんな感じ。下のSurfaceでプレビュー見ながら上のデスクトップマシンでコード書く感じ。で、ローカルでファイルをいじっているのではなくこんな感じにリモートで編集してます。
こんなまどろっこしいやり方しなくてもローカルでサーバ立てればいいじゃーんとはぼくも思うんですが、でかい画面に繋がってるのWindowsしか無いし、WindowsでUnix系のソフト使うのも使いづらいし……ってこんな感じになってます。リモートリポジトリの意味がない……。でもローカルでサーバ立てたりコンパイル走らせたりしないと重くなったりしないからいいかな。
ソフト編
1週間位でフロントエンドではやってそうなやつ全部のせって感じになりました。以下入れたもの。
- npm
- gulp
- pug
- Sass
- babel
- browserify
- Vue.js
- vueify
- browser-sync
なんかめっちゃソフト多いけど、Webフロントエンドじゃ普通なんですかねこれ。以下ざっくりと感想とか。
pug
とてもソースが見やすくなった。Emacsにpug-mode入れておけばあとはTAB押してればよきに計らってくれるので非常に楽。特に難しいこともなく雰囲気で書ける。入れてよかった。このあと複数ページ生成する時又役に立ちそう。
Sass
ファイル分割できるだけで文明を感じる。Sass記法ならインデントだけでネストできるのに文明を感じる。この二つのおかげで雰囲気で書いててもごちゃごちゃにならないので文明を感じる。
babelとbrowserify
ファイル分割でｋ ES6まだそんなに書いてないけどちょいちょい良さを感じる。やっぱりファ
Vue.js + vueify
まだちょろっとしたものしか書いてないけどVueのコンポーネントの良さがわかってきたような気がする。値勝手に変わってくれるの楽。
入れたものはこんな感じで。以下は導入見送った物。
webpack
Browserify+gulpで同様のことできるし特にいらないんじゃないか……？といった感じ。これ以上ツールを増やす必要が見られず保留。
CoffeeScript
括弧も少ないしいいんじゃなーい？と思ったけど各所からオワコン扱いされてたし、ES6のこともあるしそこまでJavascript辛くない気もしてきたので見送り。
Purescript
とても色物くさくて大好きなんですが実際のところで使えるかって言うと……。あとで実験的に触ったりしたいところではありますね。
