このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

どんなテキストエディターが利用できるか

この記事ではウェブ開発向けのテキストエディターをインストールする際に考慮すべき点をいくつか取り上げます。

前提知識: ウェブサイトを構築するために必要な各種ソフトウェアについて理解していること。
目標: ウェブ開発者のニーズに合った、最適なテキストエディターの選び方を学びます。

概要

ウェブサイトは、ほとんどテキストファイルで構成されています。その開発を容易で快適なものにするため、最適なテキストエディターを選びましょう。

テキストエディターは、コンピューター科学にとって基本的なものです(ウェブ開発はコンピューター科学そのものですよね)。そのため、膨大な選択肢があります。理想を言えば、できるだけ多くのエディターを試して、ワークフローに適したものを見つけるのが良いです。とは言っても、取っ掛かりをつけるため、いくつかの指針をあげることにします。

まず以下の点を検討しましょう。

  • どの OS (オペレーティングシステム) を使用するか?
  • どのような技術を扱うのか?
  • テキストエディターに、どのような基本機能を求めるか?
  • テキストエディターの機能を拡張したいか?
  • テキストエディターを使用している間、サポートやヘルプが必要か?
  • テキストエディターの使い勝手は重要か?

ここまでで価格に言及していないことに注目してください。明らかにそれも重要ですが、製品価格は、その品質や機能とはあまり関係ありません。使いやすいテキストエディターを無料で手に入れることも可能なのです。

人気のあるエディターの例を挙げてみましょう。

エディター ライセンス 価格 OS サポート ドキュメント 機能拡張
Bluefish GPL 3 無料 Windows, Mac, Linux メーリングリスト, wiki オンラインマニュアル あり
Brackets MIT/BSD 無料 Windows, Mac, Linux IRC GitHub Wiki あり
Nova クローズドソース $99 Mac Twitter, フォーラム, オンライン eBook あり
CodeLobster クローズドソース 無料 Windows, Mac, Linux フォーラム, メール オンラインマニュアル あり
Emacs GPL 3 無料 Windows, Mac, Linux FAQ, メーリングリスト, News Group オンラインマニュアル あり
Espresso クローズドソース $99 Mac E-mail オンラインマニュアル あり
Gedit GPL 無料 Windows, Mac, Linux Discourse, IRC オンラインマニュアル あり
Kate LGPL, GPL 無料 Windows, Mac, Linux メーリングリスト, IRC オンラインマニュアル あり
Notepad++ GPL 無料 Windows Forum オンラインマニュアル あり
PSPad クローズドソース 無料 Windows FAQ, フォーラム オンラインヘルプ あり
Sublime Text クローズドソース $70 Windows, Mac, Linux Forum Official, Unofficial あり
TextMate クローズドソース $50 Mac Twitter, IRC, メーリングリスト, E-mail オンラインマニュアル あり
BBEdit クローズドソース 無料 Mac FAQ オンラインマニュアル なし
Vim 固有のオープンライセンス 無料 Windows, Mac, Linux メーリングリスト オンラインマニュアル あり
Visual Studio Code オープンソース (MIT license) / 製品固有のライセンス 無料 Windows, Mac, Linux FAQ ドキュメント あり

アクティブラーニング

このアクティブラーニングのコーナーでは、あなたが選択したエディターを使用したりインストールしたりすることを試していただきたいと思います。あなたのコンピューターには、上記で提案したエディターが既にインストールされているかもしれません(例: GNOME デスクトップを使用している場合は Gedit、KDE を使用している場合は Kate など)が、そうでなければ、あなたが選んだ一つまたは複数のテキストエディターを使用してみてください。

お使いのエディターの設定を掘り下げ、マニュアルや文書を読んで、その機能を確認してみてください。特に(エディターで可能であれば)、以下のことを試してみてください。

  • 構文ハイライト表示の設定や色の変更
  • インデントの幅をいじって、ニーズに合わせて適切な設定にする。
  • 自動保存とセッション保存の設定を確認する
  • 何らかの利用できるプラグインを設定し、新しいプラグインの入手方法を調査する
  • カラースキームの変更
  • ビューの設定を調整し、ビューのレイアウトを変更する方法を確認する
  • エディターが対応しているプログラミング言語/技術を確認する

学習中は、ほとんどのテキストエディターの設定については既定値を使用しても問題ありませんが、選択したツールに精通することが重要であり、自分の使用目的に最適なものを選択することができるようになります。エディターやツールのカスタマイズについては、経験を積むことでより深く理解できるようになりますし、より重要なのは、どの機能が自分の目的にとってより有用であるかを知ることです。

より深く掘り下げる

選択基準

それでは、テキストエディターを選ぶとき何を考慮すべきでしょうか?

どの OS (オペレーティングシステム) を使用するか

もちろん、あなたの自由です。しかし、エディターの中には特定の OS でしか利用できないものもあるので、もしあなたが行ったり来たりするのが好きなら、選択肢が限られてしまいます。あなたのシステムで動作するのであれば、どんなエディターでも仕事を取得することができますが、クロスプラットフォームのエディターであれば、 OS から OS への移行が容易になります。

そのため、最初に使用する OS を探し、指定されたエディターが対応しているかどうかを調べます。ほとんどのエディターはウェブサイトで Windows と Mac のどちらに対応しているかを明記していますが、特定のバージョンにしか対応していないエディターもあります。 Ubuntu を実行している場合は、 Ubuntu Software Center で検索するのが最善の方法です。もちろん一般的に、 Linux/UNIX の世界はかなり多様で、さまざまなディストリビューションが互換性のない異なるパッケージングシステムで作業しています。つまり、あなたが無名のエディターに心を定めた場合、自分でソースからコンパイルする必要があるかもしれないということです(気の弱い人には向きません)。

