sublimetext

エディタで変わる?コーディング初心者が思った作業環境の重要性

IT企業に勤め始めたばかりの新参者やっしーです!!今回はHTMLのコーディングを本格的に始めたばかりの僕が思った作業環境の重要性についてお伝えしたいと思います。

HTMLやCSSをかじったことのある方でなんだかめんどくさくなり、やめてしまった方はいないでしょうか?
ちなみに僕もその一人です(笑)

僕が嫌になってしまった理由の一つとして作業の煩雑さでした。
HTMLで文章を書いてもCSSできれいなWEBページにしなければならないのは皆さまご存知の通りでしょう。

どんなに力作なHTMLが書けたとしても思った通りのデザインにならないなんて日常茶飯事、一生懸命に書いても…
「フロートがうまく回り込まない!!」
「余白がうまく決まらない!!」
「ここを変えたつもりなんてなかったのに!」

…こういった事も、実はテキストエディターで何とかなっちゃいます。

ご存知の方も多いとは多いとは思いますが、テキストエディターとはHTMLに限らず、プログラミングをするうえで必要になるもので、テキストファイルを作成、編集、保存するものになります。

今回はSublimetextを使って、その快適さ、便利さについて書いていきたいと思います。
(ちなみに私はSublimetextを使う前はBraketsというものを使っていました。)
まず、Sublimetextとはいろいろな開発現場でも使用されいている無料のテキストエディターです。
SublimeTextのインストールはこちらから

Sublimetextはプラグインを導入することにより、自分好みにカスタマイズすることができます。
というかインストールしただけでは、プラグインを入れないとチョット物足りないです(笑)
とりあえずプラグインを入れておきましょう。
(筆者の環境がwinの為今回はwindows版sublimetext3について解説します)

Sublime Text 3 PackageControll

Sublime Texit
まずこのサイトから使っているSublimetextのバージョンに応じてタブ選択して、
赤枠の部分をコピーします。

コピーしたら、Sublimetextを立ち上げてviewのタブからshow consoleをクリックします。

画面下に出てきた入力欄に先ほどコピーしてきたテキストを貼り付けてEnterを押します。

PreferencesのタブからPackage Controlが追加されていれば導入完了です。

Sublimetextの日本語化プラグインを導入する

やっぱり英語よりも日本語になってたほうが使いやすいので日本語化します。
現在バージョンでは、日本語化プラグインは簡単ですが部分的なサポートのもの、もう一つは少し手間ですが、完全に日本語化されるものがあります。
二つともご紹介しますので、ご自分に合うやり方で日本語化してみてください。

ChineseLocalization(簡単に導入できる、不完全な日本語サポート)

先ほど確認したPreferencesの中からPackage controlをクリックすると以下のような画面が出てきますので、赤枠の中にPckage Control:Install Package と入力しましょう

Enterを押すとしたのような画面が出てくるので次はChineseLocalizationsと入力してください。

新しいタブが追加され以下のような画面が出てくると導入完了です。

HelpのタブにLangageが追加されているので早速日本語を選択してみましょう。
(選択してもいったんsblimetextを再起動しないと適用されないこともあるのでご注意を)

無事日本語化されました!!

Japanize(少し面倒な作業はあるが、完全な日本語サポート)

まずはchineselocalizetionsと同じ要領でpackage control からinstall package を選択して japanizeと入力してプラグインをインストールします。

次は基本設定(preferences)のタブからpackagesフォルダ(brows packages)をクリックするとエクスプローラーが起動しますので、その中にあるjapanezeのフォルダ内に移動します。

Japanizeフォルダ内にある拡張子が.jpとなっているファイルをjapanizeと同じ改装にあるdefaultに移し、拡張子.jpがついているファイルの拡張子.jp
をすべて消していきます(一旦japanizeフォルダ内に新しいフォルダを作成してそこに.jpファイルをいれてリネーム作業を行ってからファイルをdefaultに移動させると楽です。)
リネーム後は拡張子が.sublime-menuとなっています。

最後にjapaneze フォルダ内にあるMain.sublime-menuをuserフォルダに移動させれば導入完了です。

おすすめプラグイン

Emmet(導入必須!!)
HTMLとCSSの編集を効率化してくれるプラグインで、
省略記法を展開する事で、各種コードが生成されます。(導入した後divと入力してtabキーを押してみてください!すごく楽になることがわかります(笑))
HTMLBeautify
HTMLのタグを整形してくれます。ショートカットはcommand + option + shift + F
TrailingSpaces
スペースを検知し、ハイライトしてくれます。
ColorPicker
カラーコードを選択するポップアップが表示されます。
IMEsupport
Windows専用のプラグインで、日本語のテキストをインライン表示してくれます。

画面分割

HTMLとCSSはセットで考えるものですよね、いちいちコーディングするたびに画面を切り替えるのは面倒なので画面分割します。

表示タブから画面分割を選んで好きな割り方を選ぶだけです。

2画面表示にできました。

無料なのに自分流にカスタマイズできるのがSublimetextの魅力です。
作りたいWEBページがあったのに挫折してしまった人はぜひぜひSublimetextを使ってリベンジしてみてください!!

作者情報
最近ITベンチャーに転職してきた新参者です。
PCに限らず機械いじり大好きなオタク人間なので、書く記事はメカばっかりかもしれませんがよろしくお願いします。