【Rails基礎講座 1】Cloud9入門 >
Cloud9とインターフェイス2

Cloud9とインターフェイス2

前回のレッスンではCloud9のインターフェイスの概要とインデントや文字サイズの変更などを解説しました。今回のレッスンではファイルやフォルダの作成、 実際にコーディングをする際に役立つ補完機能やショートカットキーなどについて学びます。

吉田先生

一度に全て覚える必要はありませんが、 今後のプログラミングで必ず役たつ機能ですので1つずつ実際に使用して使いこなしていきましょう。

ファイルナビゲータ

このチャプターではファイルナビゲータでよく使う操作や、ショートカットを解説します。アプリ開発を行う上で、頻繁にでてくる処理の為しっかりと理解しましょう。

1.新規ファイル・フォルダの作成

2.既存フォルダへの新規ファイル追加

既存のフォルダに新しくファイルを追加したい場合は、フォルダの上で右クリック→New Fileを選択します。

出来上がったファイルに名前を付ければ完成です。

3.新規フォルダ作成

またフォルダそのものを新規で作成する場合は、ファイルナビゲータの上で右クリック→New Folderを選択し、フォルダに名前をつければ完成です。

4.ファイル名変更・削除/ファイルやフォルダのダウンロード 

ちなみにファイル名の変更や、消去もこのファイルナビゲータ上で行います。また、ファイルやフォルダのダウンロードもファイルナビゲータから可能です。

ファイルナビゲータでの検索

今後、アプリ開発を行う際に、「〇〇のコントローラファイルに追記」や「〇〇のモデルファイルに追記」というようコードの追加や変更を行うことがたくさんあります。その時に、毎回ファイルナビゲータのフォルダを1つずつ確認してファイルを探すのは時間がかかりますし、目的のファイルがどこにあるか検討がつかないようなこともでてくるでしょう。ファイルを検索する際は、Workspace上でショートカットキーを使います。

1.ショートカットキー

Windowsの方はCtr+E

Macの方は  ⌘+E

で検索窓がでてきます。ここに目的のファイル名を入力して検索します。なお、ファイル名は一部のみでも検索可能です。

    

課題

不要なファイルは削除して以下のフォルダ/ファイルを作成しましょう。  

テキストエディタ

  

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

補完機

補完機能とはコーディングの際にTABキーを押すことで、タグの一部を記述した状態からコーディングを補完してくれる機能のことです。実際に確認してみましょう。

1.補完機能の確認

新しくtest.htmlというファイルを作成してください。test.htmlに「html」とだけ入力しTABキーを押してみましょう。 

 このようにタグを囲む<>や終了タグを補完してくれるとても便利な機能です。     

CSSのコードヒント

cssを途中まで書くとヒントが表示される機能です。こちらも実際に確認しましょう。前章の課題で作成したstyle.cssのファイルを開いてください。bodyの背景をグレー(#ffffff)に設定したい場合のコードは

 

body {

background-color: #ffffff;

}

ですね.ではこのコードを実際にスタイルシートに書いてみましょう。

2.コードヒントの確認

body{}の中にbackと打った時点で、エディタからコードのヒントが表示されます。

 補完機能と同様にコーディングの際の時短だけではなく、コードの打ち間違いも防ぐことができるという利点があります。     

インデント

タブサイズ変更の章でもお伝えしたように、複数のタグが入れ子になっている場合に、コードを見やすくする為にも内側のタグにはインデントをつけます。例えば、リストを作る場合に書きのようなコードを使用することがあります。

 

<ul>

<li> </li>

<li> </li>

</ul>

 

&lt;li>

タグにインデントをつけたいところですが、1つ1つではなくまとめてインデントを設定する方法があります。test.htmlに上記のコードを記述してください。

1.まとめてインデントを追加

インデントを追加したい部分(今回であれば

&lt;li>

タグ)を選択し、TABキーを押すとタブサイズで設定したインデントが追加されます。

 コーディングをしているとタグの追加や削除を頻繁に行います。その際に、まとめてインデントを追加(右インデント)したり、削除(左インデント)できるので便利です。     

アンドゥ/リドゥ

アンドゥとは「元に戻す」ことです。またリドゥとは「元に戻すを取り消す」ことです。例えば先ほどのインデントの設定をするために、を選択した状態で誤ってDELETEキーを押してしまったとします。 そのような場合でもアンドゥ/リドゥを使用すれば元の状態に戻すことができます。

コメントアウト/コメントイン

RailsのファイルにはGemfileのように元々コードや文章が書かれている場合があります。

しかし、よく見てみると文頭に#がついているものがあります。たとえば6行目の

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'

などです。 これはコメントアウトといって、文頭に#をつけたり、コードを

/* */

で囲むことでコードを無効化しています。 Railsのビデオでも

raise params.inspect

というコードを使用して、データベースに送られている内容が正しいものかどうか確認した後このコードの文頭に#をつけてコメントアウトしていましたね

 

1.ショートカットキー

コメントアウト/コメントインはともにショートカットキーで実行できます。

2.カーソルの移動

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

3.文字選択、単語選択、行選択、複数行選択

 

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

同一文字選択

Railsの勉強を始める前に、HTMLなどでコーディングの経験のある方もいるかもしれません。「この文章はインパクトをつけたくてh1タグにしたけど、ちょっとくどいからやっぱりh2くらいに変更したい」「strongタグで囲っていた部分をpタグにしたい」などの場合、開始タグと終了タグをそれぞれ変更していた方も多いのではないでしょうか。1か所や2か所ならば平気ですが、数が増えてくると面倒ですよね。

そのときは同一文字選択機能を使いましょう。

1.同一文字選択

課題

    

index.htmlなどに実際にコードを書いてみましょう。

    

このチャプターで習ったことを実践してみてください。

    

補完機能

    

ブラウザで確認

    

インデント

    

アンドゥ/リドゥ

    

コメントアウト/コメントイン

    

カーソルの移動

    

単語選択、行選択

    

同一文字選択

まとめ

Cloud9とインターフェイスについては以上です。お疲れ様でした。ショートカットキーは複数あり一気に覚えるのは大変かと思います。実際にアプリ開発の中で使いながら覚えていきましょう。次のレッスンではいよいよターミナルの使い方を勉強します。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る