初心者向け！テキストエディタ【Sublime Text 3】をインストールしよう！
漫画坊主です。
今回は 漫画でプログラミング講座 番外編です。
始めに、プログラミング初心者の多くの方は恐らく
テキストエディタ をインストールされていないかと思います。
一応【メモ帳】でも プログラミングのコード を書くことは可能ですが
やはり テキストエディタ をインストールしている方がプログラミング がやりやすいかと思いますので、
この機会に是非インストールしてみて下さい！
今回インストールするのは【Sublime Text 3】というテキストエディタです。
便利な ショートカットコマンド が豊富で扱いやすく
プラグイン で自分好みにカスタマイズすることが出来ます。
なにより 無料 でインストールできるのでオススメです！
それでは早速インストールをしていきましょう！
※インストールに移る前に注意
今回、インストールの手順 が分かりやすいように何枚か画像を用意しておりますがこちらは
２０１８年１０月３日 にスクリーンショットしたものです。
バージョンによっては多少違う箇所もあるかと思いますのでご注意ください。
また私の使用しているパソコンの OS が Windows10 ですので
インストール手順も Windows10 となっております。予めご了承くださいませ。
◆Sublime Text 3 のインストール
それでは 下記のリンクをクリック して 公式サイト に遷移します。
【Sublime Text 3】インストールはこちらから飛べます ※別ウィンドウが開きます。
公式サイトに遷移すると下記の画面が表示されます。
OSによってインストールする箇所が異なりますが、
私の場合ですと OS が Windows10 の bit数が64bit ですので Windows 64bitをクリックします。
bit数が 32bit の方は Windows をクリックします。
するとダウンロードが始まります。
ダウンロードが終わりましたら赤□をクリックしてください。
そうするとセットアップ画面が起動します。
セットアップを始めていきますので【Next】をクリックします。
【Next】をクリックすると下記が表示されます。
インストール先ですが上記の【C:\Program Files\Sublime Text 3】で構いません。
特に変更がなければ【Next】をクリックします。
【Next】をクリックすると下記が表示されます。
赤□のチェックボックスは、エクスプローラーでファイルを右クリックしたときに
「Open with Sublime Text」というメニューが付加されるようになります。
こちらに関しては好みですのでチェックはどちらでも構いません。
特に変更がなければ【Next】をクリックします。
【Next】をクリックすると下記が表示されます。
上記のインストール先で間違いなければ【Install】をクリックします。
するとインストールが始まります。
インストールが終了すると下記の画面が表示されます。
これで【Sublime Text 3】のインストールは完了です。
今後使いやすいように、
ショートカット やタスクバー にピン留めしておきましょう！
◆Sublime Text 3 の初期設定
それでは、【Sublime Text 3】を開いて 初期設定 を行いましょう。
【Sublime Text 3】にはたくさん便利なプラグインがあるのですが、
今回は「文字化け対策」のみ行います。
初めのうちは たくさん失敗して経験を増やす 方が良いかと思いますので
便利機能に頼らずやることをオススメします。
ある程度慣れてから 自分に必要なプラグイン をインストールしましょう。
それではプラグインをインストールするのに必要なパッケージをインストールしましょう。
コマンドの『Ctrl + Shift + P』を同時に押してください。
すると下記の様な入力欄が表示されますので「install Package」と入力して
赤□をクリックしてください。
するとインストールが完了しましたとメッセージが表示されますので
【OK】ボタンをクリックします。
これで、パッケージのインストールが完了したので
次は、文字化け 対策をおこないたいと思います。
コマンドの『Ctrl + Shift + P』を同時に押して
「install Package」と入力して、赤□をクリックしてください。
すると下記の様な入力欄が表示されます。
入力欄に「ConvertToUTF8」と入力して
赤□をクリックしてください。
この「ConvertToUTF8」というプラグインは
文字コードが shift-jis ファイルを開くと自動的に文字コードを UTF-8 に変換し、
保存時には自動的に shift-jis に再度変換して保存するプラグインです。
この設定を最初にやっておくと凄く楽です！
インストールが完了すると下記のようになりますので
赤□をクリックしてファイルを閉じてください。
次に、新規作成ファイルが自動的に Shift_JIS で開くように設定を行いますので
Perferences -> Package Settings -> ConvetToUTF8 -> Settings – Userを選択して下さい。
ファイルが開いているのを確認したら
下記のコードをコピーしてファイルに貼り付けてください。
“default_encoding_on_create” : “Shift_JIS”
}
コピーする範囲を選択して `Ctrl` + `C` 同時押しでコピー
貼り付けたい場所にカーソルをもっていき `Ctrl` + `V` 同時押しで貼り付けができます。
2行目の「”default_encoding_on_create” : “Shift_JIS”」は
`tabキー` もしくは `Ctrl` + ` ] ` 同時押しで下記の画像のように空白ができます。
これを【インデント】と呼ぶので覚えておきましょう。
貼り付けが完了したらファイルを保存してください。
`Ctrl` + `S` 同時押しで表示している ファイルが保存 ができるので覚えておきましょう。
ここまでで 文字化け対策が完了 です。
◆Sublime Text 3 の便利機能
続いては【Sublime Text 3】でよく使うツールを紹介します。
まずは サイドバー を表示して
プロジェクトファイルを自由に選べるようにしましょう。
View -> Side Bar -> Show Side Bar を選択してください。
すると横に サイドバー が表示されます。
次にサイドバーに表示させたい フォルダ を選択します。
C:ドライブ 直下の【xampp】直下の【htdocs】というフォルダを
【Sublime Text 3】のサイドバーにドラッグします。
するとサイドバーに【htdocs】というフォルダが表示されました。
ここから編集したいファイルが選べるので非常に便利です。
続いては画面を分割してみましょう。
View -> Layout -> お好みの分割 を選択してください。
今回は縦に割って２つにしてみました。
画面分割をすると ソースを見比べることができる ので便利です。
割り方はお好みなのでやりやすい割り方を見つけてください。
最後に【Sublime Text 3】で使用できる ショートカットコマンド を一覧にしました。
ショートカットコマンドを使ってプログラミングを効率よく行いましょう！
以上で【Sublime Text 3】の説明を終わります。
【Sublime Text 3】を日本語化する方法を紹介した記事もございますので
合わせてご覧ください。下記のリンクから遷移できます。
初心者向け！テキストエディタ【Sublime Text 3】を日本語化する方法
他にも便利なプラグインはたくさんありますので
またの機会に紹介できればと思いますので、宜しくお願い致します。
最後まで読んで頂きありがとうございました！
◆良かったら息抜きに私の描いた漫画も読んでみて下さい！
漫画坊主の漫画はこちらから
◆プログラミングの勉強を続ける場合はこちらから！
プログラミングの勉強はこちらから
フォローお願いします！！
◆twitter
◆４コマgram
