今日から使える!Sublime Textの使い方【初心者向け】

テキストエディタの【Sublime Text(サブライムテキスト)】の使い方を初心者向けに解説した記事です。インストール方法から、プラグインのインストール方法、ショートカットキーの設定方法までこの記事だけで基礎がわかります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

プログラミングに使えるテキストエディタはいくつかありますが、その中でも今回はSublime Text(サブライムテキスト)の使い方を初心者向けにご紹介します。Sublime TextはWindowsでもMacでも使うことが可能です。

Sublime Textのインストール方法からプラグインのインストールまであるので、基礎を覚えて使ってみてください。

 

また、日本語化に対応する場合は、パッケージを導入する必要があります。ただし、利用方法など英語メニューのまま解説されていることも多いので、英語メニューのまま使うことをおすすめします。

 

なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。

 

目次

本記事は下記の流れでご紹介します。

 

 

Sublime Textの特徴

まずは、Sublime Textの特徴を知っておきましょう。

基本とのなる特徴として3つ紹介します。

  • Mac版、Win版があり、ライセンス購入は1つでOK。さらに設定ファイルをDropboxなどで同期すれば一から環境設定をする必要がない
  • プラグインが豊富
  • 動作が軽い割にエディタとしてはほぼ完璧に近い機能を持つ

プラグインを使える拡張性があるのは嬉しいですね。

 

さらに、細かな特徴としてはこんなものもあります。

  • 入力補完が優秀
  • Chrome風のタブで表示されている
  • デフォルトのショートカットが便利
  • 拡張はpythonで記述
  • Vim、Emacsキーバインドがある

このあたりも開発していく際に役立ちそうです。

特徴が理解できたところで、早速インストールしていきましょう。

 

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

Sublime Textのインストール

今回はMacを使ってインストール方法をご紹介します。

(基本的な手順はWindowsも同じです)

 

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

Sublime Text 3

まずは、Sublime Textのサイトにアクセスします。今回はSublime Text 3のOS Xを選びます。OSによって選ぶものが異なりますのでご注意ください。

クリックするとdmgファイルのダウンロードが始まります。

 

2.dmgファイルを展開

dmgファイルを展開

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

 

3.ファイルからSublime Text.appをアプリケーションフォルダにコピー

Sublime Text.app

Macの使い方に慣れている方ならわかると思いますが、 Sublime Text.appをアプリケーションフォルダにコピーします。

 

4. Sublime Textを実行する

Sublime Textを実行

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

 

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

開く

 

これでインストールは完了です。

インストール完了

 

 

Sublime Textの基本的な使い方

使い方といっても、テキストエディタですので、コードを打ち込むだけですぐに使えます。

Sublime Text使い方

 

また、デフォルトのショートカットキーも豊富ですので、少しずつ覚えると便利です。

下記のリンクのページを開くと、元素記号表のようにショートカットキーが紹介されています。Mac版とWindows版をクリック1つで切り替えられますし、ショートカットキーをクリックすると、詳細の説明が表示されます。

Periodic table of the Keyboard Shortcuts

Sublime Text | Periodic table of the Keyboard Shortcuts.

 

 

PackageControllをインストール

ここでPackageControllをインストールしましょう。

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

 

Sublime Text 3 PackageControll

https://sublime.wbond.net/installation

Sublime Text 3 PackageControll

 

まずは上のサイトからスクリプトをコピーします。

次に、「Control+Shift+`(JISキーボードなら@キーの位置)」でConsoleを開きましょう。

Console画面に先程コピーしてきたスクリプトをペーストし、Enterキーをタイプしましょう。

Console画面

 

このような画面が表示されればOKです。ここでSublimeTextを再起動してインストールを完了させましょう。

スクリプト完了

 

日本語環境の設定

Sublime Textは海外のツールであるためメニューバーなどがすべて英語になっています。

どこに何が書いてあるか分からず作業が非効率になるという方は、Sublimetext_japanizeというものを導入することをおすすめします。

以下が日本語化にする設定方法です。

  1. C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
    C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
    にコピーします。※Defaultフォルダがない場合は作成してください。
  2. コピーしたファイルをオリジナルのファイル(.jpが付かないファイル)と置き換えます。(念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。)
  3. 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 を開く

Package Control

 

2.表示された検索窓に”Install Package”と入力

Install Package

 

3.少しロード時間を待った後に表示される検索窓に”HTML5″と入力

HTML5

この時、全てを入力しなくても補完されます。さらにHTML5と入力された状態でEnterキーを押します。

SublimeTextを再起動すればプラグインのインストールは完了です。

 

 

ショートカットキーの設定方法

最後にショートカットキーを設定します。

SublimeTextははデフォルトでも便利なショートカットキー(キーバインド)が用意されていますが、自分好みのエディタにカスタマイズするとより便利です。

 

やり方は、少し複雑ですが、基本的なルールに則って行けば難易度は高くないはずです。

注意点としては、インストールしたパッケージと設定したショートカットキーが衝突してしまうことです。割り当て時には一度確認しておくことをおすすめします。

 

まずは、Preferencesから「Key Bindings」を開きましょう。

Key Bindings

 

次に、設定をしたいショートカットキーを入力していくだけです。

ショートカットキー入力

ショートカットキー入力2

ショートカットキーは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週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なくプログラミングを学ぶことができます。