【sass/js】無料のGUIコンパイラーKoalaでコーディングを楽にしよう！

2019年3月31日2020年4月2日

Preprosの詳細記事 ↓

追記終了

---

コーディングは早くやればやるほどお金が稼げるので、コーディングを効率化するばよりたくさんお金が稼げます。

そのコーディングを効率化するツールのお話。

コーディングの効率化は

• テキストエディタにプラグインなどをカスタムする
• 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を起動して、↑の部分にプロジェクトフォルダをドラッグ。

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

出力は、

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

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

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

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

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などを使うことになると思いますが、出だしとしてはありなのかなと。