皆さんはプログラムを書くとき、どのエディタを使っていますか？
エディタの使いやすさによってコーディングの作業効率も大きく変わってきますよね。
ちなみにとうふは、PhpStorm（ピーエイチピーストーム）を使っています。
Jetbrains社製のPHP用の統合開発環境（IDE）です。
公式サイトは英語なので、日本の公式代理店サイトをみると分かりやすいと思います。
詳しい説明は今回は省きますが、
ってくらい超便利で高機能です。作業が捗りまくります。
有料ソフトですが、無料で30日間お試しで使うこともできます。
購入を考えている方はコチラから購入へ進むと、最大1000円の割引が適用されますのでお使いください。
話が少し逸れましたが、今回はそんなPhpStormで「ブラウザでリアルタイムプレビューしながら、コーディングする方法とその設定手順」を解説していきます！
超簡単ですので、未設定の方はぜひ試して見てください♪
目次
ライブプレビューで出来ること
まずは、実際にライブプレビューを使っている様子を見てみましょう。
PhpStormでリアルタイムプレビューしながらコーディング可能な言語は下記です。
見た目を確認しながらコードを書きたいときにはとても便利な機能ですね！
- HTML
- CSS
- JavaScript
設定手順
まずは必要なプラグインと拡張機能をインストールします。
とても簡単なので、一瞬で終わります。
公式のヘルプはコチラです。
01. PhpStormにLiveEditをインストール
まずはPhpStormにライブプレビュー用のプラグイン「LiveEdit」をインストールします。
① 「PhpStorm → Preferences…」で設定を開きます。
（ショートカットキーは「⌘ + ,」）
② 「Plugins」を選択し、下の方にある「Install JetBrains plugin…」をクリックします。
③ プラグインダウンロード用のウィンドウが開きます。
検索で「LiveEdit」を探して、インストールしましょう。
02. ブラウザの拡張機能をインストール
「JetBrains IDE Support」という拡張機能をブラウザにインストールします。
コチラからインストール可能です。（Chrome）
03. PhpStormの設定
最後に、PhpStormでライブプレビューするための設定を行います。
① まず、プラグインを読み込ませるために、PhpStormを再起動して下さい。
② PhpStormの設定を開き、「Build, Execution, Deploymetnt → Debugger → Live Edit」を選択します。
（Live Editが表示されない場合は、プラグインがインストールされていないか、読み込めていません。
正しくインストールできているか、再起動し直したかを確認して下さい。）
③ 画像の通りにチェックと選択を変更します。
設定の意味については、公式ヘルプをご覧ください。
04. ライブプレビューを使ってみる
では、実際にライブプレビューしてコードを書いてみましょう！
まずは、プレビューしたいファイルをPhpStormで開きます。
ファイルを右クリックし「Debug “index.html(ファイル名)”」を選択すると、ブラウザでファイルが開きます。
（ショートカットキーは「Ctrl + Shift + D」）
開いたブラウザには「このブラウザはJetBrains IDE Supportによりデバッグされています」と表示されます。
さいごに
いかがでしたでしょうか？
公式ヘルプは翻訳がおかしいところもあり、分かりづらいので参考になれば幸いです！
今回はHTMLやCSSが対象でしたが、PhpStormはPHP開発を爆速にしてくれる超優秀なソフトです。
他にもたくさんの便利な機能があるので、またの機会の紹介できたらと思います。
