このページの本文へ

便利すぎて笑った!Atomの爆速コーディング技を海外エンジニアに教わった

2016年06月28日 23時00分更新

文●Mike Street

  • この記事をはてなブックマークに追加
本文印刷
近ごろ超人気のエディター「Atom」、もう使ってます? 押さえておくとコーディングがどんどん速くなる便利なショートカット、使い方を海外のエンジニアにこっそり教えてもらいました。

00

Atomは、GitHubチームが発表しサポートしているコードエディターです。2014年のリリース後、「Sublime Textの競合エディター」として月間ユーザー数110万人を記録しました。しかし、拡張、カスタマイズ、修正が容易であることを考えれば、驚くほどのことではありません。多くの開発者が現在、このIDEのファンとなっています。

Atomは普及しているにも関わらず、有能な開発者でさえ、しばしば、作業をするにあたって回り道をしたり、真のポテンシャルを知らずにいます。記事では、Atomのワークフローが向上するコツを紹介します。記事を読み終える頃には、少なくとも1つは「これこそは!」という新しい技を習得してもらえるとうれしいです。

基本すぎるTipsのおさらい

Atomの一般的な使い方のTipsを紹介します。利用可能なオプション、IDEの機能、メニュー設定などについてです。すべてのメニューオプションを知っているに越したことはありません。これまで知らなかった機能が見つかるかもしれません。

複数のカーソル

Atomのもっともすばらしい機能の1つに、複数カーソルのサポートが挙げられます。この機能を使うと、文書内の任意の複数行に、1回でいろいろなことを入力できます。使っているマシンがMacであればCmd(command)キーを、Windows/LinuxであればCtrlキーを押しながらタイピングしたいすべての場所をクリックするだけです。複数のカーソルを使う方法はほかにもありますが、キーボードショートカットの項で後述します。

01

自動インデント

もどかしいのは、コードをほかからコピーした場合に、インデントがそこらじゅうに入ってしまう点です。うれしいことに、Atomではこの問題を回避できます。対象のコードを選択し、Edit > Lines > Auto Indentへと進むと、対象ファイルのインデント設定をコピーでき、コードを修正できます。

インデントの修正をスピードアップするために、キーボードのショートカットをカスタマイズし、画面上のどこでもCtrl + Cmd+]を使えるようにしました。Windowsは、Ctrl + Alt +]にはすでに別のショートカットが割り当てられているいるので、正確にはCtrl + Shift +]ですが、私はCtrl +}を割り当てました。

ショートカットのカスタマイズは、Macの場合はAtom > Keymap、Windows/Linuxの場合はFile > Settings > Keybindings > Keymapと進み、以下のコードを貼り付けます。

Macの場合
'atom-text-editor':
    'ctrl-cmd-]': 'editor:auto-indent'
WindowsまたはLinuxの場合
'atom-text-editor':
    'ctrl-}': 'editor:auto-indent'

非表示部を表示する

文書や行に正しいインデントが設定されているかを確認するために、非表示部を表示します。スペースは···、タブは»、改行は¬と表示されます。スペースの適用されたタブや空白を入れた場所を正確に把握する助けとなります。

非表示部を表示すると、はじめは画面を「うるさく」感じるでしょうが、すぐに慣れます。いまでは個人的には大事な機能だと思えるようになりました。

この設定は、Macの場合はAtom、Windows/Linuxの場合はFileからPreferences > Show Invisibles(下にスクロール)です。

Soft wrap

私は左右上下にスクロールするのが嫌いなので、一方向にのみ動くように固定するために、AtomのSoft wrapを有効にしています。この設定をしておけば何を入力しても画面の端からはみ出さすことなく折り返して表示されます。Soft wrapで行を折り返すと、折り返した行を1つ前の行のインデントと同じ位置に調整し、ガーターの行番号をと置き換えてくれます。

このオプションを有効にするには、Show invisibleoptionから数回チェックボックスを選択するだけです。設定は、Macの場合はAtom、Windows/Linuxの場合はFileからPreferences > Show Invisibles(下にスクロール)でSoft Wrapを選択するだけです。

