Cloud9を使って、ファイルやフォルダを作成してみましょう。
ファイル数の多いWebアプリケーションやサイトを作る時に重宝するファイル内検索・ファイル検索方法も解説します。
実際にアプリ開発を始めると、目的のコードを膨大なフォルダやファイルの中から手作業で探すことは大変な時間のロスになりますし、 誤って中身を変更してしまいエラーの原因にもなりえます。 スムーズなコーディングの為にも覚えておいてほしい機能です。
Cloud9 IDE左側にある環境ウィンドウから、新規フォルダ・新規ファイルを作成することができます。
手順は以下の2stepです。
1.フォルダもしくはファイルを作りたい階層で右クリック
2.メニューからNew FileもしくはNew Folderを選択
環境ディレクトリ(●●/environment)直下に「mytest」フォルダを作成します。
更に、mytestフォルダの中に「test.html」ファイルを新規作成します。
mytestフォルダを右クリックして、New Fileから作成して下さい。
フォルダやファイル名の変更、削除もファイルナビゲータの右クリックメニューで行なえます。
ファイル名を「new.html」に変更してみましょう。
Renameを選んで、ファイル名を打ち替えます。
バックアップとして、作成したファイルやフォルダをダウンロードしたいときもあるかもしれません。
フォルダ/ファイルのダウンロードも、同じくファイルナビゲータの右クリックメニューから行えます。
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、もしくは以下のショートカットで検索と置換バーを表示させます。
【ファイル内検索】
左側、初期状態で「Find」と書かれている部分に、検索したいワードを入力すると一致する部分がハイライトされます。
一致箇所が複数ある場合は、<と>アイコンで切り替えます。
検索した「Rails」という言葉を「Ruby on Rails」に置き換えてみましょう。
検索・置換バーの右側、空の状態だと「Replace With」と書かれている部分が、置き換えたいワードの入力欄です。
Ruby on Railsと入力してください。
Replaceボタンをクリックすると、選択中の検索結果箇所のみ置き換えられます。
検索した結果の全てを置き換える場合は、ALLボタンを使います。
※一致した言葉を機械的に置き換えるため、上のように重複する可能性があります。実際に使用する場合は、その点に注意して下さい。
今度はプロジェクト全体から、特定のワードを検索してみましょう。
メニューバーのFind > Find in File、もしくは以下のショートカットで全ファイル対象の検索/置換バーを表示させます。
【全ファイル内から検索】
全ファイル対象の検索/置換バーには、検索対象にするファイルの種類・フォルダの設定欄があります。
この設定で、ワークスペース内すべてのhtmlファイルから「information」というワードを検索してくれます。
Findボタンをクリックしてみましょう。
Search Resultsというタブが現れ、検索結果が表示されます。
プロジェクト全体で一括置換もできます。
検索・置換バーの右側、Replace Withと表示されている部分を使います。
置き換えたいワードを入力し、ReplaceボタンをクリックすればOK。
先程検索したinformationを、大文字「INFORMATION」に置換してみましょう。
検索結果(Search Results)の表示が、「informationを検索して、INFORMATIONに置き換えました」というようなメッセージに変わっています。
メッセージの下には、該当ファイルと該当箇所が表示されています。
中身ではなく「ファイルを探したい」という事もありますよね。
例えば、先程置換してSearch Resultsに表示されている404.htmlを確認したい場合。
ファイルパスを見ながら、フォルダを1つずつ開いていくと時間がかかりますし、面倒です。
今後、Railsアプリ開発を行う際にも「〇〇のコントローラファイルに追記」や「〇〇のモデルファイルに追記」など、ファイルを探して編集する場面が多くあります。ファイル探しに時間がかかってしまうと、もったいないです。
Cloud9 IDEのファイル検索機能を活用して、労力を削減しましょう。
ファイル検索は環境ディレクトリ(ファイルナビゲータ)の一番上にある検索ボックスで行います。
探したいファイル名のはじまり、404と入力してください。
タブ、ファイル、コマンドなど、項目ごとに一致するものが表示されています。
これでも探せはしますが、ファイルを探したい、と決まっている場合は見にくいですよね。
そんな時には、ファイル検索だけに絞って検索することもできます。
以下のショートカットで、ファイル検索だけを行う検索バーを起動できます。
【ファイル検索のみ行う】
404.htmlを開いて、informationが大文字に置換されているか確認してください。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。