Cloud9を使って、ファイルやフォルダを作成してみましょう。 ファイル数の多いWebアプリケーションやサイトを作る時に重宝するファイル内検索・ファイル検索方法も解説します。
吉田先生
実際にアプリ開発を始めると、目的のコードを膨大なフォルダやファイルの中から手作業で探すことは大変な時間のロスになりますし、 誤って中身を変更してしまいエラーの原因にもなりえます。 スムーズなコーディングの為にも覚えておいてほしい機能です。
1.新規フォルダ/ファイル作成
Cloud9 IDE左側にある環境ウィンドウから、新規フォルダ・新規ファイルを作成することができます。
手順は以下の2stepです。 1.フォルダもしくはファイルを作りたい階層で右クリック 2.メニューからNew FileもしくはNew Folderを選択
環境ディレクトリ（●●/environment）直下に「mytest」フォルダを作成します。
更に、mytestフォルダの中に「test.html」ファイルを新規作成します。 mytestフォルダを右クリックして、New Fileから作成して下さい。
2.フォルダ/ファイル名変更、削除
フォルダやファイル名の変更、削除もファイルナビゲータの右クリックメニューで行なえます。
ファイル名を「new.html」に変更してみましょう。 Renameを選んで、ファイル名を打ち替えます。
3.ファイルやフォルダのダウンロード
バックアップとして、作成したファイルやフォルダをダウンロードしたいときもあるかもしれません。 フォルダ/ファイルのダウンロードも、同じくファイルナビゲータの右クリックメニューから行えます。
4.ファイル内検索
Railsに限らず、ファイル内に書かれているワードを検索・置換できると便利です。 例えば、CSSクラス名からどのようなスタイル指定をしていたか確認する、表記を一括で変更する、などの場合で効率が良くなります。
簡単なコードで検索・置換の使い方を確認しましょう。
new.htmlを開いて、以下のコードを貼り付けてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1>テストファイルです</h1>
<ul>
<li>Rails基礎編1</li>
<li>Rails基礎編2</li>
<li>Rails基礎編3</li>
<li>Rails応用編1</li>
<li>Rails応用編2</li>
<li>Rails応用編3</li>
</ul>
</body>
</html>
メニューバーのFind > Find、もしくは以下のショートカットで検索と置換バーを表示させます。
【ファイル内検索】
- Windows:Ctrl + F
- Mac:Command + F
左側、初期状態で「Find」と書かれている部分に、検索したいワードを入力すると一致する部分がハイライトされます。
一致箇所が複数ある場合は、<と>アイコンで切り替えます。
5.検索結果の置換・全置換
検索した「Rails」という言葉を「Ruby on Rails」に置き換えてみましょう。
検索・置換バーの右側、空の状態だと「Replace With」と書かれている部分が、置き換えたいワードの入力欄です。 Ruby on Railsと入力してください。
Replaceボタンをクリックすると、選択中の検索結果箇所のみ置き換えられます。
検索した結果の全てを置き換える場合は、ALLボタンを使います。
※一致した言葉を機械的に置き換えるため、上のように重複する可能性があります。実際に使用する場合は、その点に注意して下さい。
6.プロジェクト内検索と置換
今度はプロジェクト全体から、特定のワードを検索してみましょう。 メニューバーのFind > Find in File、もしくは以下のショートカットで全ファイル対象の検索/置換バーを表示させます。
【全ファイル内から検索】
- Windows:Ctrl + Shift + F
- Mac:Command + Shift + F
全ファイル対象の検索/置換バーには、検索対象にするファイルの種類・フォルダの設定欄があります。
- 検索したいワード「information」
- ファイルの種類は「
*.html」 - 対象フォルダは「Environment」
この設定で、ワークスペース内すべてのhtmlファイルから「information」というワードを検索してくれます。 Findボタンをクリックしてみましょう。
Search Resultsというタブが現れ、検索結果が表示されます。
置換する場合
プロジェクト全体で一括置換もできます。 検索・置換バーの右側、Replace Withと表示されている部分を使います。 置き換えたいワードを入力し、ReplaceボタンをクリックすればOK。
先程検索したinformationを、大文字「INFORMATION」に置換してみましょう。
検索結果（Search Results）の表示が、「informationを検索して、INFORMATIONに置き換えました」というようなメッセージに変わっています。
メッセージの下には、該当ファイルと該当箇所が表示されています。
7.ファイルを探す
中身ではなく「ファイルを探したい」という事もありますよね。
例えば、先程置換してSearch Resultsに表示されている404.htmlを確認したい場合。
ファイルパスを見ながら、フォルダを１つずつ開いていくと時間がかかりますし、面倒です。
今後、Railsアプリ開発を行う際にも「〇〇のコントローラファイルに追記」や「〇〇のモデルファイルに追記」など、ファイルを探して編集する場面が多くあります。ファイル探しに時間がかかってしまうと、もったいないです。
Cloud9 IDEのファイル検索機能を活用して、労力を削減しましょう。
ファイル検索は環境ディレクトリ（ファイルナビゲータ）の一番上にある検索ボックスで行います。
探したいファイル名のはじまり、404と入力してください。
タブ、ファイル、コマンドなど、項目ごとに一致するものが表示されています。 これでも探せはしますが、ファイルを探したい、と決まっている場合は見にくいですよね。
そんな時には、ファイル検索だけに絞って検索することもできます。 以下のショートカットで、ファイル検索だけを行う検索バーを起動できます。
【ファイル検索のみ行う】
- Windows:Ctrl + E
- Mac:Command + E
404.htmlを開いて、informationが大文字に置換されているか確認してください。
