新年の始まりはDreamweaverと別れて、Visual Studioから始めよう。

おすすめの記事

あけましておめでとうございます。

本年もごひいきのほどよろしくお願い申し上げます。

早速ですが、年末からゴニョゴニョいじりだしてある程度コツを掴めたVisual Studio for Mac。

ちょうどいい機会なので脱Dreamweaverを目指し、今年は利用したいと思います。

Visual Studioってなに?

Visual Studio Communityのダウンロードはこちらから

Macはこちらから

Microsoftが開発する総合開発環境なんですが、これがまた非常に柔軟な設計でして、あらゆる言語に対応できてしまいます。

基本機能だけでももちろんすごいのですが、機能拡張を利用することで、htmlやcss、PHPなんかも簡単に扱えるようになってしまいます。

他にもgitへの標準対応やアプリの軽さと安定性など、Dreamweaverとはかなり差がありますね。

そして最もすごいのが無料!

無料といえばAtomなども有名ですが、標準で日本語対応されていて、日本語利用に何の不自由もないエディタですから個人的にはこちらの方をおすすめします。

Visual Studioのメリット・デメリット

メリット

Dreamweaverより軽く安定しており、様々な機能拡張などのおかげで、かゆいところに手が届くようにできているところではないでしょうか。

導入自体も無料なので特にリスクはありませんし、今別のエディタを使っていてちょっと不満があるなぁ、という方ならサブのエディタとしての利用もおすすめします。

デメリット

環境構築に手間がかかる場合がある、といったところでしょうか。

DreamweaverであればSCSSなどは標準対応ですし、なにも考えなくてよかったわけですが、Visual Studioの場合Macであれば標準のRubyではなく、新規でインストールするところから始まります。

といってもHomebrewさえインストールしてしまえば、あとはコマンドラインだけで済みますからそれほど苦ではありません。

そして重要なのがCompassのインストール。

インストールと初期設定はこちらから。

毎回指定したディレクトリで「compass w」を入力するのもちょっと面倒ですが、まぁ、しかたないですね。

config.rbの初設定についてはLIGさんで詳しく解説されています。

あと、gitを利用する場合は.gitignoreファイルをちゃんと設定しないと、キャッシュファイルまでその対象になってしまうので、.gitignoreファイルの設定については毎回設定の必要があります。

そもそもCompassってなによ

LIGさんで説明されていますが、革命的なCSSの記載方法です。

圧倒的にcssの視認性と管理が向上しますから、いま導入されていない方はすぐにでも導入すべきものだと思います。

LIGさん的にいえば

  • 早い!
  • 見やすい!
  • メンテしやすい!
  • コード量がぐっと減る!
  • 一度使い出したら最後、もう元には戻れない!

だそうです。

これに加えてBootstrapを使えば、相当効率よくレスポンシブサイトが構築可能というわけですね。

こちらのサイトが参考になるのではないでしょうか。

まとめ

とはいえども、総合開発環境なんである程度重さはあります。

CotEditorのように小回りは効きませんが、サイト構築やWordpressのテンプレート作成、Movabletypeのテンプレート編集・バージョン管理まで行えます。

補完も細かくいろんな機能拡張があるようなのでお好みで。

ここまでくるとDreamweaverを使う必要性はあるのかな?といったところですが、Adobe CCを契約しているからもったいないしなぁ、というレベルであれば両方使って使いやすい方をメインにすればいいと思います。

私はDreamweaverの機能の高さと豊富さは非常に便利だと感じましたが、反面アップデートのたびに重くなったり安定性にかけたりと使いごこちが良くないので悩んでいたところでした。

多少の癖もあるので万人におすすめ!というわけではありませんが、導入して損のないエディタであることと、現在使えるエディタでもトップクラスの実力だと思っています。

追記

MAMPとの連携はこちらを参考に。

CSSCombの設定はこちらを参考に。

ESLintで必用なNode.jsはこちら。

ESlintの設定はこちら。