どのような技術を操りたいのか

一般論を言えば、テキストエディターなら、どんなテキストファイルでも開くことができます。自分のメモ書き程度なら、それで十分です。しかし、ウェブ開発を行い、HTMLCSSJavaScript を使ったりすると、ファイルはかなり大きくて複雑なものになります。ウェブで扱う技術情報に基づいテキストエディターを選択して、作業を簡単にしましょう。多くのテキストエディターには次のような支援機能があります。

  • 構文ハイライト。使用する技術のキーワードを着色表示することで、ファイルが読みやすくなります。
  • コードの補完。よく出てくる構造を自動的に補完して、入力を手助けしてくれます(例えば、 HTML のタグを自動的に閉じたり、正しい CSS 属性の候補を挙げるなど)。
  • コードスニペット。新しい HTML 文書を作り始めるときに見られたように、多くの技術は同じ文書構造を何度も使用します。コードスニペットを文書にあらかじめ記入しておくことで、すべてを入力し直す手間を省くことができます。

構文ハイライトはほとんどのテキストエディターが対応していますが、他の 2 つの機能はまだのものが多いのが現状です。使用する予定のテキストエディターが、 HTMLCSS、それに JavaScript をハイライトできるか確認しておきましょう。

テキストエディターにどのような基本機能を求めるか

ニーズと計画によりますが、以下の機能は多くの場合に有用です。

  • 文字列の検索と置換。単一ファイル、あるいは複数ファイルにわたって実行できるとよい。検索には正規表現、必要なら他のパターンを使う。
  • 指定した行へ移動する。
  • 大きなファイルの離れた場所を、画面を分割して表示する。
  • HTML をブラウザー上で見えるように表示する。
  • 散在する文字列を同時に選択する。
  • プロジェクトファイルとディレクトリーを表示する。
  • 自動整形機能で、コードを読みやすくする。
  • 英文などのスペルチェックを行う。
  • インデント設定に基づきコードを自動インデントする。

テキストエディターの機能を拡張したいか

拡張型のテキストエディターは、標準で組み込まれた機能こそ少ないが、必要に応じて機能を拡張することができます。

どのような機能が必要かわからない場合、またはお気に入りのエディターにそのような機能がない場合、拡張可能なエディターを探してみてください。最高のエディターは多くのプラグインを提供しており、新しいプラグインを自動的に探してインストールする方法が理想的です。

もしあなたが豊富な機能が好きで、プラグインのためにエディターの動作が遅くなりがちなら、 IDE (統合開発環境)を使用してみてください。 IDE は 1 つのインターフェイスで多くのツールを提供し、初心者には少し大変ですが、エディターの制限が多いと感じるなら常にオプションです。人気のある IDE をいくつか紹介します。

テキストエディターを使用している間、サポートやヘルプが必要か

テキストエディターの場合、 2 種類の対応をしているかどうかを確認しましょう。

  • ユーザー向けのコンテンツ(FAQ、マニュアル、オンラインヘルプなど)
  • 開発者や他のユーザーとのディスカッション(フォーラム、メール、チャットなど)

エディターの使用方法を学ぶときは、書かれているドキュメントを使用しましょう。エディターをインストールしたり使用したりする際にトラブルシューティングが発生した場合は、他のユーザーと連絡を取りましょう。

テキストエディターの使い勝手は重要か

たしかに、好みの問題かもしれません。いっぽうでは、表示色やボタンの位置など、 UI (ユーザーインターフェイス)のそこかしこをカスタマイズしたがる人もいます。変更可能な範囲はエディターごとに異なるので、導入前に調べておきましょう。色遣いを変えられるエディターは多くあります。しかし、カスタマイズしたいことがあまり多いようなら、統合開発環境を選んだ方が賢明です。

インストールとセットアップ

テキストエディターのインストールは、非常に分かりやすいのが普通です。その方法はプラットフォーム(OS)によって変わりますが、それほど難しいものではありません。:

  • Windows: インストールファイルは通常、 .exe.msi の実行可能ファイルとして提供されます。また、圧縮ファイル(.zip.7z.rar など)として提供されることもあります。その場合は、解凍するソフトウエアが別途必要になりますが、.zip ファイルの解凍ソフトは Windows に標準で付属してきます。
  • Mac: エディターのウェブサイトから、 .dmg ファイルをダウンロードします。 Apple Store から簡単にインストールできるエディターもあります。
  • Linux: 主要なディストリビューションについては、グラフィカルインターフェイスのあるパッケージマネージャー(Ubuntu ソフトウエアセンター、mintInstall、GNOME Software、 &c など)からインストールできます。また、パッケージ化された .deb.rpm ファイルとして入手できることもできます。リポジトリーサーバーからインストールすることも多いし、最悪の場合ソースコードを自分でコンパイルしなければならないこともあります。テキストエディターのウェブサイトにあるインストール手順の説明を、じっくり調べることをお勧めします。

新しいエディターをインストールしても、**ファイルの関連付け**を変更するまで、 OS は既定のエディターでテキストファイルを開き続けるでしょう。これは、あなたがファイルをダブルクリックしたときに、 OS があなたの好みのエディターで開くように設定するのに役立ちます。

次のステップ

良いテキストエディターが見つかったら、基本的な作業環境(テストサーバー)の構築に着手しましょう。あるいは、最初のウェブページを書いてみるのもいいでしょう。