paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

毎日のMac作業で「CotEditor」を使うと、テキスト編集の次元が上がる

コードを書くときも、文章を書くときも、わたしにとって欠かせない機能といえば「一括置換」です。

たとえば、<p class="example">を<p class="example large">に置換したり、「全然」を「ぜんぜん」に置換したり。

複数箇所に同じような文字列がある場合、一つひとつ手直しなんてしていられませんよね。一括置換をすれば一瞬で置換できてしまいます。

では、一つのデータ内に次のような「複数の置換をしたい箇所」がある場合はどうしていますか?

  1. 牛乳 → ミルク
  2. パソコン → PC
  3. 胡麻 → ゴマ
  4. 葱 → ネギ
  5. ビーフ → 牛肉

もちろん、一括置換を5回繰り返してもいいのですが、どうせなら1回の動作でこの5つの置換を終わらせたいですよね。

それを可能にする方法として、Macのアプリ「CotEditor(コットエディター)」にある便利な機能「複数置換」を紹介します。

【目次】

paizaラーニング

CotEditorの複数置換とは?

ではCotEditorの複数置換がどういうものかを紹介しましょう(ダウンロードはこちら)。

こちらのアニメーション画像をご覧ください。

このなかでなにが起こっているのかというと、「複数置換」のウィンドウを出して「すべて置換」というボタンを押しただけで、あらかじめ設定していた以下の置換が一瞬でできました。

  • 俺 → 私
  • 勿論 → もちろん
  • イヌ → 犬
  • ネコ → 猫
  • こんな → このような
  • じゃあ → では
  • なんで → なぜ
  • サル → 猿
  • 嫌い → きらい
  • 意地悪 → いじわる
  • 。。。 → ……
  • 可愛い → かわいい
  • 無い → ない

一瞬すぎてなにが起こっているのかがわかりづらいですが、これが複数置換です。本来なら地味に時間のかかる作業があっけなく終わります。

「CotEditor」の複数置換の便利さがわかっていただけたでしょうか?

CotEditorなら「正規表現」もつかえる

さらにすごいことに、CotEditorの複数置換なら「正規表現」もつかえます。

正規表現をつかえば、コードをつかって高度な作業ができますよね。

たとえば<p class="example">ここに文章</p>にはさまれている文字列を変更することなく、<div class="example"><p>ここに文章</p></div>のように変更できます。

今度は、正規表現をつかった複数置換をアニメーション画像にしました。

このなかでは、ちょっとしたメモをWordPress用のhtmlコードに変換しています。

こちらが変更前の内容です。

【説明】
・A …… Aの説明
・B …… Bの説明
・C …… Cの説明

これを複数置換後には、次のような文字列に置き換えています。

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><th>A</th><td>Aの説明</td></tr><tr><th>B</th><td>Bの説明</td></tr><tr><th>C</th><td>Cの説明</td></tr></tbody></table><figcaption class="wp-element-caption">説明</figcaption></figure>
<!--/wp:table -->


複数置換では、正規表現をつかって次のように登録しました。

置換前 置換後
【(.+?)】 <figcaption class="wp-element-caption">$1</figcaption>
\n・ </td></tr><tr><th>
…… </th><td>
\A <!-- wp:table -->\n<figure class="wp-block-table"><table><tbody>
\Z </td></tr></tbody></table></figure>\n<!-- /wp:table -->\n\n
<!-- wp:table -->\n<figure class="wp-block-table"><table><tbody><figcaption class="wp-element-caption">(.+?)</figcaption></td></tr>(.+?)</tbody></table></figure>\n<!-- /wp:table --> <!-- wp:table -->\n<figure class="wp-block-table"><table><tbody>$2</tbody></table><figcaption class="wp-element-caption">$1</figcaption></figure>\n<!-- /wp:table -->

このようにCotEditorの複数置換と正規表現を組み合わせれば、今までなら人力で対応しなければならなかった「高度な単純作業」も自動化できます

便利な正規表現の一例

CotEditorで一括置換をつかうときに覚えておきたい正規表現も4つに限定して紹介しましょう。

まず、置換前の文字列としてつかう「(.+?)」は、なにかにはさまれた部分を抽出するときに活躍します。たとえば、上の例だと「【 」と「 】」にはさまれた部分に「(.+?)」を置き、「【(.+?)】」のように書いていますよね? これで「【 」と「 】」にはさまれた文字列はなんでも、という意味になります。

「(.+?)」で取得した文字列を置換後に吐き出すときは「$1」をつかいます。たとえば「【 】」を「《 》」に置き換えたければ、置換後のところに「《$1》」と書けばよいわけです。なお、「(.+?)」で取得した文字列が2つある場合、2つ目の「(.+?)」で取得した文字列は「$2」で吐き出せます。これを知っておけば「$1」と「$2」の位置を置き換えることもできるのです。

たとえば「<div><p class="headline">コピー</p><p>説明</p></div>」の「コピー」と「説明」を置き換えるのなら、置換前は「<div><p class="headline">(.+?)</p><p>(.+?)</p></div>」で、置換後は「<div><p class="headline">$2</p><p>$1</p></div>」で交換できます。

ほかに、置換前の文字列として「\A」を書けば、文章の一番前、「\Z」なら文章の一番最後という意味になります。つまり、一番前と一番最後に特定の文字列を挿入できるようになります。

正規表現はChatGPTをつかって書く

正規表現の話になりましたが、よくわからない人でもChatGPTをつかえば書けます。

たとえば、次のような簡易なプロンプトで十分でしょう。

CotEditorをつかって、テキストの一括置換をするときに以下のようにしたい。

<div><p class="headline">コピー</p><p>説明</p></div>

↓

<div><p class="headline">説明</p><p>コピー</p></div>


「コピー」と「説明」の部分はいろいろな文字列がくるため、正規表現をつかいたい。

どのように書けばいいですか?

もちろんうまくいかないこともありますが、わたしはChatGPTをつかっているうちに正規表現を覚えて、自分で書けるようになりました。

ちなみに単語登録を活用して「(.+?)」を「あny」に登録しています(「any=なんでも」だから)。

ぜひCotEditorの複数置換を利用して、すばやく文字列の置き換えができるようにしましょう!


(文:ヨス




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

paizaのおすすめコンテンツ

PPG proken プログラミングゲーム「初恋 プログラミング研究会〜海に行こうよ〜」 PPG Bingo プログラミングゲーム「コードレビューBINGO!!」
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.