動的Webサイトが当たり前になりつつある世の中

数多くの人が活用し楽しんでいるインターネット。

数々のWebサイトやWebページ、Webアプリケーションが存在していますが、現代では「動的なWebサイト」が一般的で当たり前のものになってきました。

動的なWebサイトは、その名の通り「動き」や「変化」のあるWebサイトのこと。

アカウント・ユーザーごとに異なる内容を表示したり、掲示板やチャットサイトのように、書き込みに応じて表示内容が増えていくようなサイトのことなどを指します。

また、スタイリッシュな見た目やアニメーション、様々な機能を盛り込むことができるため、近代的なWebサイトで動的なページを用意している所は非常に多いです。


動的なWebサイト・ページを作るために必要となるプログラミング

こういった動的なWebページを作るために使用する言語は、従来の静的Webページ作りに使われていたHTML・CSSだけではありません。

「JavaScript」や「PHP」、「Ruby」といったプログラミング言語を用いる必要があります。

一般的に「Webプログラミング」と呼ばれている分野です。

そんなWebプログラミングを行う上で役に立つのが「統合開発環境」です。

JavaであればIntelliJ IDEAやEclipse、SwiftであればXcodeといったように、各言語ごとに代表的な統合開発環境が存在しています。

Webプログラミングで世界中で親しまれているJavaScriptは、IntlliJ IDEAやEclipseで利用することができます。


JavaScriptの統合開発環境（IDE）

今回は「JavaScriptの統合開発環境」である「WebStorm」をチェックしていきます。

JavaScriptは、先ほど挙げたIDEを利用されることも多いですが、実はJavaScriptに特化している統合開発環境があることをご存知でしょうか。

それが今回注目するWebStormという統合開発環境です。

その名の通り、JavaScriptはもちろんHTMLやCSSのコーディングにも強い「Web開発」に重きを置いたIDEになっています。

今回の記事ではWebStormに注目し、使用方法から特徴、メリット、PhpStormなどとの違いについて解説していきます。

また、気になるライセンス料金についてもまとめました。


WebStormを導入してWeb開発を行うメリット

まず最初に頭に入れておきたいのがWebStormは有料の統合開発環境だということ。

現在、フリーで提供されている高機能・便利・使いやすい統合開発環境は全く珍しいものではありません。

そんなITの世界において、敢えて無料のものではなく有料のWebStormを選ぶのには、何か明確なメリットがあることが予想できるでしょう。

事実、WebStormを導入することによるメリットが確かにあります。

まずはその観点からWebStormに注目していきましょう。


コードの編集履歴が保存されている

WebStormは、コードの編集履歴が保存されています。

そのため、古い状態に戻したくなった際にはスムーズに戻すことが可能です。

編集履歴の確認の仕方も簡単で、「Local History」から「Show History」をクリックするだけ。

ファイルごとに更新履歴が残っており、戻したいファイルを選択して「Revert」を選択すれば戻せます。

更新差分のチェックもできるためどこを編集したのかを簡単に見つけたりチェックすることが可能です。


コードの自動整形・リファクタリング

WebStormではコードフォーマットを選択できます。

JavaScriptとしてフォーマットを指定すれば、インデントや記述揺れをWebStorm側が自動で修正・整形してくれるため可読性が高くなります。

もちろんJavaScriptのみならず、HTML・CSSにも対応。

また、リファクタリングを自動でしてくれる機能を備えています。

プログラミングなどのソースコードは、本人が読めても他人からは読みづらいコードになってしまいがちです。

WebStormのコード自動整形機能を利用すれば、誰が見ても読みやすいコードを書けるでしょう。

可読性の向上により、よりスムーズに開発に取り組むことができるほか、メンテナンスもしやすくなるため運用・保守という観点にもメリットをもたらします。


多くの機能を「WebStorm単体で」利用できる

WebStormを利用する最大のメリットは、数多くの機能をWebStorm単体で利用できるということでしょう。

まさに「統合開発環境」に相応しく、タスクランナーやVagrantのログの確認、CLIの操作、Git（GitHub）との連携など、WebStorm単体で様々なことができます。

どれもWeb開発に役に立ち、開発の効率を上げることができるでしょう。


WebStormの持つ特徴

WebStormは、他にも多くの機能や特徴を持っています。


他のJetBrains製IDEと操作性がほぼ同じ

WebStormは、IntelliJ IDEAなどで有名なJetBrains社が開発・リリースしているIDEです。

WebStormを含め、基本的にどのIDEもベースになっているのはIntelliJ IDEAになります。

そのため、WebStormに触るのは初めてという方であっても他のJetBrains製IDEを触ったことがあれば違和感なく扱うことができるでしょう。

操作性やインターフェースなどが似通っているため、特に意識せずとも自然と使えるようになっていくはずです。


最後に編集した行に移動できる

コーディングの最中、操作を誤ってテキストカーソルを全く違う行に動かしてしまったという経験がある方は少なくないでしょう。

また、何か別のファイルをチェックするなど他の操作を行っているうちに「どこを編集していたのか」を忘れてしまったり、探し出すのが面倒なケースは少なくありません。

WebStormには最後に編集した行に移動するショートカットキーが用意されています。

  • Windows：Ctrl ＋ Shift ＋ Backspace
  • Mac：Command + Shift + Delete

元の編集位置に即座に戻ることができるため、作業の再開が速やかに行えます。

