Cloud9入門! ファイル操作・検索方法【Ruby on Rails7開発の準備】 | SkillhubAI(スキルハブエーアイ)

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

Cloud9を使って、ファイルやフォルダを作成してみましょう。Ruby on Railsなどを使って、ファイル数の多いWebアプリケーションやサイトを作る時に重宝するファイル内検索・ファイル検索方法も解説します。

なお、本記事では環境ウィンドウ(ファイルナビゲータ)での操作方法を紹介しています。 <!-- コマンド操作でのファイル作成・削除は下記の記事をご確認下さい。 -->

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

Cloud9 IDE左側にある環境ウィンドウから、新規フォルダ・新規ファイルを作成することができます。

手順は以下の2stepです。 1.フォルダもしくはファイルを作りたい階層で右クリック 2.メニューからNew FileもしくはNew Folderを選択 file

環境ディレクトリ(●●/environment)直下に「mytest」フォルダを作成します。

更に、mytestフォルダの中に「test.html」ファイルを新規作成します。 mytestフォルダを右クリックして、New Fileから作成して下さい。 file

2.フォルダ/ファイル名変更、削除

フォルダやファイル名の変更、削除もファイルナビゲータの右クリックメニューで行なえます。 file

ファイル名を「new.html」に変更してみましょう。 Renameを選んで、ファイル名を打ち替えます。 file

3.ファイルやフォルダのダウンロード

バックアップとして、作成したファイルやフォルダをダウンロードしたいときもあるかもしれません。フォルダ/ファイルのダウンロードも、同じくファイルナビゲータの右クリックメニューから行えます。 file

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>

file

メニューバーのFind > Find、もしくは以下のショートカットで検索と置換バーを表示させます。

【ファイル内検索】

  • Windows:Ctrl + F
  • Mac:Command + F

file file

左側、初期状態で「Find」と書かれている部分に、検索したいワードを入力すると一致する部分がハイライトされます。一致箇所が複数ある場合は、<>アイコンで切り替えます。

5.検索結果の置換・全置換

検索した「Rails」という言葉を「Ruby on Rails」に置き換えてみましょう。

検索・置換バーの右側、空の状態だと「Replace With」と書かれている部分が、置き換えたいワードの入力欄です。Ruby on Railsと入力してください。 file

Replaceボタンをクリックすると、選択中の検索結果箇所のみ置き換えられます。 file

検索した結果の全てを置き換える場合は、ALLボタンを使います。 file ※一致した言葉を機械的に置き換えるため、上のように重複する可能性があります。実際に使用する場合は、その点に注意して下さい。

6.プロジェクト内検索と置換

今度はプロジェクト全体から、特定のワードを検索してみましょう。 メニューバーのFind > Find in File、もしくは以下のショートカットで全ファイル対象の検索/置換バーを表示させます。

【全ファイル内から検索】

  • Windows:Ctrl + Shift + F
  • Mac:Command + Shift + F

file

全ファイル対象の検索/置換バーには、検索対象にするファイルの種類・フォルダの設定欄があります。 file

  • 検索したいワード「information」
  • ファイルの種類は「*.html
  • 対象フォルダは「Environment」

この設定で、ワークスペース内すべてのhtmlファイルから「information」というワードを検索してくれます。 Findボタンをクリックしてみましょう。 file

Search Resultsというタブが現れ、検索結果が表示されます。 file

置換する場合

プロジェクト全体で一括置換もできます。 検索・置換バーの右側、Replace Withと表示されている部分に置き換えたいワードを入力し、ReplaceボタンをクリックすればOKです。

先程検索したinformationを、大文字「INFORMATION」に置換してみましょう。 file

検索結果(Search Results)の表示が、「informationを検索して、INFORMATIONに置き換えました」というようなメッセージに変わっています。 file メッセージの下には、該当ファイルと該当箇所が表示されています。

7.ファイルを探す

中身ではなく「ファイルを探したい」という事もありますよね。 例えば、先程置換してSearch Resultsに表示されている404.htmlを確認したい場合。ファイルパスを見ながら、フォルダを1つずつ開いていくと時間がかかりますし、面倒です。

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

Cloud9 IDEのファイル検索機能を使いましょう。 ファイル検索は環境ディレクトリ(ファイルナビゲータ)の一番上にある検索ボックスで行います。探したいファイル名を入力してみましょう。 file タブ、ファイル、コマンドなど、項目ごとに一致するものが表示されています。 これでも探せはしますが、ファイルを探したい、と決まっている場合は見にくいですよね。

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

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

* Windows:Ctrl + E * Mac:Command + E

file

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


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

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

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

こちらもオススメ

ブログ記事を探す

検索

カテゴリーから探す