【Tech Blog】JavaScript入門編！10分あればわかる置き換えと正規表現の活用方法

初めまして！
株式会社インタラクティブ・コミュニケーション・デザイン（以下ICD）の新米FE いとです！
20新卒として入社して早3年目になりました。
あっという間すぎますね。気持ち的にはまだまだ新人です（笑）
いくつか案件に参画した後、現在は新米フロントエンドエンジニアとして日々奮闘中です！
やりたいと思っていたフロントエンドエンジニアとして、遂に一歩踏み出すことができて嬉しいです！！

今回は私が基本的なJavaScriptの活用にチャレンジしたので、
そのご紹介とやってみた中で感じたことなどをお伝えしたいと思います！

概要

取得したデータを扱うプログラムを作成していると、
取得したデータの中にある特定のデータを別の形で置き換えたい
という要望に遭遇することがあります。
そんな時、役に立つのが、JavaScriptのreplaceメソッドと正規表現です。

今回はreplaceメソッドを使用してから、正規表現での置き換えにチャレンジしていきます！

今回実装したいこと

・取得したデータの例
　data = 202105
↓
・表示させたい値
　第21期下期

取得したデータと実際に表示させたい値の形が全然違う・・・！！！！

導入手順例

replaceメソッド

JavaScriptで置換を行う際に使用するreplaceメソッドですが、
一般的な構文はこちらになります。

var str = 文字列

str.replace( 対象の文字, 置換する文字 );

ここから「文字列」の中で「対象の文字」を検索してみると、
一致した文字を「置換する文字」に変換してくれます。
例としてはこちら

var sample = 'ICD花子'
 
var sample_replace = sample.replace( '花', '華');

この例の結果としては
「sample」の値（元の値）は「ICD花子」
「sample_replace」の値（置換後の値）は「ICD華子」
となりまして、「花」から「華」に置換できています！

正規表現の活用

先ほども述べたように「いくつかの文字列を一つの形式で表現するための表現方法」です。
この表現方法を利用すれば、文章の中から容易に見つけたい文字列を検索することができるんです！
正規表現にはさまざまな記号が用いられてますが、そこは一旦置いといて・・・
例としてはこちら

対象の文字列：202105
チェックしたい正規表現：\d{2}
チェック結果：20

\d{2}という正規表現で、202105の頭の「20」をとってくることができました！

今回の実装チャレンジ

導入手順で記載した内容を活用して、冒頭で書いた「202105」を「第21期下期」に置換します！
※ICDは5月〜10月が下期、11月〜4月が上期なので、それに基づいて条件分岐も入っています。

data = 202105

data_year = data.replace(/^\d{2}(\d{2})\d{2}/, "$1")); //「21」をとってくる
data_period = data.replace(/^\d{4}(\d{2})/, "$1"); //「05」をとってくる

year = "第" + data_year + "期"; //「第21期」という形でyearに代入
if( data_period == "05" ){
    period = "下期"
} else if( data_period == "11" ){
    period = "上期"
}

data_modification = data_year + period //「第21期下期」という形でdata_modificationに代入

このようにデータを変形することができました！
意外と簡単にこんなことできちゃうんですねー！！

やってみて感じたこと

やってみると意外とすんなりできちゃいました。
このとき初めて正規表現を使ったのですが、後日案件内で、入力文字制限チェックのための
使用可能文字の指定方法として、正規表現が出てきました...！
（半角アルファベット大文字小文字＋数字だったら正規表現で /^[a-zA-Z0-9]+$/ と指定します）
危うく「正規表現って何ですか...？」となるところだったので、
自己啓発で学んだ内容を現場でも生かすことができてよかったです◎