今日から使える！Sublime Textの使い方【初心者向け】
テキストエディタの【Sublime Text（サブライムテキスト）】の使い方を初心者向けに解説した記事です。インストール方法から、プラグインのインストール方法、ショートカットキーの設定方法までこの記事だけで基礎がわかります。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
プログラミングに使えるテキストエディタはいくつかありますが、その中でも今回はSublime Text（サブライムテキスト）の使い方を初心者向けにご紹介します。Sublime TextはWindowsでもMacでも使うことが可能です。
Sublime Textのインストール方法からプラグインのインストールまであるので、基礎を覚えて使ってみてください。
また、日本語化に対応する場合は、パッケージを導入する必要があります。ただし、利用方法など英語メニューのまま解説されていることも多いので、英語メニューのまま使うことをおすすめします。
なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。
目次
本記事は下記の流れでご紹介します。
- Sublime Textの特徴
- Sublime Textのインストール
- Sublime Textの基本的な使い方
- PackageControllのインストール
- プラグインのインストール方法
- ショートカットキーの設定方法
Sublime Textの特徴
まずは、Sublime Textの特徴を知っておきましょう。
基本とのなる特徴として3つ紹介します。
- Mac版、Win版があり、ライセンス購入は1つでOK。さらに設定ファイルをDropboxなどで同期すれば一から環境設定をする必要がない
- プラグインが豊富
- 動作が軽い割にエディタとしてはほぼ完璧に近い機能を持つ
プラグインを使える拡張性があるのは嬉しいですね。
さらに、細かな特徴としてはこんなものもあります。
- 入力補完が優秀
- Chrome風のタブで表示されている
- デフォルトのショートカットが便利
- 拡張はpythonで記述
- Vim、Emacsキーバインドがある
このあたりも開発していく際に役立ちそうです。
特徴が理解できたところで、早速インストールしていきましょう。
Sublime Textのインストール
今回はMacを使ってインストール方法をご紹介します。
（基本的な手順はWindowsも同じです）
1.dmgファイルをダウンロード
まずは、Sublime Textのサイトにアクセスします。今回はSublime Text 3のOS Xを選びます。OSによって選ぶものが異なりますのでご注意ください。
クリックするとdmgファイルのダウンロードが始まります。
2.dmgファイルを展開
ダウンロードしたdmgファイルをダブルクリックして展開しましょう。
3.ファイルからSublime Text.appをアプリケーションフォルダにコピー
Macの使い方に慣れている方ならわかると思いますが、 Sublime Text.appをアプリケーションフォルダにコピーします。
4. Sublime Textを実行する
コピーが完了したら、アプリケーションのフォルダからクリックして実行します。
その際、このようなウィンドウが出てくることがありますが、「開く」をクリックでOKです。
これでインストールは完了です。
Sublime Textの基本的な使い方
使い方といっても、テキストエディタですので、コードを打ち込むだけですぐに使えます。
また、デフォルトのショートカットキーも豊富ですので、少しずつ覚えると便利です。
下記のリンクのページを開くと、元素記号表のようにショートカットキーが紹介されています。Mac版とWindows版をクリック1つで切り替えられますし、ショートカットキーをクリックすると、詳細の説明が表示されます。
Sublime Text | Periodic table of the Keyboard Shortcuts.
PackageControllをインストール
ここでPackageControllをインストールしましょう。
これを入れると、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに機能を追加することができます。
Sublime Text 3 PackageControll
https://sublime.wbond.net/installation
まずは上のサイトからスクリプトをコピーします。
次に、「Ctrl(Command)＋Shift＋｀(JISキーボードなら＠キーの位置)」でConsoleを開きましょう。
Console画面に先程コピーしてきたスクリプトをペーストし、Enterキーをタイプしましょう。
このような画面が表示されればOKです。ここでSublimeTextを再起動してインストールを完了させましょう。
日本語環境の設定
Sublime Textは海外のツールであるためメニューバーなどがすべて英語になっています。
まずは、エディタ上で「Japanize」というプラグインをインストールしていきます。
エディタを開いたら「Ctrl（Command）+ Shift + p」でPackage Controlを呼び出します。
そして、「install」と入力し、「Package Control: Install Package」が選択された状態でEnterキーを押します。
続いて表示される入力画面で「Japanize」と入力し、Enterキーを押すとプラグインのインストールが始まります。
インストールが完了すると、日本語化適用の手順が表示されます。
以下が日本語化にする設定方法です。
- C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
にコピーします。※Defaultフォルダがない場合は作成してください。 - コピーしたファイルをオリジナルのファイル（.jpが付かないファイル）と置き換えます。（念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。）
- C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu（.jpが付かない方）を、C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Userにコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。
プラグインのインストール方法
特徴のところでも紹介したプラグインをインストールしていきます。
プラグインは、SublimeTextをWeb開発に使うのか、プログラム開発に使うのかなどの用途によって導入するものが変わってきます。
そんな中でも、おすすめのプラグインは下記の通りです。
- SublimeLineter：エラーチェッカー
- HTML5：HTML5のスニペット集、自動補完とハイライト
- BracketHighlighter：開始/終了タグの強調
- SublimeLinter-html-tidy：HTML5の構文チェッカー
- SublimeLinter-jshint：JavaScriptの構文チェッカー
- SublimeLinter-json：JSONの構文チェッカー
- SublimeLinter-phplint：PHPの構文チェッカー
- SublimeCodeIntel：関数・変数が定義されているところにジャンプする
- abacus：イコールやコロンなどを綺麗に揃える
- Phoenix Theme：Sublime Textの見た目をおしゃれにするテーマ。配色やデザインを自分でカスタマイズできます。
今回は例としてHTML5のプラグインをインストールをしていきましょう。
1.Preferences -> Package Control を開く
「Ctrl（Command）+ Shift + p」でもPackage Controlを開くことができるので、覚えておくと便利でしょう。
2.表示された検索窓に”Install Package”と入力
3.少しロード時間を待った後に表示される検索窓に”HTML5″と入力
この時、全てを入力しなくても補完されます。さらにHTML5と入力された状態でEnterキーを押します。
SublimeTextを再起動すればプラグインのインストールは完了です。
ショートカットキーの設定方法
最後にショートカットキーを設定します。
SublimeTextははデフォルトでも便利なショートカットキー（キーバインド）が用意されていますが、自分好みのエディタにカスタマイズするとより便利です。
やり方は、少し複雑ですが、基本的なルールに則って行けば難易度は高くないはずです。
注意点としては、インストールしたパッケージと設定したショートカットキーが衝突してしまうことです。割り当て時には一度確認しておくことをおすすめします。
まずは、Preferencesから「Key Bindings」を開きましょう。
次に、設定をしたいショートカットキーを入力していくだけです。
ショートカットキーはGoogleなどの検索エンジンで検索すればたくさん出てきますので、自分好みのキーバインドを探してみてください。
最後に設定画面を閉じて保存(Save)し、SublimeTextを再起動すれば設定は完了です。
デフォルトで用意されているショートカットキーも便利なものが多いので、覚えておくと良いでしょう。
| Mac | Windows | 動作 |
| command+c | ctrl+c | コピー |
| command+r | ctrl+r | 関数,id,classの検索 |
| command+/ | ctrl+/ | コメントアウト |
| command+d | ctrl+d | 選択した文字列と同じものを検索 |
| command+option+2 | ctrl+alt+2 | 画面を縦に2分割 |
| command+ctrl+↑ | ctrl+shift+↑ | 行を1行上に移動 |
| command+ctrl+↓ | ctrl+shift+↓ | 行を1行下に移動 |
今回の記事は以上です。
他の開発環境の構築を使いたい場合は、XAMPPをインストールする方法も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なくプログラミングを学ぶことができます。
また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
