YouTube再開しました>>>

プログラミング用のテキストエディタ「Sublime Text」をインストールから最初の使い方・設定方法

プログラミングを始めてみた時の話です。プログラミングをするためにはコードを入力するためのエディタが必要になります。ぼくは「Sublime Text」というエディタを使うことにしました。理由としては

  • Mac、Windowsどちらでも使える
  • ということはユーザーも多そう
  • ということは困った時にググれば大体は助けてくれそう

ということでぼくのような初心者にも優しそうだったから。ということで、この記事では「Sublime Text」をダウンロードしてから使い始めるまでの設定方法とかです。

プログラミング用のテキストエディタ「Sublime Text」をインストール

Sublime Textのダウンロード画面

公式HPからダウンロードしてパソコンにインストールします。ご自身のパソコンに合わせたやつを選んでください。ぼくはMacBookを使っているので実際のMacBookの画面に沿って話を進めます。

Sublime textをインストール

ダウンロードされたSublime Textの.dmgファイルを開くとこのようになるので、アプリケーションフォルダにドラッグして追加。

Sublime Textをダウンロードする時の警告

初めて開く時はこのような警告が出る場合がありますが鮮やかにスルーして「開く」をクリック。

Sublime Textの画面

ダウンロードされたアプリを開くとこのような。無駄がなくシンプルでかっこいい。

ショートカットを覚えておくと便利ですね。

ワンタッチでMacとWinが切り替えられます。

Sublime Textをインストールしてから最初の設定や使い方

で、インストールした後に最初にやったことです。

  1. Package Controllのインストール
  2. 日本語設定
  3. 必要なプラグインを追加

Sublime Text自体はインストールしたらすぐに使える仕様になっているのですが、いろいろ設定しておくと便利という先人たちの情報がネットの海には転がっていました。言う通りにしましょう。

Package Controllのインストール

Package Controllを入れておくとコードの入力補助をしてくれたり、ハイライトをしてくれたりとにかく便利な機能を追加できるということです。初心者の人は何言ってるかわからないですよね。ぼくもよくわからないままインストールしておきました。結果大正解。ということで下記サイトへ飛びます。

https://packagecontrol.io/installation

あらゆるサイトを見渡してみてもみんなこぞって、上記サイトに表示される「Sublime Text3のスクリプトをコピーしろ」っていうんですが、ぼくは何回開いても表示されないんですね。こんな感じで全然みんなのと違う。

ここで結構くじけました。スーパーファミコン版のドラクエ5がすぐに冒険の書が消えるくらいくじけました。が、大丈夫。

ぼくと同じような画面が出た人は右側にある「Menu」という項目に従ったらOK。

  • Sublime Textの「Tools」を開く
  • 「Install Package Control」を選択

でOK。


Sublime TextのPreferencesを開いて「Package Control」が表示されていたら成功です。やったね。

表示されない人は一度⌘+QでSublime Textを終了して、再起動したら表示されているかもしれません。

日本語設定

Sublime Textは英語表示されているので日本語にしたいですよね。英語のままでいいよって人はそのままでOK。

変更したい人は

  • shift+⌘+PでPackage Controlを呼び出し
  • Install Packageをクリック

次の画面で「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
にコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。
以上です。

簡単にいうと

  • Finderの「移動」→フォルダへ移動
  • /Users/ユーザー名/Library/Application Support/Sublime Text 3/Packages/を入力
  • Packagesフォルダの中にDefaultフォルダがない場合は自作
  • Japanizeのファイル内にある.jpファイルを全てコピー
  • Defaultフォルダ内にペーストして.jpを.orgなどに変更
  • ペースとした中の「Main.Sublime-menu.org」をUserフォルダにコピペ
  • Sublime Textを再起動
  • メニューバーが日本語になって入れば成功(一部表示は英語のまま)

ユーザー名はご自身ののものに変更してくださいね。

細かくいうと

上記の箇条書きをもう少し細かくみていきます。

Finderの「移動」から「フォルダへ移動」を選択して/Users/ユーザー名/Library/Application Support/Sublime Text 3/Packages/を入力します。「ユーザー名」が自分のパソコンのユーザー名に変更してください。

Packagesのフォルダの中に「Default」を作成。ある人はそのままでOK。

Japanizeフォルダの中にある拡張子が「.jp」のファイルを全てコピーして先ほどの「Default」フォルダ内にペースト。ペースとしたファイルを全選択して右クリックから「名前の変更」をクリック。

.jpの拡張子を.orgなどに変更。この中の「Main.Sublime-menu.org」を「Packages」フォルダ内の「User」フォルダ内にコピペします。

Sublime Textを⌘+Qで終了して再起動したらメニューバーが日本語になっているはずです。一部はそのままらしいですが、調べながらやればなんとかなるでしょう。

必要なプラグインをインストール

加えて必要そうなプラグインも一緒にインストールしておきます。何がいいのか全くわからなかったので思考停止して、TechAcademy [テックアカデミー]のおすすめしているやつの中から今の自分に必要そうな物を全て入れておきました。

  • SublimeLineter:エラーチェッカー
  • HTML5:HTMLのスニペット集、ハイライト、自動補完
  • BracketHighlighter:開始/終了タグの強調
  • SublimeLinter-html-tidy:HTML5の構文チェッカー
  • abacus:イコールやコロンなどをきれいにそろえる

インストール方法は

  • テキストエディタ場でshift+⌘+PでPackage Controlを呼び出して
  • 必要なプラグインを入力してEnterキー
  • Sublime Textを再起動して完了

です。

まとめ

ということでプログラミング用のテキストエディタ「Sublime Text」をインストールして、必要な機能を追加したり、日本語設定する方法などを紹介しました。

使いながら「お、これもいいな」って思ったら追記していきます。

無料でプログラミング学習

TECH ACADEMYなら無料でプログラミング学習ができるので「やってみたいけど挫折するかもしれない…」って人は無料体験から始めるのもおすすめ。