ダウンロードから設定まで詳細解説!読めばわかるSublime Textの使い方

プログラミングを始めようとしたけど、エディタの候補が多くてどのエディタにしようか迷っていませんか?エディタには多くの種類があり、「スタマイズが簡単、動作が軽い」などエディタごとに特徴があります。

本記事では、これからプログラミングを始めようとしている方に特にオススメなSublime Textというエディタをご紹介します!
本記事を読めば、Sublime Textのダウンロードから設定までできるようになります。記事を読んですぐプログラミングの学習に取りかかリましょう!

TECH::NOTE(テックノート)は、未経験から最先端のテクノロジー人材へTECH::CAMP(テックキャンプ)、10週間でエンジニア転職実現までサポートを行う(転職できなかったら全額返金)TECH::EXPERT(テックエキスパート)、これらのサービスを運営する株式会社divのオウンドメディアです。

アイキャッチ画像出典:Sublime Text

Sublime Textについて

まずは、Sublime Textについて説明します。そのあとでSublime Textのダウンロードまでを行いましょう!

Sublime Textとは

Sublime Textは、洗練されたインターフェースや充実したカスタマイズ性が特徴のテキストエディタです。

あまりの使いやすさから、恋に落ちるエディタとも呼ばれています。カスタマイズをすることで、エディタに便利な機能を追加できます。また、テーマを変更することでエディタの見た目も変更できます。

Sublime Textのアイキャッチ画像

Sublime Textを使用するメリット

Sublime Textには、以下のようなメリットがあります。

  • MacやWindows、LinuxのOSに対応
  • 動作が軽い
  • カスタマイズ性が高い
  • ファイルの検索が簡単
  • 画面を分割してファイルの編集ができる

Sublime Text3のダウンロード

Sublime Text3をご自分のPCで使用するには、Sublime Text3をダウンロードする必要があります。以下のリンクからSublime Text3のページに移動し、ダウンロードしましょう。

Sublime Text3

Sublime Text3のダウンロードページに移動したら、以下の画像を参考にご自分のPCの環境と同じものを選択し、Sublime Text3をダウンロードしましょう。

Sublime Textをダウンロードする

Sublime Text3のダウンロードが終了したら、Finderでダウンロードされたファイルをダブルクリックしましょう。

Sublime Textのdmgファイルを開く

dmgファイルをダブルクリックすると、Sublime Text3のアプリが以下の画像のように表示されます。このSublime Text3のアプリをApplicationsフォルダにドラッグ&ドロップして移動しておきましょうSublime Text3のアプリなので、Applicationsフォルダに移動しておきましょう。

Sublime TextをApplicationsフォルダに移動する

Sublime Textを開く

Sublime Text3を開くと、以下のような画面が表示されます。

untitled-3

Sublime Textを使いやすくする

この時点でも使いやすいエディタなのですが、設定を追加してさらに使いやすくしていきます。

Sublime Textの設定をする

Sublime Textの設定を行うには、Sublime Textの設定ファイルを編集します。まずは、Sublime Text3のメニューバーから、「Sublime Text」→ 「Preferences」→ 「Settings」の順に選択して設定ファイルを開きましょう。

設定ファイルの開き方

Settingsを選択すると、画面が分割され2つのファイルが開かれます。画面右側のファイル(Preferences.sublime settings – User)を編集してSublime Textの設定を行なっていきます。

設定ファイルの見方

Preferences.sublime settings – Userに以下のコードを貼り付けましょう。コメントアウト(読み込み時に無視される記述)にそれぞれの設定の説明を記載してあるので、どのような設定なのかも併せて確認してください。

{  

   // タブやスペースなどの不可視文字を見えるようにする

   "draw_white_space": "all",

  // フォントサイズを12pxにする

   "font_size": 12.0,

 // 現在の行をハイライトする

   "highlight_line": true,

 // 使用しないパッケージを設定する

   "ignored_packages":

   [

     "Vintage"

   ],

 // タブのサイズをスペース2つ分にする

   "tab_size": 2,

 // タブが入力された時に、スペースに置き換える

   "translate_tabs_to_spaces": true,

 // Enterキーが入力された時に、空行に挿入されている無駄なインデントを取り除く

   "trim_trailing_white_space_on_save": false,

 // テキストの折り返しを有効にする

   "word_wrap": true

 }

上記のコードを貼り付けたらファイルを【commandキー + sキー】で保存して、Sublime Texitを終了させてもう一度起動しましょう。設定した内容が反映されています。

スペースの可視化を確認

Sublime Textの機能を拡張する

Sublime Textはパッケージを追加することで、より使用言語などに合わせてカスタマイズできます。

パッケージとは

パッケージとは、Sublime Textをより便利にしてくれる機能をまとめたものです。パッケージには、補完機能や文法のチェックをするものなど多くの種類があります。

パッケージの管理ツールをインストールする