文字の大文字・小文字変換

ときにはテキストの文字変換を間違う場合もあります。すべて大文字にしたい場合もあれば、目立ちすぎる文書をすべて小文字に変換する必要があるかもしれません。Edit > Textへと進めば優れたテキスト操作ツールがあり、大文字と小文字の変換機能もあります。

1464357957case

パッケージはとにかく試す、ダメなら外す

Atomが選ばれる理由に、パッケージという機能があります。Atomのすごいところはなんでもすべてインストールしたり、変更を加えられる点です。インストールすべき良質なプラグインは、すでにほかの記事でも紹介されているため、ここではやめておきます。

その代わり、偶然見つけたプラグインはすべて試しにインストールすることを提案します。その上で、あまり良いと思わなかったもの(または起動時間を長くしてしまうもの)をアンインストールするのが良いでしょう。Settings > Packagesと進み、インストールされた拡張機能をクリックすれば、起動時間が何ミリ秒長くなるかが分かります。

私が日々使っている、他のブログ記事にはあまり投稿されていないパッケージを以下に少しだけ紹介します。

必ず覚えたいキーボードショートカット

私はキーボードショートカットが大好きです。利用しているプログラム上で試しに使って学ばずにはいられません(Photoshop利用時にキーボードショートカットを使う以外のほかの方法が思いつかないものも多いです)。

使わないキーボードショートカットを忘れるのは当然です。一方で、常に使うものは忘れません。以下に紹介したキーボードショートカットは、少なくとも1時間に1回は使うものです。生命線とも言えるものです。

行の複製

Cmd + Shift + D (Mac)
Ctrl + Shift + D (Windows/Linux)

仮にキーボードショートカットにメダルを与えることがあるとしたら、おそらく金メダルです。私はいつも使って、カーソルを行のどこにでも配置・複製しています。

03

CSSセレクタ、グラディエント、テーブルセルを複製するのに非常に役立ちます。もちろん、複数の行を一度に複製もできます。複製するには複数行を強調するか、複数カーソルを利用します。

04

現在選択中の行の上または下へ移動

Cmd + Ctrl + ↑または (Mac)
Ctrl + ↑または (Windows/Linux)

先ほど紹介した行複製と組み合わせると効果的です。カーソルがどこにあっても、現在選択中の行を行の上または下に移動できます。

05

複数の行を選択後、タグやカッコ内をクリックしてから、ほかの場所をクリックすると、選択したかたまり全体が移動し(さらに自動インデントが適用され)ます。

第二候補の文字の選択

Cmd + D (Mac)
Ctrl + D (Windows/Linux)

強調表示された言葉や、第二候補の言葉または文字を選択できます。自動生成された複数のカーソルを使って、強調表示された文字や言葉を消去、編集または更新できます。

06

変換対象文字の検索や置換機能を使わずに値やプロパティを少し更新したいときに特に役立ちます。

第二候補の文字の選択解除

Cmd + U (Mac)
Ctrl + U (Windows/Linux)

第二候補の文字を選択していると、やりすぎてしまう場合があります。このキーボードショットカットで直前に選択した文字を逆順で解除できます。

07

候補となるすべての文字を選択

Cmd + Ctrl + G (Mac)
Alt + F3 (Windows/Linux)

CmdまたはCtrl + Dをいちいち使わずに文書内のすべての候補となる文字をまとめて編集したいときもあります。このキーボードショートカットは、選択した文字の候補になる文字すべてを選択します(注意:選択範囲を広げすぎるとAtomの動作が遅くなります!)。

08

コメントのオン・オフ切り替え

Cmd + / (Mac)
Ctrl + / (Windows/Linux)

行または行のかたまりにコメントを付けたい場合もあります。このキーボードショートカットを使えば、どのような言語を使っていても、その言語の正しいコメント用シンタックスで現在の行(または選択されている行)に適切にコメントできます。もう<!--/*などは忘れてしまってOKです。

09

(原文:12 Favorite Atom Tips and Shortcuts to Improve Your Workflow

[翻訳:中村文也]
[編集:Livit

Web Professionalトップへ

WebProfessional 新着記事