今日から使える！Sublime Textの使い方【初心者向け】
テキストエディタの【Sublime Text（サブライムテキスト）】の使い方を初心者向けに解説した記事です。インストール方法から、プラグインのインストール方法、ショートカットキーの設定方法までこの記事だけで基礎がわかります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
プログラミングに使えるテキストエディタはいくつかありますが、その中でも今回は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
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料体験
に参加してみませんか？
初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービス
が
すべて無料で体験
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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入賞など実績多数。 |
[お知らせ]テックアカデミーでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なくプログラミングを学ぶことができます。
また、現役エンジニアから学べる無料のプログラミング体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
