Cloud9入門! ファイル操作・検索方法【Ruby on Rails7開発の準備】

Cloud9を使って、ファイルやフォルダを作成してみましょう。Ruby on Railsなどを使って、ファイル数の多い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を確認したい場合。ファイルパスを見ながら、フォルダを1つずつ開いていくと時間がかかりますし、面倒です。

今後、Railsアプリ開発を行う際にも「〇〇のコントローラファイルに追記」や「〇〇のモデルファイルに追記」など、ファイルを探して編集する場面が多くあります。ファイル探しに時間がかかってしまうと、もったいないです。

Cloud9 IDEのファイル検索機能を使いましょう。
ファイル検索は環境ディレクトリ(ファイルナビゲータ)の一番上にある検索ボックスで行います。探したいファイル名を入力してみましょう。

タブ、ファイル、コマンドなど、項目ごとに一致するものが表示されています。
これでも探せはしますが、ファイルを探したい、と決まっている場合は見にくいですよね。

そんな時には、ファイル検索だけに絞って検索することもできます。
以下のショートカットで、ファイル検索だけを行う検索バーを起動できます。

【ファイル検索のみ行う】

  • Windows:Ctrl + E
  • Mac:Command + E

404.htmlを開いて、informationが大文字に置換されているか確認してみましょう。

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
4月28日まで

募集 人数
100名 (残りわずか)
×