Cloud9のエディタ機能とショートカット

今回のレッスンは、Cloud9のエディタについて解説します。
学習・制作を進めるにあたって、作業効率化のために活用したい機能とショートカットを紹介します。

• 便利なエディタ機能
• 1.コード補完と展開
• 2.CSSコードヒント
• 必ず使う5つの操作とショートカットキー
• 1.カーソル移動
• 2.選択
• 3.アンドゥ/リドゥ
• 4.インデント
• 5.コメントアウト/アンコメント
• Cloud9ショートカットキーまとめ
• タブ移動などのショートカットについて

便利なエディタ機能

テキストエディタは実際にコードを入力する場所です。
コードの入力の際に予測変換をしてくれたり、スピーディーなコーディングを助けてくれる便利な機能が用意されています。どんどん活用してコーディングを実践していきましょう。

1.コード補完と展開

テスト用フォルダ（mytest）の中に、新しくtest.htmlというファイルを作成してください。
test.htmlを開いて、「html」とだけ入力してTabキーを押してみましょう。

DOCTYPE宣言とhtmlタグが記述された状態になります。

bodyやdivと打ち込んでTabキーを押すと、終了タグが補完されます。

また、cloud9エディタでは、最初からemmetも使えます。
以下のようにタグ名.クラス名（もしくは#id名）を入力してtabキーで展開。
>を使って入れ子構造を一気に作成したりすることもできます。
コーディング速度が上がりますね。

2.CSSコードヒント

cssを途中まで書くとヒントが表示される機能です。
こちらも実際に確認しましょう。
テストフォルダ（mytest）の中に、style.cssファイルを新規作成して下さい。

style.cssで、bodyに背景色を設定します。
CSSプロパティを入力しはじめると、入力した文字から始まる候補が表示されます。
これがコードヒントです。

表示されたコードヒントは、上下キーで選択できます。
Tabキーで決定すると、選択したコードが挿入されます。

補完機能と同様に、コーディングの際の時短に役立ってくれるでしょう。
コードの打ち間違いも防ぐことができるという利点もあります。

必ず使う5つの操作とショートカットキー

Cloud9 IDEで制作を進めるのであれば必ず使う5つの操作と、それぞれのショートカットキーを紹介します。
ショートカットだけ分かれば良い、という方は後記のCloud9ショートカットキーまとめをご覧ください。

※以下ではKeyboad Mode:Sublime設定で行っています。
キーボードの設定によっては、単語選択や1行選択のショートカットが逆の設定になっている、キーが異なる場合もあります。自分のPCではどうなっているか確認してみましょう。

1.カーソル移動

カーソルの移動にショートカットキーを使うと、作業時間短縮が狙えます。
コードを打って、マウスに持ち替えてカーソルを移動したり、矢印キーのみで移動するよりも断然早く目的個所にカーソルを移動することができます。

普通の移動と単語移動

普通に1つずつカーソルを移動させるときは上下左右キーのみを押します。
単語移動はWindowsの場合Ctrl+左右キー、Macの場合はOption+左右キーです。

行の最初/最後に移動

Windowsの場合Alt キー、Macの場合はcommandキーを押しながら、左右キーを押すとカーソルがある行の最初もしくは最後に移動できます。

ファイルの1行目/最終行に移動

以下のショートカットキーを使うと、開いているファイルの最初、最後に移動ができます。

2.選択

コピー＆ペーストなどでも使う“選択”は、Shiftキーを押しながら左右キーのどちらかで行います。
行選択はWindows、Mac共にShift + 上もしくは下キーです。

Shiftキーを押しながらでも選択は出来ますが、ショートカットキーでは以下のような便利機能もあります。

単語毎での選択

Windowsの場合Ctrlキー、Macの場合はOption キーを押しながら、Shift+ 左もしくは右キーで、単語単位の選択ができます。

行の最初/行の最後まで選択

カーソルがある位置から、その行の最初もしくは最後までを選択することもできます。
上下行を選択した時、半端な位置で選択範囲が終わってしまった時にも便利です。

【カーソル位置から行末までを選択】

