デザイナーにこそ勧めたい生産性爆上がりの最強エディタ「PhpStorm」

※2019 8月21日更新

私はデザイナーだけどコーディングは憂鬱…
WordPressの仕事が着たのは嬉しいけど、編集がもっと楽にならないかなぁ…

というwebデザインに従事しているデザイナーの方は多いと思います。
しかしコーディングって憂鬱になるときありませんか？

「あれ…このクラスどこで使ってたっけ…」とか。
「なんかおかしいと思ったらタグが閉じ忘れていた…」とか。
「もっとこういうところ自動化してくれたら楽なのに…」とか！

今回は騙されたと思って使ってみてほしい生産性爆上がりのエディタ、「PhpStorm」の紹介をしていきたいと思います！
信頼性についてはこの製品は多数の紹介記事が世間に公開されていますので併せてご覧頂いて是非検討してみてください。

日本では株式会社サムライズムさんが公認代理店として販売されています。こちらから購入したほうが安いので是非。

VScode等の無料でも非常に高性能なエディタが世の中に出ている中、何故わざわざ有料のこのアプリを勧めるのか。
正直安くない出費ではありますが…一度使うと抜け出せなくなる便利さです！
めちゃくちゃかゆいところにまで手が届いているこのアプリの魅力に迫ります！

※当記事ではWordPressやHTML/CSSのコーディングを考慮し「PhpStorm」を紹介しています。
僕自身は「InetlliJ IDEA Ultimate」を使用していますが使用感はほとんど同じです。

PhpStormやintelliJって何？IDEとは？エディタじゃないの？

phpstormはJetBrains社製の製品で、正確にはエディタではなくIDEといわれるものです。

IDE（統合開発環境）とは

本来であればエディタ含め、開発に必要であるはバラバラに存在しますがそういった個々で用意すると面倒なものをよろずまとめて一つのアプリにまとめたものです。また本来ターミナル等の操作が要求されるものも視覚的に操作できます。

JetBrains製のIDEは数多くありますが、基本的な使い方はどれも同じです。
WebStormというHTML/CSS、JavaScript用のIDEがベースにあり、さらにこれに各製品ごとに使える言語が追加されているようなイメージです。
PhpStormを紹介しているのは上記の言語に加え、WordPress等のphp、データベース操作を考慮するとwebデザイナーやコーダーの扱うエディタとしては一番妥当な製品だと考えるからです。

他のエディタじゃなだめなの？ノンプログラマーにこそおすすめしたいPhpStormを使うべき理由

1つ1つのポイントだけかいつまんで行けば他のエディタやIDEでもできる事自体は同じ、ないしはそういった機能があったりします。

しかしPhpStormにはプラグイン等の追加なしで使いやすい環境が最初から大量に高水準で盛り込まれています。
あなたがエディタの各種カスタマイズを自身で納得のいくまでカスタマイズできる方であればわざわざ新しいアプリは必要ないでしょう。
しかし多くの人は環境構築にはできれば時間をかけたくありませんし、PC等が変わっても同じ環境をすぐに構築したいと考えると思います。こういった設定は一度してしまえばクラウドに保存しておくこともできます。

デフォルトで使いやすいにこしたことはありません。

どうしても足りない部分はさらにプラグインで補うこともできるため、より使いやすい環境を手早く構築しやすいです。

日本語化が簡単。

日本語化は簡単で複雑な設定をしたり、いくつものソフトをいれたりということは必要ありません。

記載されている通りに行えばそのままスムーズに終わります。

参考
JetBrains日本語化JetBrains日本語化

具体的な魅力は？

こちらはまずはざっと箇条書きで紹介していきます。
正直書き出し始めたらキリがないくらいなんですが…デザイナーでも関係ありそうな部分を一部紹介します。

コード補完がとても優秀。一言だとチープに見えてしまうが本当にとても優秀。
emmet等の入力補佐はもちろん標準完備。
ローカルサーバーがクリック一発で立ち上がる。
gitが標準の状態でショートカット一発でコミット可能。ブランチ切り替えも右下から即できる。
タスクランナーの視覚操作。
クラウドに設定を保存してインストしなおしても読み込んでこれる。
SASS等のファイル監視して書き出すなんてのもちょっと設定すればもちろんお手の物。mapも出してくれる。
ジャンプ機能が素晴らしい。ショートカット一発で書いてある場所に飛べる。
空気を読む機能がある。Alt+Enter（Option+Return）で問題点がすぐ解決できる。
おかしいところは大体指摘してくれる。
カラーピッカー等で色を直接指定できる。
画像がプレビュー確認できる。
ファイル名やcssのクラス名をリネームした場合パスや名前を全部書き換えてくれる。
一発でソースをフォーマットできる。
基本的に自動保存。
EJS等のテンプレートエンジンやWordpressとの連携がデフォでできる。
インデント等の設定が言語ごとに簡単にできる。開いたファイルも右下からすぐできる。

などなど…書き出したら無限に出てきます。
箇条書きでは伝わりきらない部分も多いと思うのでさらに一部は詳しく解説していきます。

機能をいくつか紹介

上記の箇条書きでは言葉ではわかっても実感出来ないと思うのでいくつか更に抜粋紹介します。

空気を読んでくれる機能

たとえばこちら。
あえて打ち間違いをしてみましたが、波線で「ここタイポ（打ち間違い）なんじゃね？」って教えてくれてます。
ここでAlt+Enter（Option+Return）をしてみます。

そうすると「君がしたいことってこれ？」みたいな感じでメニューを出してくれます。
今回でいうと「本当はこういうふうに打ちたかったんじゃないの？」みたいな感じや、「そもそも打ち間違いじゃないならこのプロジェクトの辞書に登録しておく？」みたいな感じです。

この機能はあらゆる場面で役に立ちますので是非堪能してみてほしい！

ジャンプ機能

ここの指定どうなんだっけ？とかここのcssの設定変えたいな〜って思ったとき、わざわざcssファイルからスクロールして探すなんて必要はありません。

一発で飛ぶことが出来ます！

たとえばこちらのクラスに飛びたい場合、カーソルをあわせてから「⌘+クリック（or bキー）」を押せば…

このように一発で飛ぶことができます！もし対象となるファイルが複数ある場合はその中から選ぶこともできます。

この手のものを人力探すというのはかなりの手間なのでめちゃくちゃ時短することができます。

コード補完

たとえばHTML上でクラスを指定したタグを作成し、cssで該当のクラスを作成する際等。

こんな感じで「.」を入れるだけで候補として出てきます！
これがかなり強力で関わりがあれば大体なんでも出してくれます。

自分で作った関数なんかも読み込んで出してくれるのでスーパー便利！

git関連

git関連も充実しています。

ローカルリポジトリをメニューから作成可能。

ウインドウの右下からブランチを一発で切り替え。
↑こんな感じで視覚的に操作可能です！

ショートカット一発（⌘+k）でコミットもできます！

gitってHTMLやCSSくらいだと面倒であまり使わなかったりしちゃうんですけど、ここまで簡単だとサっとやれちゃうので「やっておくか！」って気が出てきます！
やっぱり開発中って何事もそうなんですけど「面倒だし今は別にいいかな…」ってことは結局やらなかったりするんですよね…。
しかしこの機能のおかげで面倒くさがりな僕でも度々コミットしてます！