非常に地味な機能ではありますが、エンジニアの方であれば同時に凄く便利だと感じる機能でしょう。


コードのエラーをリアルタイムに検知してくれる

プログラミングをしていて避けることができないのが、エラー。

エラーを起こさないことは非常に難しいので、いかにエラーに気が付けるか（発見できるか）が重要だといえます。

WebStormは、コーディング中にリアルタイムでエラーを検知してくれます。

コードが常に解析されており、タイピング直後にエラーがあれば反応・検知し、教えてくれるのでエラーを見逃しにくいのです。


WebStormのライセンス料金をチェック

さて、ここまでWebStormを導入するメリットや特徴について解説してきました。

WebStormが非常に魅力的な統合開発環境であるということが分かったのではないでしょうか。

続いてはWebStormの気になるライセンス料金を紹介いたします。


買い切りではない

ライセンス料金をチェックする前に頭に入れておきたいポイントが買い切りではないということ。

一度料金を支払えば良いというわけではなく、年間もしくは月間「○○円」といった形で料金が発生するので注意が必要です。

また、個人向けのパーソナルライセンス、および法人向けのコマーシャルライセンスのライトとレギュラーが存在しています。

個人と法人向け、1つずつチェックしてみましょう。


個人で利用される方はパーソナルライセンス


個人向けのライセンスとして展開されているのが「パーソナルライセンス」です。

料金が法人向けと比較すると圧倒的に割安であるため、個人でも気軽に契約しやすいといえるでしょう。

料金は、新規1年目が「6,800円」。

継続2年目が「5,400円」。

そして継続3年目以降が「4,100円」となっています。

継続するたびにライセンス料が安くなっていくということが分かります。

また、月額払いの場合は「680円」です。


法人向けのライセンス

法人向けも個人ライセンス同様に、年間払い・月額払いの2つの選択肢が用意されています。


年間ライセンスの料金

年間で支払う場合の料金は、新規1年目が「14,900円」。

継続2年目が「11,900円」。

そして継続3年目以降が「8,900円」です。

法人向けも同様に、継続を続けるたびにライセンス料が割引されていきます。


月払いの料金

月払いを選択する場合の料金は「1,490円」です。

個人同様、年間ライセンスは「月額と比較すると2ヶ月分安く利用できる」ことが分かりますね。


無料のお試しライセンス

製品自体は有料ライセンスが必要なWebStorm。

しかし、30日間であれば試用ライセンスとして、無料で利用することができます。

WebStrom : JetBrains

上記公式サイトの「DOWNLOAD」ボタンからダウンロード・インストールを行えば、無料で30日間利用できます。

無料のIDEが数多くリリースされている中、WebStormに興味があっても「いきなりお金を払うのは…」と躊躇うのは当然です。

ぜひ、まずは30日間お試しで利用してみてはいかがでしょうか。


他のIDEやエディタとの違いを比較！

さて、WebStormと近しい関係にあるともいえるIDEやエディタが幾つか存在しています。

今回はその中でも、特に有名で多くのエンジニアから親しまれている「PhpStorm」および、「VSCode」こと「Visual Studio Code」と比較してみました。

1つずつチェックしていきましょう。


PhpStormは同じJetBrains社製のIDE

PhpStormはWebStormと同じくJetBrains社製のIDEです。

名前の通り「PHP」に対応しているIDEです。

ここで注意したいのがPhpStormにはWebStormの全機能が含まれているというポイント。

つまり言い方を変えれば、WebStormにPHPを追加した統合開発環境（IDE）ということになります。

PHPに対応していないWebStromをPHPに対応させたものだと表現できるかもしれません。

こちらも操作性やインターフェースなど似通っている部分が多いため、WebStormユーザーがPhpStormに移行するとなってもすんなりとできるでしょう。


VSCodeはMicrosoftがリリースする「エディタ」である

VSCodeこと、Visual Studio Codeも有名な製品です。

ただしWebStormはIDEなのに対して、VSCodeは「エディタ」です。

つまりコードを書くこと（コーディング）に特化している製品だといえます。

様々な機能を盛り込んでいるWebStormと比較すると、搭載している機能は少なめ。

その代わり軽量で、VSCodeは特に「文字列の置換処理」が他のエディタと比較しても圧倒的に高速で行えるという強みを持っています。


参考：JavaScriptに対応している他のIDE

WebStorm以外にも、JavaScriptに対応している統合開発環境は他にも多数存在しています。

  • Aptana Studio
  • Komodo IDE
  • NetBeans
  • Adobe Dreamweaver
  • Spket IDE
  • 他多数

参考までに、他のIDEも少し触れてみるのも選択肢の1つです。

WebStormは買い切りではなくライセンス制で、一定期間ごとに料金が発生します。

そのため、他に乗り換えたいと思える無料IDEがあれば、そちらに移行した方がコスト面では賢いといえるからです。


WebStormは最強のJavaScript用IDEである

今回の記事ではJavaScriptに特化した、Web開発用統合開発環境である「WebStorm 」に注目してきました。

WebStormには、今回の記事では触れていない機能がまだまだ豊富に用意されています。

どの機能も便利で、Web開発において必ず役に立つ機能ばかりです。

そういった意味で、WebStormはWebエンジニアの方であれば一度は試してみたいIDEだといえるでしょう。

製品自体は有料ですが、30日間であれば無料で利用することが可能です。

躊躇わずに試してみてはいかがでしょうか。

効率よくWeb開発を行なえる可能性が眠っています。