こんにちは。WEB担当の後藤です。
エディタはプログラミングから切っても切り離せない関係ですよね。
皆さんは、どのように選択し使っていますか。
すでにお気に入りのエディタで日々コーディングに打ち込んでいる一方、
なんとなく使い始めたエディタをずっと使い続けている、という方も多いかと思います。
エディタは開発者にとって毎日触れるものだからこそ、手に馴染むもの、
日々のコーディングを気持ちよくしてくれるものを使うべきだと僕は思います。
それが、生産性に大きな影響を与えることは言うまでもありません。
今回は、フロントエンド開発にかかせない、おすすめエディタ『ATOM』のご紹介と、
開発に便利なプラグインをご紹介したいと思います。
テキストエディタとは
ご存知の方からしたら当たり前のことですが、
入門者の方もご覧いただいてるかもしれませんので一応解説しておきます。
テキストエディタとは、テキスト（文章）を編集するアプリケーションのことです。
数年前までは、エディタの種類も少なく、必然的に開発者が使うべきエディタはある程度決まっていました。しかし、少し前からエディタの開発が非常に活発になり、以前に比べると選択肢はとても広がっている状況です。また、それらの各エディタには、こだわりの機能が実装されていて、フロントエンドの実装をサポートするものや、デザイン面のサポート機能を充実させたものなど様々です。
そういった開発支援ツールが充実しているエディタが数多くある現状から、
自分にあったエディタを選ぶのは簡単なことではありません。
『ATOM』をおすすめする3つの理由
『ATOM』とは、GitHub製のエディタです。
2015年6月、正式な安定版がリリースされ非常に勢いがあるエディタになります。
特徴としては、Gitとの連携が強いことが挙げられますが、
それだけでなく、オープンソースのエディタなので、開発も活発に行われています。
また、『パッケージ』と言われる拡張機能も多く、
インストールすることで自分好みのテキストエディタを創ることが可能です。
無料なのに高機能
まず、１つめATOMはフリーソフトだという点です。無料で使用できます。
インストールや設定も非常に簡単で、高機能なだという点。
また、UIもわかりやすくいまどきです。
拡張性がある
もともと高機能なATOMですが、『パッケージ』と呼ばれる、拡張機能をインストールすることが出来ます。
このパッケージをインストールすることで、常に自分好みのエディタにカスタマイズが可能です。
他のエディタにできて、ATOMに出来ないことはないといっても過言ではありません。
将来性がある
オープンソースなので世界中の優秀な開発者が日々ATOMを進化させています。
ATOMのインストールと日本語化
長くなりましたが、早速インストールしてみましょう。
ATOMのダウンロードは、こちらの公式サイトからダウンロードできます。
インストールが完了したら、開いてみてください。
ATOMの日本語化
ATOMのインストールが完了し、起動すると下のような画面が表示されます。
「Install a Package」をクリックしたのち、「Open Installer」を押してください。
「Search Packages」に「japanese-menu」と入力し検索すると、
パッケージの検索結果が下に表示されますので、「Install」をクリックしてください。
インストールが終わると日本語化が完了です。簡単ですね。
このようにATOMは、目的に応じてパッケージをインストールすることで
自分好みにカスタマイズができる万能エディタになっています。
フォントの設定
次は、フォントの設定をしてみましょう。
文字を扱うテキストエディタにとって、フォントの選定は重要な問題です。
個人的には「Consolas」というフォントが見やすいのでずっと使っています。
今回は、「Consolas」をインストールし設定してみます。
フォントデータの準備
「Consolas」は、こちらからダウンロードできます。
ATOM側の設定
メニューバーのATOMの「環境設定」をクリックして、設定画面を表示します。
左メニューから、エディタ設定を開いたのち、フォントの欄にFontFamilyの値を”Consolas”として設定します。
設定後フォントが変わっていることを確認しましょう。
その他 エディタ設定
フォントの設定は前述にご紹介しましたが、その他にも行間などエディタの設定が変更できます。
今回は僕の好みで以下の用にカスタマイズしてみました。
font-size：13
line-height：1.3
タブ幅：4
追加でチェックを入れた項目
- 最終行を超えてスクロール
- Show Indent Guide（インデントガイドの表示）
- Show Invisible（不可視文字を表示）
上の３項目に追加でチェックを入れます。
画面の真ん中の白い線消す
デフォルトだとエディタ画面には白い線が表示されいます。
桁数の目安となる線ですが、要らない人には要らないので消したいと思います。
設定からパッケージのWrap Guideを見つけて、Disableする。これだけです。
これですっきり線が消えて見やすくなりました。
テーマの変更
使う人にとってテーマの選択は様々だと思います。
はっきりくっきりしたカラーが読みやすいとか、逆にコントラストが強すぎて目が疲れるとか。
自分にあったテーマの変更方法は、
メニューバーのATOMの「環境設定」をクリックして、設定画面から変更できます。
設定画面から「テーマ」を選択すると、そこからインターフェースと
シンタックステーマが選べるようになっていますので、自由に選んでお好みのテイストに調整してみてください。
シンタックステーマ：編集画面に適用されるテーマ
インターフェース ：それ以外に適用されるテーマ
デフォルトのテーマで満足がいかない方は、テーマをインストールすることも可能です。
Atomにはたくさんのテーマが用意されているので、
『ATOM テーマ』で検索すると、たくさんの方々がご紹介してくださっています。
自分にあったテーマを探してインストールしてみてください。
あると便利なおすすめパッケージ
おすすめパッケージをご紹介します。
割と定番なパッケージなので導入を検討してはいかがでしょうか。
project-manager
プロジェクトの管理をスムーズに行えるようにしてくれるパッケージです。
複数の「プロジェクト」を登録して切り替えを行えるようにします。
file-icons
この「file-icons」は、デフォルトのアイコンをカラフルなカラーに変えてくれます。
見やすくなって視認性はアップ。時間短縮できるかも。
highlight-selected
特定の文字列にカーソルを当てると、同じファイル内の同じ文字列がハイライトされます。
ファイル内で定義した変数がどこで使われているかなど、簡単にチェックできます。
autocomplete-plus
ある程度文字を打っている間に候補がサジェストされるようになります。
autocomplete-paths
パス名を自動補完してくれるパッケージです。autocomplete-plusと一緒に使うと便利です。
emmet
HTML、CSSのコーディングをサポートしてくれるプラグイン。
慣れるのに少し癖はありますが、独自の省略記法をつかって、スムーズにコーディングができます。
emmetには他にもたくさんの省略記法がありますので、
『Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫』など参考に使ってみてください。
bracket-matcher
開始タグと閉じタグをハイライト表示してくれるパッケージです。
htmlなどでどのタブがどれと対応しているのか見やすくなってわかりやすいです。
Minimap
スクロールバーの部分にミニマップを表示させることができます。
minimap-autohide
Minimapを自動で表示、非表示にしてくれるパッケージ。
コードを書くときはminimapは邪魔なのであると便利。
tag
マークアップ時に </ と入れると前のタグの閉じタグを入れてくれるパッケージ。
color-picker
カラーピッカー機能を追加するパッケージ。
ATOM よく使うショートカット一覧
WindowsとMacの両方のショートカットをまとめてみたので参考にご覧ください。
| 操作 | Windows | Mac |
|---|---|---|
| 単語を選択 | Ctrl + D | ⌘ + D |
| 単語の末尾に移動 | Alt + F | option + F |
| 単語の先頭に移動 | Alt + B | option + B |
| 行の末尾に移動 | End | control + E |
| 複数箇所選択 | Ctrl + クリック | ⌘ + クリック |
| 行の選択 | Ctrl + L | ⌘ + L |
| 行の削除 | Ctrl + Shift + K | control + shift + K |
| 行ごと移動 | Ctrl + 上矢印キー or 下矢印キー | control + ⌘ + 上矢印キー or 下矢印キー |
| 行ごと下の行へコピー | Ctrl + Shift + D | ⌘ + shift + D |
| 行の下に空行を挿入 | Ctrl + Enter | ⌘ + return |
| 行の上に空行を挿入 | Ctrl + Shift + Enter | ⌘ + shift + return |
| コメントアウト | Ctrl + / | ⌘ + / |
※1 Ctrl か ⌘ を押した状態で D キーを押すたびに同じ単語を複数選択が出来ます。
まとめ
長くなりましたが、いかがでしたでしょうか。
あのGitHub社が提供元なだけあって、高機能かつ安定したテキストエディターであると言えると思います。
初心者の方でも、比較的簡単に使えるようにデザインされていますので、自分好みにカスタマイズしてみてはいかがでしょうか。
今回は、ATOMを紹介しましたが自分には合わないと思われる方、ほかにもSublime TextやAdobeからリリースされたBracketsなど高機能エディタはたくさんありますので、いろいろ試してみるのもいいと思います。
後藤紳也
この記事を書いた人元美容師でありながら、デザイン業界への転身を果たすため、独学でWebを猛勉強。谷川の最初の相棒として、AND SPACEの草創期から会社を支え続けてきた。基本的に心穏やかな食いしん坊キャラで、「ゴッちゃん」もしくは「ゴトさん」の呼び名で親しまれる、うちのWe部の番人。無駄のない、丁寧で美しいソースコードに誰もが一目を置く。その安定感とクオリティは、社内外からの信頼の厚さにもつながっており、巷では彼を「後藤大明神」と呼ぶとか呼ばないとか…。ご鎮座されるその席に、ニ礼二拍手一礼。
