タイトルの通りです。

コーディングは早くやればやるほどお金が稼げるので、そのためのツールのお話。

コーディングの効率化は

  • テキストエディタにプラグインなどをカスタムする
  • Sassなどの便利な奴らを使う
  • Gulpなどのタスクランナーを走らせる
  • 効率的なソースを作る
  • とにかく素早く作る(力技)

だいたいこんなところなのですが、Gulpとかタスクランナーは正直設定がめんどくさいい。。。(使っていますが、)

ターミナルにコマンド打ってnode入れてnpm使うのって(今ならYarnかもしれませんが)、ある程度プラグラミング側がわかっていないとちょいハードルは高いかなと。

Sassを一人でとりあえず使いたいなら、そこまでするのは正直しんどい。

そんな時に楽なのが、GUIで操作できるコンパイラです。(GUIは画面に表示されるとでも思っててください)

僕は、過去のSassやjsの圧縮などは、KoalaというGUIコンパイラを使っていました。

無料で使えてMacでもWindowsdeも使えるので、サクッとSassやjsの圧縮、cssの整頓をしたいならKoalaを使うのが楽でおすすめなので、この記事で紹介します。

Koalaでできること

https://koala-app.com/

  • Sass/Scssのコンパイル(自動でファイル監視してくれる)
  • Cssの圧縮・ソース整形(自動でファイル監視)
  • Sass/Scss/Cssにベンダープレフィックスの付与(自動でファイル監視)
  • Javascriptのソース圧縮・監視
  • 複数のJavascriptを1つのファイルにまとめる

だいたいこんなことができます。もう少し詳しく解説します。

Sass/Scssファイルを監視して保存したら自動コンパイル

Sassは保存するだけでは、Cssになりません。SassをコンパイルしないとCssが生成されないからです。

Sass保存して、いちいちコンパイルするのは手間なので、Koalaを起動しておけば、自動でSassを監視してくれて、保存された時にCssにコンパイルしてくれます。

koalaを起動

Koalaを起動して、↑の部分にプロジェクトフォルダをドラッグ。

その後、sassファイルを選んで右側で「自動コンパイル」を選べば監視モードに。

出力は、

  • nested:ネストされたままcssに出力
  • expanded:よくある感じのcssの状態
  • compact:1つのclassごとに1行で出力
  • compressed:極限まで圧縮

この4つ。とりあえず「expanded」にしとけばいいでしょうが、ソース軽くしたいなら、「compact」か「compressed」ですね。お好みで。

また、ベンダープレフィックスを自動でつけてくれます。

「Autoprefix」といものがあるので、これにチェックを入れればOK。あとはコンパイルしたら自動でベンダープレフィックスが付与されます。便利!

Koalaでsassを使う方法を詳しく解説中

Cssの圧縮・ソース整形

Koalaにプロジェクト追加して、Cssを選ぶ。すると右側にメニューがあるので、設定して、「コンパイル」をクリックすれば、css圧縮やソース整形などの処理が行われます。

cssもsassと同じく、ベンダープレフィックスつけてくれるので「Autoprefix」をつけておきましょう。

Javascriptのソース圧縮・監視

KoalaはJavascriptのソースも圧縮と監視してくれます。

Sassと同じく、自動コンパイルにチェックを入れておけば自動で、圧縮のminifyファイルが生成されます。

複数のJavascriptを1つのファイルにまとめる

Koalaは複数のjsファイルを1つにまとめてくれます。

一応高速化するなら、httpリクエスト数が少ないほうがいいので、まとめてほうが早い可能性がありますが、可読性が下がるのと思わぬバグが発生することもあるので、特別なことがない限りは1つに圧縮しなくてもいいのかなと。

1つのファイルへのまとめ方は以下記事を参照ください。

まとめ:無料で簡単に使えるのでとりあえずSass使いたい人におすすめ

Koalaは無料で使えるので、とりあえずSassを使ってみたかったり、jsを圧縮したい人なんかにおすすめです。

最終的には、Gulpやwebpackなどを使うことになると思いますが、出だしとしてはありなのかなと。