パッケージをSublime Textにインストールする前に、Package Controlというパッケージを管理するためのツールをインストールする必要があります。

以下のリンクからPackage Controlのインストールページに移動しましょう。

Package Control

リンク先に移動したら、SUBLIME TEXT3というタブの下のコードを全てコピーしましょう。テキストのコピーはコピーしたい範囲を選択して【commandキー + cキー】で行えます。

package controllerをインストールする

コードのコピーができたら、Sublime Textに戻りコンソールを表示します。コンソールに先ほどコピーしたコードを貼り付けることでPackage Controlをインストールします。

コンソールを表示するには、Sublime Text3のメニューバーから、「View」→ 「Show Console」の順に選択します。

コンソールを表示する手順

コンソールを表示したら、先ほどPackage Controlのインストールページでコピーしたコードを貼り付けましょう。コピーしたテキストを貼り付けは、【commandキー + vキー】で行います。

コンソールにpackage controllerの記述を貼り付ける

コードをコンソールに貼り付けることができたら、Enterキーを押しましょう。Enterキーを押すとPackage Controlのインストールが始まります。

ダウンロードが完了したら、Sublime Textを終了して再起動してください。package controllerのダウンロード終了後

パッケージをインストールする

Sublime Textを再起動したら、パッケージをインストールしていきます。【commandキー + shiftキー + pキー】を押して表示された入力欄に「install package」と入力してください。絞り込まれた候補の中から「Install Package」を選択してください。

Insatall Pacageを選択
Install Packageを選択すると入力欄が切り替わります。インストールしたいパッケージ名を入力して、該当するパッケージを選択するとパッケージをインストールすることができます。

インストールしたいパッケージを選択

All Autocompleteというパッケージをインストールしてみましょう。All Autocompleteは、補完機能をより強力にするパッケージです。「all autocomplete」と入力して候補の中から「All Autocomplete」を選択してください。

Auto Completeを選択

All Autocompleteがインストールされると、以下のように入力した文字から補完機能が強力になります。

Auto Completeの効果

このように必要に応じてパッケージをインストールしていくことで、より効率的に開発ができるようになります。

開発が捗るおすすめパッケージ

All Autocompleteの他にもインストールしておくと、開発が捗るパッケージを紹介します。

BracketHighlighter

BracketHighlighterは、対応するタグを強調してくれるパッケージです。コードが長くなると、どのタグが対応しているのか把握しづらくなってしまいます。BracketHighlighterを使用すると、対応するタグを視覚的に把握できるようになります。

 BracketHighlighterの効果

ColorHighlighter

ColorHighlighterは、CSSの色指定の部分をクリックするとその色を視覚的に表示してくれます。

ColorHighlighterの効果

Emmet

Emmetは、独自の記法に従って記述することでHTMLとCSSを省略して記述できるようになるパッケージです。Emmetの記法に慣れるとHTMLとCSSを書く時間がかなり短縮されます。Emmet記法からHTMLやCSSに展開するには、記述後に【tabキー】を押します。

例えば、HTMLファイルの中で「!」とだけ記述してHTMLに展開すると、以下のようになります。

Emmetの効果

SublimeLinter

SublimeLinterは、文法をチェックしてくれるパッケージです。SublimeLinterをインストールした上で、SublimeLinter-rubyやSublimeLinter-phpなどチェックして欲しい言語のパッケージもインストールする必要があります。

SublimeLinterの効果

SublimeCodeIntel

SublimeCodeIntelは、定義元にジャンプできるようになるパッケージです。クラスやメソッドの定義が別のファイルにされている時に、具体的な記述内容を確認したい時に便利です。ジャンプしたい定義元を右クリックして、「Goto Definition」を選択します。

SublimeCodeIntelの効果

Sublime Textのテーマを変更する

Sublime Textのテーマを変更することで、Sublime Textの色や見た目を変更することができます。インストールはパッケージと同じ要領でインストールできます。インストールしたテーマの反映方法とオススメのテーマを紹介します。

テーマをインストールする

まずは、テーマをインストールします。「Material Theme」というテーマをインストールしましょう。テーマのインストールはパッケージと同様の手順でインストールできます。

Material Themeを選択

インストールしたテーマを反映させるには、Sublime Textの設定ファイルを編集します。Sublime Text3のメニューバーから、「Sublime Text」→ 「Preferences」→ 「Settings」の順に選択して設定ファイルを開きましょう。

設定ファイルに以下の記述を追記することで、インストールしたテーマを有効にできます。

{

 //中略

 "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",

 "theme": "Material-Theme.sublime-theme"

}

テーマの変更のための記述

追記後にファイルを保存すると、テーマが有効になります。

テーマが有効になったことを確認

自分好みのテーマだとプログラミングがより楽しくなりますね。

オススメのSublime Textのテーマ3選