• Windows:Alt + Shift + 右キー
• Mac:Command + Shift + 右キー

【カーソル位置から行頭までを選択】

• Windows:Alt + Shift + 左キー
• Mac:Command + Shift + 左キー

同一文字の複数選択

特定の文字もしくはワードを選択した状態で、Windowsの場合Ctrlキー、Macの場合はCommand キーを押しながら、Dを押すと、選択範囲と同じワードを複数選択できます。
タグやクラスを変更したい時に便利です。

【同一文字選択】

• Windows:Ctrl + D
• Mac:Command + D

同一文字選択はEscキーで解除します。

全選択

Windowsの場合Ctrlキー、Macの場合はCommand キーとAを同時に押すと、ファイル内全選択ができます。

3.アンドゥ/リドゥ

アンドゥとは「元に戻す」ことです。
また、リドゥとは「元に戻すを取り消す」ことです。
操作を間違えてしまった時などに、アンドゥ/リドゥを使用すればすぐ元の状態に戻すことができます。

どちらも、普段パソコンの操作でも使用したことがある機能ではないでしょうか。
ショートカットキーも、基本的に普段の操作と同じで大丈夫です。

4.インデント

インデントはTabキーで設定します。

複数行のインデント

『1.コード補完』の時に作成したtest.htmlで、ulタグを更に<div class="list">で囲おうとした場合。入れ子が深くなるので、ul部分にはインデントを追加しなくてはいけません。

タグを1つずつTabでずらしていくと大変です。
複数行選択してからTabキーを押して、一気にインデントを追加しましょう。

アウトデント

インデントを無くす（字下げを元に戻す）ことをアウトデントと言います。
DeleteやBackSpaceでもインデントは削除できますが、以下のショートカットでアウトデントができるので使用しましょう。

【アウトデントのショートカット】

Shift + Tab

アウトデントも複数行選択して行うと、一気に設定できます。
<div class="list">タグを削除して、インデントを整え直します。

5.コメントアウト/アンコメント

コメントアウトとは、決められた記号によってコードを無効化することです。
反対に、アンコメントは無効化していたコードを有効化する（コメントアウトするために使った記号を取り除く）ことを言います。

コメントアウトとアンコメントは、同じショートカットで実行できます。
test.htmlで試してみましょう。

【行ごとにコメントアウト/アンコメント】

• Windows:Ctrl + /
• Mac:Command + /

コメントアウトするのに使う記号の組み合わせは、言語によって異なります。
htmlなら<!-- と -->、cssなら/* と */。Ruby on Railsで使う.rbファイルでは、行頭に#を付けるとコメントアウトが出来ます。

ショートカットを使うと、自動でファイルにあったコメントアウトを選択してくれます。複数行でも一気にコメントアウトされますから、とても便利ですね。

Cloud9ショートカットキーまとめ

Cloud9 IDEのエディタでよく使うショートカットキーを位置にしました。
他のテキストエディタやパソコン全体でのショートカットキーと同じものも結構あります。

Windowsでのショートカットキー一覧は以下をご確認下さい。
MacOS Sublime キー割り当てリファレンス

Macでのショートカットキー一覧は以下をご確認下さい。
Windows/Linux Sublime キー割り当てリファレンス

タブ移動などのショートカットについて

上の表で、薄く背景色が入ったタブ移動など、一部のショートカットキーは使用できません。
これは、Chromeのショートカットが優先されているためです。

Google Chromeで以下の設定を行い、Cloud9の開き方を変えると使えるようになります。

1.メニューからショートカットを作成

2.ウインドウとして開くにチェックを入れて「作成」

3.別ウィンドウで起動する

2の設定後は、自動的に立ち上がります。
デスクトップにアイコンが作成されますので、次回以降はデスクトップアイコンからCloud9 IDEを開きます。

このように開くと、1つのアプリのような感覚で使用できます（PWAと言います）。通常のページとしてChromeで開いたときのようなタブ等もなくなり、ショートカットが競合せずに使えます。

Railsアプリを作成するときは、ファイル（タブ）を行ったり来たりすることも多いので、こちらの開き方をしたほうが便利かもしれません。