ブラウザで表示される文字列をJavaScriptのURLを読ませて置換する

ブラウザで表示される文字列について、お気に入りからJavaScriptを読みこませることで置換することができます。
例えば、強調表示したいような場合にこれを活用できます。

例として、mozillaのJavaScriptのページを強調表示してみましょう。

https://developer.mozilla.org/ja/docs/Web/JavaScript

今回の例では、「JavaScript」と「ECMAScript」を強調表示します。

1.お気に入りにJavaScriptを登録する

Chromeの場合は以下のような手順になります。

・ブックマークマネージャーを開く

・右クリックで新しいブックマークを作成する

・ブックマークのURLにJavaScriptを記述する

2.任意のページでブックマークを開く

今回の例では、このようなページが

ブックマークを開くことでこのように強調表示されます。


このように手軽にブラウザの表示の文字列置換が可能なのですが、この方法では大量の文字列置換ができないことに注意する必要があります。
少なくとも、筆者の環境(OS:Windows8.1、ビット数:64、メモリ:8GB、Chromeバージョン: 88.0.4324.150)では、1000通りの文字列置換を行うことはできませんでした。
(恐らく、ブラウザ毎に設けられているURLの文字数制限によるものです)
これが問題になるのであれば、Chromeの拡張機能を開発する等の別の方法を考えた方が良いです。

また、文字列置換によりリンク先が変わってしまうことにも注意が必要です。
(逆に、これを利用して、意図的にリンク先を変えることはできそうです)


いかがでしたでしょうか。

大量の記述に対応できないため、今回紹介した方法は不便に感じることがあるかもしれませんが、最も手軽な方法でもあります。
ちょっとした処理を実行したい場合には便利でしょう。

Chromeの拡張機能については、近日中に別の記事で紹介したいと思います!

JavaScript:matchメソッドで文字列抽出を行う

JavaScriptのmatchメソッドは戻り値に特徴があり、戻り値を利用して文字列抽出もできるようになっています。
今回は、文字列抽出の方法を紹介していきます。


matchメソッド(String.match)では、引数で与えた文字列が含まれるかどうかを返すメソッドです。
引数で与える文字列には、正規表現を使用することも可能です。

引数で与えた文字列が含まれない場合には、以下のようにnullが返却されます。

【サンプルコード】

・test.js

【実行結果】


含まれる場合は、以下のように色々な情報が返却されます。
配列で返却され、一致した箇所を抜きだした文字列が添字0の要素に格納されます。
また、indexキーには一致した文字列が何文字目に存在するか、inputキーには走査対象とする元々の文字列が格納されます。
groupsキーについては後述します。

【サンプルコード】

・test.js

【実行結果】


matchメソッドの引数では、gオプションを指定することが可能です。
gオプションを指定すると、一致する文字列を見つけても走査を続け、一致する文字列を全て抜き出すという動きになります。
戻り値の形式もgオプション指定時には変更され、以下のように一致した全ての文字列が添字0の要素、添字1の要素…に格納されます。

【サンプルコード】

・test.js

【実行結果】


matchメソッドの引数で使用できる正規表現には、キャプチャグループというものが存在します。
キャプチャグループとは、”()”で囲った箇所をグループ化するというもので、抽出条件には影響しませんが、抽出結果をグループ分けすることができます。
キャプチャグループが存在する場合は、添字1の要素に1つ目のキャプチャグループ、添字2の要素に2つ目のキャプチャグループ…といった具合に、戻り値でキャプチャグループの箇所を抽出することができるようになります。
キャプチャグループを使用することで、柔軟な文字列抽出が可能になります。

【サンプルコード】

・test.js

【実行結果】


キャプチャグループには名前を付けることができます。
“(…)”を”(?…)”とすることで、名前を付けることができます。
“<“と”>”で囲った箇所が、キャプチャグループの名前になります。
名前付きキャプチャグループを使用している場合は、戻り値のgroupsキーで抽出が可能になります。

【サンプルコード】

・test.js

【実行結果】


いかがでしたでしょうか。

“match”という単語だけを見ると「文字列が一致することを確認する」というイメージを持つと思いますが、実際にはこのように文字列抽出も可能なメソッドです。
そのことを知らずに他の人が書いたソースコードを読むと戸惑うことがある(少なくとも私は戸惑った)ので、「matchメソッドは文字列の一致の確認だけでなく文字列の抽出も行う」ということだけでも覚えておくと良いでしょう。

JavaScript:オブジェクトの中身をコピーする方法(deepcopyライブラリ使用)

JavaScriptにもJavaやC#と同じように参照型変数が存在し、オブジェクトや配列、関数が参照型変数です。
そして、JavaやC#と同じように、単純に「=」で代入するだけでは参照先(オブジェクトのメモリ領域を示すポインタ)しかコピーできず、コピー先の変更がコピー元に影響してしまいますし、その逆にコピー元の変更がコピー先に影響してしまいます。
(このようなコピーを「シャローコピー(浅いコピー)」と呼びます)

これを避けたい場合には、参照しているメモリの中身を丸ごとコピー(新たにメモリ領域を確保し書き込み)する必要があります。 (このようなコピーを「ディープコピー(深いコピー)」と呼びます)
JavaScriptでは標準でディープコピーを行うための関数が用意されていないので、自力で実装するか、外部のライブラリを使用するかする必要があります。
今回は、deepcopyというライブラリを使用します。
(なお、ディープコピーをサポートするライブラリは他にもあり、用途に応じて使い分けた方が良いです。JSONでシリアライズ・デシリアライズする方法もありますが、関数やundefinedがコピーされない等の問題があるので注意が必要です。)

以下、サンプルコードです。
Node.jsを使用して検証します。

【事前準備】

・Node.js command prompt を起動

・作業フォルダ(今回は”C:\tmp\”)に移動

・deepcopyライブラリをインストール

【サンプルコード】

サンプルコードは作業フォルダ直下に作成します。

・ShallowCopy.js

・DeepCopy.js

実行結果】


いかがでしたでしょうか?

JavaScriptのディープコピーは実務でも誤りやすいポイントであり、関数が含まれるオブジェクトをJSONのシリアライズ・デシリアライズでディープコピーしてしまいバグになる所を実際に目にしたこともあります。
ディープコピーの方法は今回紹介した方法以外にも色々あるので、現場毎で確認すると良いでしょう。

npmで公開されているパッケージをローカルに落とさず使用する

npmで公開されているパッケージは、UNPKGで公開されています。
UNPKGで公開されているパッケージをscriptタグ等で指定することで、ローカルにライブラリを落とすことなくライブラリを使用することができるようになります。
インターネット接続していることが前提となりますが、Webアプリケーションでは便利なサービスです。
(このようなサービスをCDNサービスと呼びます)

以前に試したVue.jsも、インストールすることなく以下のような形で使用することができます。
(今回は触れませんが、バージョン指定も可能です)


いかがでしたでしょうか。

ライブラリを使用することで短期間で高品質のWebアプリケーションを作ることができますが、資産管理の煩雑さが一つの問題となります。
CDNサービスの利用はその問題への解決法となり得ます。

私も、煩雑な資産管理に苦しめられてきた経験(プログラムが動かなかったり、管理表が必要になったり)があるので、CDNサービスを始めて知った時には感動しました。