今日から使える！Sublime Textの使い方【初心者向け】
テキストエディタの【Sublime Text（サブライムテキスト）】の使い方を初心者向けに解説した記事です。インストール方法から、プラグインのインストール方法、ショートカットキーの設定方法までこの記事だけで基礎がわかります。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
プログラミングに使えるテキストエディタはいくつかありますが、その中でも今回はSublime Text（サブライムテキスト）の使い方をテックアカデミーのメンター（現役エンジニア）が初心者向けにご紹介します。
Sublime TextはWindowsでもMacでも使うことが可能です。
Sublime Textのインストール方法からプラグインのインストールまであるので、基礎を覚えて使ってみてください。
また、日本語化に対応する場合は、パッケージを導入する必要があります。
ただし、利用方法など英語メニューのまま解説されていることも多いので、英語メニューのまま使うことをおすすめします。
目次
本記事は下記の流れで説明します。
- Sublime Textの特徴
- Sublime Textのインストール
- Sublime Textの基本的な使い方
- Package Controlのインストール
- プラグインのインストール方法
- ショートカットキーの設定方法
Sublime Textの特徴
まずは、Sublime Textの特徴を知っておきましょう。
基本となる特徴として3つ紹介します。
- Mac版、Windows版があり、ライセンス購入は1つでOK。さらに設定ファイルをDropboxなどで同期すれば一から環境設定をする必要がない
- プラグインが豊富
- 動作が軽い割にエディタとしてはほぼ完璧に近い機能を持つ
プラグインを使える拡張性があるのは嬉しいですね。
さらに、細かな特徴としてはこんなものもあります。
- 入力補完が優秀
- Chrome風のタブで表示されている
- デフォルトのショートカットが便利
- 拡張はPythonで記述
- Vim、Emacsキーバインドがある
このあたりも開発していく際に役立ちそうです。
特徴が理解できたところで、さっそくインストールしていきましょう。
Sublime Textのインストール
今回はMacを使ってインストール方法をご紹介します。
（基本的な手順はWindowsも同じです）
1.dmgファイルをダウンロード
まずは、Sublime Textのサイトにアクセスします。
赤枠の部分にOSごとのダウンロードリンクが存在します。
今回は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つで切り替えられますし、ショートカットキーをクリックすると、詳細の説明が表示されます。
Installation – Package Control
Package Controlのインストール
ここでPackage Controlをインストールしましょう。
これを入れると、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに追加することができます。
Sublime Text 3 Package Control
Installation – Package Control
Command PaletteからPackage Controlをインストールする
OSに応じてそれぞれ次のキーを入力してください。
WindowsかLinuxの場合
ctrl+shift+p
Macの場合
cmd+shift+p
次のコマンドを入力してEnterを押すとPackage Controlのインストールが完了します。
Install Package Control
MenuからPackage Controlをインストールする
- Tools menuを選択してください
- Install Package Control… を選択するとPackage Controlのインストールが完了します
日本語環境の設定
Sublime Textは海外のツールであるためメニューバーなどがすべて英語になっています。
まずは、エディタ上で「Japanize」というプラグインをインストールしていきます。
エディタを開いたら「Ctrl（Command）+ Shift + p」でPackage Controlを呼び出します。
そして、「install」と入力し、「Package Control: Install Package」が選択された状態でEnterキーを押します。
つづいて表示される入力画面で「Japanize」と入力し、Enterキーを押すとプラグインのインストールが始まります。
インストールが完了すると、日本語化適用の手順が表示されます。
以下が日本語化する設定方法です。
C:Usersユーザー名AppDataRoamingSublime Text 3PackagesJapanizeにインストールされている*.jpファイルを、C:Usersユーザー名AppDataRoamingSublime Text 3PackagesDefault にコピーします。※Defaultフォルダがない場合は作成してください。
コピーしたファイルをオリジナルのファイル（.jpが付かないファイル）と置き換えます。（念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。）
C:Usersユーザー名AppDataRoamingSublime Text 3PackagesJapanizeMain.sublime-menu（.jpが付かない方）を、C:Usersユーザー名AppDataRoamingSublime Text 3PackagesUserにコピーします。
すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。
プラグインのインストール方法
特徴のところでも紹介したプラグインをインストールしていきます。
プラグインは、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をインストールする方法も合わせてご覧ください。
監修してくれたメンター
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長開発実績：事業会社向け新規事業SNS構築・Shopify海外進出ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用した画像解析、店舗検索スマホアプリ開発、不動産賃貸・売買事業者様向けWEBシステム、政府系金融機関向けVue.jsによるフロントエンド開発、など。ボランティアでプログラミング学校を運営し、中学生がノーコードチャットアプリリリース、小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞など実績多数。 |
[お知らせ]テックアカデミーでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なくプログラミングを学ぶことができます。
また、現役エンジニアから学べる無料のプログラミング体験も実施しているので、ぜひ参加してみてください。
