Loading

プレオ日誌

blog

私のコーディングツールです! – テキストエディタ

こんにちは、フロントエンジニア 上西 です。

今年も早いもので、もうすぐ6月です。
今年… あと半分に… 来てしまいました…

歳はとりたくないものですね。

そんな、歳をとり続けている私から、これからコーディングを始められる方へ、Webサイトを制作(コーディングする上で)何を使っているかをご紹介しようと思います。
すでにコーディングされている方にも見ていただけると嬉しいです。

※コッチの方がいいよって方がいましたらコッソリ教えてください(笑)

テキストエディタ

今回はテキストエディタについて書きます!

私が使っているのは、言わずも知れた「SublimeText」!
現役コーダーさんも利用されている方は結構いらっしゃると思います。

私がSublimeTextを使っている理由は…
・シンプル
・見やすい
・カッコイイ
・軽い
・そして、カッコイイ!

カッコイイと2回言ってしまうほど、見た目が好きです。
自由にコードやプラグインを使うことで見た目の調整も可能です。
ちなみに私は、「Material Theme」というテーマを使っています。

SublimeTextに入れたプラグイン

色々なカスタマイズができ、自分色に染めることができるエディタですが、パッケージもたくさんあります。そんなたくさんあるパッケージの中から私が入れたものはコチラ。

DocBlockr

htmlというよりは cssやjs側で使うことが多いかも知れません。
「/**」でTabを押すと、自動でコメントアウトし、そこが何を処理する場所なのかの説明を書く枠が表示されます。個人でやるときも、複数人で制作するときも、この説明が記載されているかどうかで効率が相当変わると思います。

Color Highlighter

cssでcolorコードを使うときに、コードの背景が記載したカラーコード色に変化してくれます。
とりあえず、書いたコードの色が合っているかどうかなど確認用で使っています。

Emmet

まぁこれは定番といっても過言ではないでしょう。

ul>li

これだけで、下記のようになります。

<ul>
<li></li>
</ul>

効率がグゥーンとあがります。

IMESupport/Japanize

どちらも日本語を使われる人にはありがたいパッケージです。

■IMESupport
IMEの文字入力をインラインで可能

■Japanize
Sublimeを日本語化にしてくれます。

AutoFileName

imgタグやcssの際に便利です。
imgタグを書くとsrc=””にカーソルをあてると候補のファイルリストを表示してくれます。

SublimeLinter

構文チェックをしてくれます。
最後のセミコロンがなかったりなど、コーダーあるあるのミスをこれで未然に防ぐことができます。

Tag

これは最近ではあまり使う機会が減った気もしますが、「</」と入れるだけで次に来る予定の閉じタグを自動で書いてくれます。

BracketHighlighter

[]、()、{}、””、”、タグの開始、終了をハイライトしてくれる便利なパッケージ。
こちらも漏れを無くす為、入れておいたほうがいいですね。

ということでまとめに入りますがいかがでしたでしょうか。

SublimeTextって他のエディタと違って、「この機能使った事無いなぁ…」みたいなモノは極力非表示もしくは、排除されており、ソースを書く場所だけがドンッとある感じが好きですね。

色々なエディタが気になり使いましたが、やっぱり最後にはココへたどり着いたって感じです。
何より、Sublime Textでコード書いたりしていると、後ろから見られたときに「やれるてる感」「カッコイイ感」が漂っている気がします!(これは完全に個人的な意見ですw)
やっぱりソースコードもそうですが、見た目から入るの大事ですよね!

みなさんも、自分にあったエディタを色々試して見てください。

上西 孝康

この記事を書いた仲間

上西 孝康 フロントエンドエンジニア

ご質問などお気軽にお問い合わせください

お電話でのお問い合わせ

096-312-3430

月〜金曜日(祝日除く) 9:00〜18:00

メールでのお問い合わせ

お問い合わせフォーム >