業務で使用しているツールのご紹介 HTMLマークアップ・コーディング編
今回は、題目の通り、フロントエンド周りの業務を担当している私が、業務で使用しているツールのご紹介をしたいと思います。
Web業界（特にフロントエンド）に興味をお持ちの方は、特に見てみてください。
既にWeb業界で活躍されているプロの方には物足りない内容かもしれません。
Contents
フロントエンド業務を行う上で必要なもの
HTMLファイルやCSSファイルなど、フロントエンドで作成する各ソースファイルは、全てテキストファイルです。
そのため、作成するにもテキストを編集できるツールが必要です。
テキストを編集できるツール
テキスト編集は、Windowsで最初から入っているもので言えば「メモ帳」で行うことが出来ます。
（Web業界に入る前の頃は、メモ帳を使用して自分のプライベートサイトを構築していました。20年以上前ですけどね。）
ただ、この「メモ帳」だと、色々と痒い所に手が届かないので、もう少し高性能なテキスト編集ソフトを使用します。
Webオーサリングソフトかテキストエディタか
フロントエンド周りのコーディングで、よく使用されるツールとしては、Webオーサリングソフトかテキストエディタが多いと思います。
Webオーサリングソフトとは、ホームページビルダーやDreamweaverやAtom,Coda,Visual Studio CodeなどのWebサイト構築を行うためのソフトの事を言います。
テキストエディタは、前出だと思いますので説明は割愛します。
どっち使ってるの？
制作会社は、基本的にreamweaverを、個人の場合は、好きなエディタを使用しています。
Web業界に入る前からテキストでHTMLを書いていたので、慣れているためです。
Web業界の方は、必ずテキストエディタ使用！なんて事はなく、会社さん・制作者さんによって使用ツールはまちまちかと思います。
どんなエディタ使ってるの？
よく使用されるエディタとしては、以下です。（順不同）
Adobe DreamweaverCC
WEB制作会社ではデザインからマークアップまでをAdobe社のソフトにて制作・編集されています。
その中でもマークアッブ部分でこのソフトが大活躍います。最新版CCにおいてはCSSデザイナーというパネルが追加され、デザイン・マークアップ速度は断然アップしてコーダー・マークアップデザイナーにとっては欠かせないソフトです。
https://www.adobe.com/jp/products/dreamweaver.html
サクラエディタ
有名どころのエディタで、昔からあります。純粋なテキストエディタです。
http://sakura-editor.sourceforge.net/download.html
Sublime Text
“恋に落ちるエディタ”と、巷では呼ばれています。
使ってみると分かりますが、ソース書いてて「あっ、あのクラス名何だっけ、、、？」と思った時、ふと気づくと「このクラスでいいかい？」とでも言わんばかりに候補を出してくれます。痒い所に手が届くありがたいエディタです。
主にSCSSを使用するときに使用しています。
https://www.sublimetext.com/3
Coda
Apple製品に特化したパワフルエディタです。プログラムからマークアップデザインまで幅広い言語開発に適し、確認のためのプレビューやローカルとリモートファイルを管理するファイルマネージャとSSHまで兼ね備えるためAppleユーザーにはとても好まれているソフトの一つ。また、ローカル開発だけでなく、サーバーを直接変更するリモート開発もできることも好まれる理由の一つ。追記するのであれば、プZen-Codingプラグイン機能を使うことで、HTML・CSSのマークアップデザインがより短縮して構築することがでで絵いるようになりました。
https://panic.com/jp/coda/
Visualstadio code
今回こちらにあげさせていただきましたが、最近急上昇の無料で使える「綜合開発環境」ソフトです。
プラグインを入れることでプログラム開発、HTML/CSSのマークアップなど自分の使いたい状態にどんどんアップグレード・アップデートすることができるので便利です。
Atom
使い方を説明しているテキスト・WEBサイトも多く、わかりやすい画面構成で全世界で使用している方の多いテキストエディタソフトです。
https://atom.io/
Mery
おすすめポイントは３つ『インストールが必要ない』『正規表現が充実』『何より軽い』です。
2016年12月23日に最新アップデートを迎え、大幅に使いやすさがアップしたアプリです。今回『縦書き機能』『マーキング』『カスタムフォント導入』などの機能が追加されました♪。もともと『検索機能』もあるので、コーディング修正もあっという間にできてしまいます。
https://forest.watch.impress.co.jp/library/software/mery
Tera pad
Windowsでは昔から活用されているテキストエディタの一つで、シンプルなSDIタイプのテキストエディタです。
行番号、桁ルーラー表示、IME再変換、画面分割、印刷とプレビュー、 D&D編集、Undo・Redo、HTML・ Perl・PHP・CSS・Ruby・INI・BAT・C++・Java・JavaScript・HSP・Delphiの各種編集モード、 矩形選択、TAB・空白・改行・[EOF]のマーク表示、 文字・改行コードの自動認識、外部プログラムの起動、排他制御、標準入力の取り込み、 WWWブラウザでのプレビュー、引用行・URL・メールアドレス のカラー表示など、 テキストエディタとしての基本的な機能をもっています。
https://forest.watch.impress.co.jp/library/software/terapad/
今回は、Web業界に興味をお持ちの方向けに、実際の現場にて使用しているソフトのご紹介をさせていただきました。
実際、フロントエンド業務を行うには、テキストエディタだけでは足りなくて、他にもいくつかツールを使用しますが、長くなってしまうので今回はここまでです。
いかがだったでしょうか？
「既に使っているよ」という方、「ATOMなど別の高機能テキストエディタ使ってるわー」という方もいらっしゃることと思います。
前述しましたが、「必ずテキストエディタを使用！」なんてことはありません。
また、「必ずこのテキストエディタを使用！」ということもありません。（会社で決められてしまっている所は従うしかないのですが、、、）
自分の肌に合ったツールを使用する事が「業務の能率」を、グッと上げてくれるものと思います。
そして、現場ではこの「業務の能率」が一番大事です。
「高品質なソース」を「短時間」でコーディングできるようになること、私はまだまだではありますが、品質・時間どちらも欠落してしまわない様にコーディングを頑張っていきたいと思います。
…って、最後の部分、ツールの紹介と全く関係ない内容ですね。
