【今すぐ使える】おすすめのテキストエディタとインストール方法

こんにちは。サイバーブリッジの久保田です。

今回は、web制作の際に必要なテキストエディタの紹介と、インストール方法を画像を交えてご説明します！

テキストエディタは機能や特徴が様々で、無料・有料合わせるとかなりの数があるので、web制作初心者さんだとインストール前から「結局どれがいいのかわからない！」となってしまうと思います。

なので、実際に私がweb制作を始めた頃に使ってみて「使いやすいな」と思ったものをご紹介します♪

Sublime Text (無料)

「恋に落ちるテキストエディタ」として有名なSublime Textサブライム テキスト。
オーストラリアのJon Skinnerによって開発され、動作の軽さ、拡張性の高さで世界中のweb制作者が愛用。

2013年にリリースされたバージョン3(SublimeText 3)以降は、web制作の現場だけでなく、多くのエンジニアに愛用されるようになり、現在もなお絶大な支持を得ています。

　Sublime Textの特徴　

• とにかく軽い！
• プラグインが多く拡張性の高さはピカイチ！
• 豊富なショートカットで作業スピードをアップできる
• 無料なのに有料並みの優秀さ
• MacOS / Windows / Linux に対応
• 自動保存してくれる
• 日本語化対応

Sublime Textのインストール方法

SublimeTextは公式サイトからダウンロードすることができます。

対象となるプラットフォームはMacOS､Windows、Linuxですが、今回はMacを使ってのインストール方法をご紹介します。
※基本的な手順はWindowsも同じです！

1.ファイルをダウンロード

こちらの公式サイトにアクセスして、「Download」ボタンをクリックします。

対象のOSを選択し、クリックするとdmgファイルのダウンロードが始まります。
今回はMacを使ってのインストールなので、OS Xを選びます。

2.dmgファイルを展開

ダウンロードしたdmgファイルをダブルクリックして展開しましょう。

3.Sublime Textを実行

ダブルクリックして展開すると⬇︎のような画面が表示されるので、「SublimeText.app」をドラッグアンドドロップで「Applications」にコピーします。

コピーが完了したら、アプリケーションフォルダから「SublimeText.app」クリックして実行します。

その際⬇︎ようなウィンドウが出てくることがありますが、「開く」をクリックでOKです。

英語の文章が出てきますが、閉じてしまって大丈夫です。

これでインストールの完了です。
Sublime TextのアイコンをドラッグアンドドロップでDockに追加するなどしてお使いください。

4.PackageControllをインストール

せっかくなので、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに機能を追加することができるPackageControllをついでにインストールしましょう。

まずは、こちらのSublime Text 3 PackageControllにアクセスして、スクリプトをコピーします。

5.Show Consoleに貼り付ける

Sublime Textを起動し、上部メニューの「View」を開き「Show Console」をクリックします。

するとエディタの下に白い入力ボックスが現れます。
※画像のように白いボックスと文字が現れないときは「Sublime Text」を再起動して再び「Show Console」をしましょう。

白いボックスの下にある入力欄に、先ほどコピーしたコードを貼り付けます。
貼り付けたら「Enterキー」を押しましょう。Package Controlのインストールが開始されます。

6.インストールが成功しているか確認

上部メニューの「Sublime Text」を開き「Preferences」の中に「Package Control」があればOKです。

これでインストールは無事完了です。
拡張機能（パッケージ）のインストール方法は後日改めてご紹介しますね！

Atom (無料)

Atomアトムはソフトウェア開発のためのウェブサービス「GitHub」で開発され、2015年6月に正式バージョン1.0.0がリリースされたばかりの比較的新しいオープンソースのテキストエディタです。

多くのプログラミング言語にも対応しており、Sublime Texに並び多くのweb制作者やエンジニアに愛用されている人気のエディタです。

　Atomの特徴　

• デフォルトで様々な言語のシンタックスハイライトに対応
• GitHubとの連携が可能
• 拡張性が高くパッケージの数は数千！
• オープンソースのテキストエディタなので今後の機能拡大が期待できる
• MacOS / Windows / Linux に対応
• 日本語対応

Atomのインストール方法

Atomは公式サイトからダウンロードすることができます。

インストールの手順は「Sublime Text」とほとんど変わりませんが、同じように画像付きで紹介します！

1.ファイルのダウンロード

こちらの公式サイトにアクセスして、「Download」ボタンをクリックします。

2.zipファイルを解凍

ダウンロードしたzipファイルをダブルクリックで解凍しましょう。

3.Atomを実行

「Atom.app」をドラッグアンドドロップで「アプリケーション」にコピーします。

コピーが完了したら、アプリケーションのフォルダからクリックして実行します。

その際⬇︎ようなウィンドウが出てくることがありますが、「開く」をクリックでOKです。

これでインストールの完了です。
AtomのアイコンをドラッグアンドドロップでDockに追加するなどしてお使いください。

日本語対応方法や拡張機能（パッケージ）のインストール方法は後日改めてご紹介しますね！