自分好みのテーマを探すのは中々難しいので、オススメのSublime Textのテーマを紹介します。

Seti_UI

Seti_UIは黒い背景にはっきりした文字色を使っているのでコードが見やすくなります。ファイルに言語ごとのアイコンが表示されるのも特徴の一つです。

Seti_UIをインストール後に設定ファイルに以下を追記することで、Seti_UIをテーマに反映できます。

{

 // 中略

 "color_scheme": "Packages/Seti_UX/Seti.tmTheme",

 "theme": "Seti_orig.sublime-theme"

}

Seti_UIの確認

Cobalt2

Cobalt2は、青をベースカラーとしたテーマです。文字サイズを小さくしたとしても見やすい配色になっています。多くのパッケージにも対応しているのも特徴です。

Cobalt2をインストール後に設定ファイルに以下を追記することでCobalt2をテーマに反映できます。

{

 // 中略

 "color_scheme": "Packages/Theme - Cobalt2/cobalt2.tmTheme",

 "theme": "Cobalt2.sublime-theme"

}

Cobalt2の確認

Piatto

Piattoは、フラットなデザインでとてもシンプルなテーマです。青系統の色を多く使用しています。

Piattoをインストール後に設定ファイルに以下を追記することでPiattoをテーマに反映できます。

{

 // 中略

 "theme": "Piatto Dark.sublime-theme",

 "color_scheme": "Packages/Theme - Piatto/Piatto Dark.tmTheme"

}

Piattoの確認

Sublime Textで使用するショートカット

Sublime Textの操作は、メニューバーから行うことができます。しかし、いつもいつもメニューバーから操作していると時間がかかってしまいます。ショートカットキーを覚えてキーボートからそうさすことで作業時間を短縮することができます。ここでは、必ず覚えておくべきショートカットキーと覚えておくと便利なショートカットキーに分けて紹介します。

必ず覚えておくべきショートカットキー

まずは、必ず覚えておくべきショートカットキーを紹介します。Sublime Textでは頻繁に使用するので、ショートカットキーを覚えてしまいましょう。

 

ショートカットキー 説明
command + shift + P コマンドパレットを展開
command + O ファイルやフォルダを開く
command + S ファイルを上書き保存
command + W タブを閉じる
command + P プロジェクト内からファイルを検索
command + F ファイル内から一致する文字を検索
command + , 設定ファイルを開く
command + / コメントアウト

覚えておくと便利なショートカットキー

 

ショートカットキー 説明
command + shift + F プロジェクト内から一致する文字を検索
control + G 指定行へ移動
command + L 行を選択
command + shift + D 行のコピー
control + shift + K 行の削除
command + option + 2 エディタを2列に分割
command + optio + 5 エディタを4画面グリッドに分割

 

終わりに

今回は、Sublime Textのダウンロードから設定やパッケージなどを紹介しました。基本的な操作方法やカスタマイズ方法を伝えることはできたと思っています。しかし、この記事では紹介しきれないほどの便利な機能がたくさんあります。

Sublime Textを自分が使いやすいようにパッケージを追加したり、ショートカットキーを使いこなすことでコーディング速度が上がり、より効率的に開発を行うことができるようになります。Sublime Textを使用していて不便に感じることがあったらカスタマイズするチャンスです!自分用にSublime Textをカスタマイズして快適にコーディングできるようになりましょう。

 

関連記事を読みたい方はこちら

【初心者向け】高機能テキストエディタ Vim入門【設定など】

【保存版】サクラエディタのインストール方法やおすすめ設定を紹介

【エンジニアにオススメ】 役に立つツール12選

【最強の勉強方法】ITエンジニアの勉強会・セミナー15選

初心者に捧ぐ!プログラミングを独学で勉強する最強入門バイブル

 

TECH::CAMPについて

TECH::CAMPは、講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実践的に学んでいきます。

TECH::CAMPならプログラミングが、なんとなく分かるではなく、一人で出来るようになります。

また、質問し放題のため、分からないところを質問しすぐに解決することで、どんどん新たなスキルを身につけることができます。

この機会にプログラミングを学びませんか?

banner_techcamp

TECH::CAMPについて

TECH::CAMPはあなたを最先端のスキルと知識を身に着けたテクノロジー人材に変えます。
講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実践的に学んでいきます。
独学では、わからないことを調べることに膨大な時間がかかりますが、TECH::CAMPは教室やオンラインでメンター(講師)へ質問し放題。

プログラミングが「なんとなく分かる」ではなく「形になるものを作る」にコミットします。
プログラミング以外もデザインやVR・3Dゲームなどコンテンツが多数あり、月額で全て受講可能です。
無料プログラミング体験会・説明会のお申し込みはこちら
お待ちしています!

KyoheiSeo KyoheiSeoが書きました
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

  • カテゴリー
  • このエントリーをはてなブックマークに追加
    記事をシェア→