Work guide
職種別お仕事ガイド
作業を効率良く！フロントエンドエンジニアにおすすめエディタ4選
2018.12.17
- Keyword
- 制作ツール
エディタを使いこなしてスキルアップ！
どんな仕事でも、周囲から認められるような成果を残すにはツールにもこだわる必要があります。
エンジニアにとっても同じであり、効率よく業務をこなすためには使いやすいエディタが欠かせません。今回は、フロントエンドエンジニアとして仕事をする人におすすめなエディタを4つ紹介します。
あなたのスキルを活かして
次のステージへ
ウェブスタッフは、フロントエンジニアの方の転職をサポート！キャリアアドバイスから履歴書・職務経歴書・ポートフォリオの添削まで、あなたの転職をお手伝いします。
ぜひご利用ください！
正社員で転職したい方はこちら
おすすめエディタ1：Sublime Text
Sublime Text
「Sublime Text」は「Windows」「Mac」「Linux」で使用することが可能なテキストエディタです。
開発が進むことでバージョンアップを繰り返しており、最新版は「Sublime Text3」となっています。
公式のキャッチコピーとして、「恋に落ちるテキストエディタ」を標ぼうしています。無駄な機能がなく、動作が軽いためスピード感をもって作業を進めることができるのが特徴です。また、拡張機能が豊富であり、プラグインによって使用者の好みに合うように調整することが可能です。ショートカットも多彩で、使い方を覚えるほどに作業効率が上がっていくでしょう。そのため、フロントエンドエンジニアからも人気が高いエディタとして知られています。
無料版でもほぼすべての機能を利用できるため、使用感を試せる点も大きなメリットです。ただし、Sublime Textはインストールしてすぐに利用しようとすると、すべてのメニューが英語になっています。設定を変更して日本語化する必要がある点は注意しましょう。
Sublime Text3
おすすめエディタ2：DreamweaverCC
DreamweaverCC
「DreamweaverCC」は、Adobe社が提供しているコーディングエディタです。
Adobe社が提供するデザイナー向けのアプリケーションである「Adobe Illustrator」や「Adobe Photoshop」と連携しやすい特徴があります。デザイン業務まで求められることのあるフロントエンドエンジニアにとっては、とても便利なエディタなのです。自由度の高いデザインが可能であるため、クライアントからのさまざまな要望に応えることができるでしょう。同時に、テンプレートも提供されているので、サイト構築を簡略化することも可能です。
ただし、DreamweaverCCを使いこなすためには、HTMLを編集する知識が求められるという点は覚えておきましょう。機能の多さと自由度の高さが最大の魅力であるものの、代わりにユーザー側の知識や技術などが求められるエディタでもあるのです。
DreamweaverCC
おすすめエディタ3：ATOM
ATOM
「ATOM」は、「Windows」「Mac」「Linux」で利用可能なオープンソースエディタです。
2015年6月から正式版がリリースされており、動作の軽さや拡張性の高さからユーザーからの人気が高いエディタだといわれています。タブ型のユーザーインターフェースで使いやすく、一つのウィンドウで「単一ファイル」「プロジェクト全体」「複数のプロジェクト」を開くことができるので、作業効率が高まるでしょう。
無料公開されているパッケージによって機能の追加が可能なため、使用者の好みに合わせてカスタマイズできる点も大きなメリットです。
一部の文字を入力すると変換予測の一覧を表示する「予測変換」や、特定のキーボード操作で機能を呼び出せる「キーバインド（ショートカット）」などが備わっています。Web開発者であればうれしい機能が充実しているので、何かと使い勝手が良いでしょう。初期設定ではメニューが英語になっているものの、日本語へ切り替えることも可能です。
ATOM
おすすめエディタ4：Brackets
Brackets
「Brackets」は、Adobe社が提供しているオープンソースのテキストエディタです。同じくAdobe社が提供している有料エディタDreamweaverCCと比較すると、Bracketsは初心者向けの位置づけになります。
高機能で自由度の高いDreamweaverCCに対し、シンプルで軽量なBracketsは使いやすさを重視したエディタだといえるでしょう。
ただし、Bracketsは拡張機能も豊富であるため、使用者が利用しやすいように設定を変えていくことも可能です。用意されている拡張機能は、数百種類あるといわれています。例えば、拡張機能の1つ「Emmet」を利用すると省略形のコードを入力するだけで、対応する長いコードが展開されるのです。
また、基本機能として「クイック編集」と呼ばれるものがあり、必要になる作業をBracketsが推測・動作してくれます。例としては、CSSでカラーを指定する場面で「クイック編集」を使用すると、カラーピッカーを自動で呼び出してくれるのです。さらに、ウィンドウを縦横に分割して2つのファイルを同時編集できる便利な機能も備えているので、作業の効率化につながるでしょう。あらかじめ日本語への対応がされているため、設定などを変えなくてもそのまま利用することができます。
動作環境として、「Windows」「Mac」「Linux」に対応しており、作業するPCを選びません。
Brackets
オープンソースでも高機能！自分にあったエディタを見つけよう
有料のエディタであれば、その分機能は充実しています。プロとして仕事をするなら、高機能なツールを使い、ほかのエンジニアと差をつけるのは重要でしょう。
ただ、オープンソースの無料エディタにも、驚くほど便利な機能が充実しているものもあるのです。本当に大切なのは、自分にとって使いやすいエディタを見つけることですから、いろいろ試しながら探してみましょう。
（関連記事：GitHubとはどういうサービス？登録方法と使い方を紹介）
（関連記事：Sassの特徴とは？利用のメリットと使い方）
（関連記事：フロントエンドエンジニアにおすすめのツールまとめ）
制作会社で働く！フロントエンドエンジニアの求人情報
制作会社では、さまざまなサイト制作に関わることができます。フロントエンドエンジニアとして、自分のスキルを高めたいという方におすすめです。
詳しくはこちら
Career advice
転職のアレコレ。プロに相談したい方へオススメ！
最新のIT・Web業界動向を知るキャリアカウンセラーが行う
「キャリアアドバイス」
ある程度経験を積んだので次のステップにキャリアアップしたい、しばらくWeb業界を離れていたが再度業界に戻りたい、 未経験・経験浅めだがどのように転職活動を行っていったらいいかなど、ウェブスタッフでは様々なご要望に対応したキャリアアドバイスを行っております。
お申込みはこちら
ウェブスタッフが運営するサイトでは、利便性向上・分析・広告配信等のためにCookie等のデータを使用しています。当社が取得したアクセスデータとの関連付けの削除（オプトアウト）に関しては「個人情報の取り扱いについて」をご覧ください。
同意して閉じる