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

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

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

アイキャッチ画像出典: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の効果

テクノロジースクールTECH::CAMPで
10年後も仕事に困らないスキルを身に着けませんか?
テックキャンプ体験会

TECH::CAMP』はこれからのテクノロジー時代で結果を出せる、次世代のビジネスパーソンを育成するスクールです。以下のような方におすすめです。

  • 今の職場でキャリアアップ、年収アップしたい
  • エンジニア以外の職種でIT業界に転職・就職したい
  • ビジネスパーソンとして総合的にスキルを高めたい

まずは無料体験会に参加してみてください。体験会は月に1000名以上のお申し込みをいただいているため、ご希望の日が埋まることがあります。今すぐのご予約をおすすめします。

体験会について詳しくみる

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

  • カテゴリー
  • footer.php