ホーム » Node.jsでSass環境を整えWebStorm&PhpStormと連携【その2】

Node.jsでSass環境を整えWebStorm&PhpStormと連携【その2】

by MOMO

無事になんとかNode.jsの上でSassが稼働しているのを確認するところまでが前回の記事でした。これからPhpStormで使うところをご紹介しましょうね。
タイトルにその2となってますけれど、Node.jsはいろいろなことができるために大変人気のあるJavaScript開発環境だと思いますので、Sassに限らず導入の参考になったのではないかしら。
今までWebサイトやWebアプリケーションを仕立てるときに、サーバサイド・スクリプトのPHPやParlやRubyのようにサーバーにその環境を導入した上で稼働させるものと、クライアントサイド・スクリプトと呼ばれるJavaScriptなどはChromeなどのブラウザに搭載されていてクライアントと呼ぶ使う側のユーザーのコンピューター上で稼働するものに分けられていました。でも、このNode.jsはどちらでもOKのマルチなうえに記述式がJavaScriptなので急激に人気になりましたね。そのうち百聞でもこのNode.jpについては書きたいと思ってます。

Node.jpのインストールのあたりのことは↓で書いてます。一緒に参考にどうぞ。

Node.jpでSass環境を整えWebStorm&PhpStormと連携【その1】

この設定はPHPStormというIDEのために作りました

IDEとは日本語で統合開発環境と言いますね。アプリケーションを作るためのソフトウェアで、複数の一般的な開発者用ツールを 1 つのGUI(グラフィカル・ユーザー・インタフェース )で使えるようにしたもの。出来ることはこんなこと。

  • ソースコードエディター
  • ローカルビルド自動化
  • デバッガー

EclipseやVirtual Studio(Codeのつかない方)などもIDEですね。他にもたくさん有償のものもオープンソースのものもたくさんあります。もちろん使い勝手でそれぞれのお気に入りがあるのかもしれませんね。私は断然JetBrains社のものが魅力的で大好き!

JetBrains社製のWebStormとPHPStorm

VS CodeがあればほぼSCSSだってJavaScriptだってPHPだって書けてしまうのはホント。毎年素晴らしい数のplug-inも登場してくるしSassのコンパイルもplug-inがやってくれる。
それでもこの素晴らしいIDEを紹介しておきたいんです。PHPStormWebStormにPHPの機能を追加した者と考えて良いと思います。PHPを触らないWeb系のJavaScriptなどはWebStormのほうが良いと思いますね。もっと上位に来るIntellJ IDEAというIDEはplug-inを追加することでオールマイティーに使える開発環境なんです。

専用IDEだとサクサク使えてやっぱり便利

IntellJ IDEAがあるのに、なぜこんなにジャンル分けされて販売されているの? 私の私感ではありますが…やれることが多すぎると設定やらアップデート更新やら非常に大変だってこと。そもそもIntellJ IDEAさんは開発熱心で本当に毎月のようにアップデートが来るんです。これは素晴らしいことですよ。JetBrains ToolBox という管理ソフトがアップデートを知らせてくれてボタンひとつでインストールしてくれますから便利です。でも、現状使わない言語のために手間をとらせられるのも面倒。ましてや項目が増えても覚えるのも苦手… ということでいまはPHPStormで作業することが多いです。

実際のPHPStormでの作業環境をご紹介

Nose.jsとSassがインストールされたら、もうほぼPHPStormのIde側で設定することはありません。
ちゃんとバージョンアップしてればデフォルトで自動で『File Watcher』という機能が働いて自動でCssに変換してくれます。新規に作成するときには

PHPStorm

こんなふうに連携を聞いてくれる。これが設定なしでインストールしただけでOKだから本当によく出来たサポータさんだと思うわけ。

プロジェクト内に最初にSCSSを作ったときにだけこのパスや出力変数を聞いてくるので必要に応じて変更すれば良いけど、いつもほぼこのままでOK。

実際のPHPStormの自動変換はこんな感じ

PhpStorm

こんな感じにメインのstyle.cssには変数を定義したSCSSと部分に分けたSCSSをインポートするだけで規制されます。修正ごとにクルクル自動で変更してくれる様を見ているだけで結構楽しいの。
そしてこのキャプチャを見れば解るように、とてもきれいなインターフェースのデザインで、これに合わせるように実はVS Codeも似たような配色のテーマを選んでだりしてます。

とにかくいろいろな面で自動補完の素晴らしいこのPHPStorm。有償のIDEだけど継続するごとに3年目の契約では40%もの割引もあるし、教育機関に在籍の学生や教員はAll Products Packが無料で使えるという太っ腹。卒業時に継続契約すると割引もあるらしいからオススメしますわ。ちなみにWebStormはPHPStormよりPHPの機能がない分お安く利用可能です。

You may also like