エディターの「ATOM」を使用して、サクッとソース内を検索する方法と文字の置き換え（置換）の方法をご紹介します。
プログラムを書いていて、ソースの中から見つけたいものが見つからない！なんて、経験はありませんか？
この辺に書いたはず。と思っても見つけられなかったり、ソースを追いかけすぎて目が疲れたりなんてことも日常茶飯事…
さらに、意気揚々と書いていたソース内のスペルが間違っていたΣ（・□・；）一気に直したい！、なんてことに出くわしたり…
私は、HTMLもCSSもエディターとは何かも、全く知らずに興味本位でプログラミングの世界に飛び込みました。しかも、エクセルやワードもほぼ使えない…
そしてもちろん検索方法も全く知らず、学習を始めた頃は必死に目視で検索ワードを探していました。そんな状態なので、文字色ひとつ変えるにしても、とてつもない時間を費やしていました(^◇^;)
私のようなパソコン音痴の方も、検索と置換を使って、少しでも時短ができるようにお手伝いができたらいいなと思っています。
Atomでソース内検索
まずは、Atomでソース内の検索をする方法です。ソース内の検索は、開いているソースのみから検索する方法です。
例えば、sample というフォルダ内に index.html とcontents.html があったとして、Atomで参照しているページが index.html なら index.html の中だけ見て検索します。
１）Atomのメニューバーから「検索」をクリック
２）「検索… 」をクリック
３）下部に検索バーが出てきます
４）検索文字列のBOX（以下検索BOX）に検索したい文字を入力
・右側に検索結果で何文字ヒットしているか表示されます。
５）「検索」ボタンをクリック
・クリックする毎に、ソース内の検索したキーワードに移動します。（青矢印）
・総数分の何個目の検索ワードか表示されます。
ページ内の検索をする場合ショートカットキーが便利です！
Macの場合・・・ command + F
Windowsの場合・・・control + F
Atomでソース内置換
先ほど検索したキーワードを、いちいち文字を消して書き直したり、コピペ作業をしたりしなくても置換機能を使って置き換えることができます。
それでは、ソース内検索の続きから
６）置換文字列のBOX（以下置換BOX）に置き換えたい文字列を入力
７）今回はサンプルとして images（検索BOXに記入） を
img（置換BOXに記入）に変更します。
８）①「検索」をクリック ②「置換」をクリック
青枠に囲まれた「images」を「img」に置き換えます。
９）オレンジ枠の部分が８）の置換で置き換えた部分です。
再度「置換」ボタンをクリックすると、青枠部分の「images」が置き換わります。
一つずつ置換ボタンをクリックしながら変更すれば、間違えて変更しちゃったΣ（・□・；）なんてことも、防げるね！
Atomでプロジェクト内検索
プロジェクト内検索とは、フォルダ内全てから検索できる機能です。
例えば、sample というフォルダ内に index.html とcontents.html があったとして、両方のソースで一致しているものを検索します。
今回はサンプルとして、「crafts.site」というプロジェクトフォルダ内で「img」を「image」に変更します。
１）プロジェクトフォルダをAtomで開きます。
「ファイル」→「プロジェクトフォルダを追加」をクリック
２）追加したいフォルダを選択→「開く」をクリック
３）プロジェクトフォルダがAtomに反映されます
POINTフォルダをドラック＆ドロップしてもOKです！
４）検索BOXに検索したい文字（検索ワード）を入力（※今回はimg）
→「すべて検索」をクリック
５）プロジェクトフォルダ内にある全ての検索ワードが表示されます
６）クリックすると、ソースのページファイルが開き、一発で該当箇所へジャンプします
↓赤い矢印部分をクリックすると・・・
赤い下線部が該当箇所です。
プロジェクト内検索を使うと、どのソースに検索ワードが入っているか簡単に調べられるね！
Atomでプロジェクト内置換
プロジェクト内の検索をして、そのまま文字を置き換えることもできます。
プロジェクト内の全てのソースの文字を一気に置き換えることができるので、写真を保存しているフォルダまでの階層が当初の予定と変わってしまい「./」を「../」に変えたい！でも、どこに書いたかわからない´д` ;なんて時にとっても便利です！
それでは、プロジェクト内検索の続きから。
７）検索BOXに検索したい文字、置換BOXに置き換えたい文字を入力
赤く表示されているものが緑の表示に置き換わる確認です。（すべて置換を押すまでは置換されません）
８）「すべて置換」をクリック
緑色で表示されている文字に全て置き換わります。
指定した文字が全て一気に置換されます。
Macのcommand+z や Windowsのcontrol+z で戻ろうとしても戻れないので、注意が必要です！
まとめ
最後までお読みいただき、ありがとうございます。
検索や置換を上手に使うことによって、大幅に時間を短縮して作業を進めることができます。
ローマ字と数字の羅列が多い中、探したい文字を目視で探していたら、本当にとめどない時間を費やしてしまいます。
学習中にしろ、お仕事をするにしろ、時間管理はとても大切です。
「Time is money」ですからね(^^)
Atomの機能を上手に使って、効率よく作業を進めましょう！
検索や置換機能は他のエディターにも標準で入っていますので、Atomじゃない！という方もメニューバーから探してみてください。
フリーランスエンジニアとして、Web制作・執筆活動を行っている私が、実際に仕事をしていく中で感じた気づき、あっ！これ便利！と思ったことや本の感想などをご紹介する、学習のヒントをお届けしました。次回もお楽しみに！