【JavaScript小ネタ】複数行からなるコードを一行にまとめてみます

　どうも！LSSです！！

 

先日、

というものを作って記事にしていました。

 

その記事中で使用したコード、元々の話が「学び」だったのもあり、誰かの参考＆自分が見返す時にいいかな？と

「処理を細かく行に分け、さらにコメントをしつこめに入れる」

って事をやってました。

 

じゃあ逆に「可読性を無視して、とにかくコードをひとまとめにしようとしたら、どこまで まとめられるか？」をちょっとやってみたくなりましたｗ

 

• 元のコード
• まずは、functionの中身から手をつけてみます
• 次はちょっと話が変わってきます
• ソート…？
• 重複削除、も「置き換え」で考えると
• 最後に画面に書き出すところさえも、まとめてしまう
• ここまでの処理をコード全文で見てみましょう
• さらにまとめてしまえ！
• 実際に動作するか確認
• 日本語で例えるとこういう事です
• まとめたほうがいいのか、まとめないほうがいいのか

 

元のコード

<p><textarea id="txta" style="width: 100%;" rows="10">元となる英文</textarea></p>
<p><input id="btn" type="button" value="単語取得" /></p>
<div id="gamen"> </div>
<script>// <![CDATA[
tangotxt=;//配列変数tangotxtを定義
btn.addEventListener('click',tango,false);//ボタンにイベントリスナーを設定　クリックでtango()を呼び出す
function tango(){
txt=txta.value;//変数txtにテキストエリアの内容をコピー
txt=txt.toLowerCase();//大文字を全て小文字に変換
txt=txt.replace(/[^a-z']/g,' ');//正規表現を用いて、アルファベットとアポストロフィ以外の文字を全てスペースに変換
txt=txt.replace(/ +/g,' ');//複数の連続するスペースを一つのスペースに変換
txt=txt.trim();//先頭と末尾のスペースを削除
tangotxt=txt.split(' ');//txtの内容をスペースで分割し、配列変数tangotxtに取り込む
tangotxt.sort();//配列変数tangotxtの内容をソート
tangotxt=Array.from(new Set(tangotxt));//配列変数tangotxtの内容から重複削除
gamen.innerHTML=tangotxt.toString();//配列変数tangotxtの内容を画面に書き出す
}
// ]]></script>

 

 

まずは、functionの中身から手をつけてみます

function tango(){

の内容の冒頭に、

txt=txta.value;//変数txtにテキストエリアの内容をコピー
txt=txt.toLowerCase();//大文字を全て小文字に変換

というコードがあります。

 

txtaというのはHTMLのテキストエリアに付けた名前で、「txta.value」はその中に入っている文字列、という事になります。

このスクリプトでは扱いやすいように、いったん変数「txt」にその文字列を代入してから順次処理を行っています…が、

txt=txta.value.toLowerCase();

のように書く事で、「テキストエリアの内容を先に大文字→小文字に全て変換してからコピー」という意味になります！

この調子で続けて、その次の、

txt=txt.replace(/[^a-z']/g,' ');

txt=txt.replace(/ +/g,' ');

も入れてしまう事にします。

 

txt=txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ');

ですね^^

 

次は、

txt=txt.trim();

なので、

txt=txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ').trim();

となります。

 

 

次はちょっと話が変わってきます

次の行は、

tangotxt=txt.split(' ');

です。

 

ここまで、左辺はずっと「txt=」で、「変数txtの内容を処理した結果を、変数txtに上書きコピー」する、という処理でしたが、今度は「tangotxt」になりました。

この場合、tangotxtは配列変数です。

 

といっても、やる事は同じで、

tangotxt=txt.split(' ');

この「txt」の部分を、先ほどまで書いてきた内容と置き換える事になります。

つまり、こうなります。

tangotxt=txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ').trim().split(' ');

 

 

ソート…？

次の行は、

tangotxt.sort();

です。

これを実行すると、配列変数の内容を文字順（a、b、c順）に並べ替えてくれますが、実質、

tangotxt=tangotxt.sort();

と同じ事なので、

tangotxt=tangotxt.sort();

この部分を置き換えます。

 

tangotxt=txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ').trim().split(' ').sort();

となります。

 

 

重複削除、も「置き換え」で考えると

tangotxt=Array.from(new Set(tangotxt));

これを実行すると、配列変数tangotxtの内容から重複削除（同じものが複数入っていたら１つを残して他を除外）してくれます。

 

これも、先ほどまで処理してきた内容に置き換える、と考えると、

 

tangotxt=Array.from(new Set(txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ').trim().split(' ').sort()));

 

 

最後に画面に書き出すところさえも、まとめてしまう

次の行は、

gamen.innerHTML=tangotxt.toString();

です。

 

HTMLの方で、id="gamen"としておいた箇所に、ここまでの処理をしてきた配列変数をtoStringで文字に戻して書き出す、という処理ですが、同じように置き換えます。

 

gamen.innerHTML=Array.from(new Set(txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ').trim().split(' ').sort())).toString();

 

 

 

ここまでの処理をコード全文で見てみましょう

<p><textarea id="txta" style="width: 100%;" rows="10">元となる英文</textarea></p>
<p><input id="btn" type="button" value="単語取得" /></p>
<div id="gamen"> </div>
<script>// <![CDATA[
btn.addEventListener('click',tango,false);//ボタンにイベントリスナーを設定　クリックでtango()を呼び出す
function tango(){
gamen.innerHTML=Array.from(new Set(txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ').trim().split(' ').sort())).toString();
}
// ]]></script>

 

そうとうスッキリしました^^

 

あと、途中処理のために使用していた配列変数「tangotxt」は使わなくなっちゃったので、

tangotxt=;//配列変数tangotxtを定義

の部分も削っちゃってます。

 

 

 

さらにまとめてしまえ！

function tango()の中身が一行になり、これ以上まとめきれなくなりました。

が、そのtango関数を呼び出している部分…

 

btn.addEventListener('click',tango,false);//ボタンにイベントリスナーを設定　クリックでtango()を呼び出す

 

ここですね。

一行にまとめたコードを、関数を作って呼び出す、のではなく、直接書いてしまう事ができます！

 

btn.addEventListener('click',tango,false);

 

置き換えるのはこの赤字部分。

ちょっと書き方が特殊になります。

 

btn.addEventListener('click',function (){gamen.innerHTML=Array.from(new Set(txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ').trim().split(' ').sort())).toString();},false);

 

tango、という関数名を書いていた部分を

function (){処理内容;}

という形式に置き換えました。

 

ちなみにコード全文はこうなります。

 

コード

<p><textarea id="txta" style="width: 100%;" rows="10">元となる英文</textarea></p>
<p><input id="btn" type="button" value="単語取得" /></p>
<div id="gamen"> </div>
<script>// <![CDATA[
btn.addEventListener('click',function (){gamen.innerHTML=Array.from(new Set(txta.value.toLowerCase().replace(/[^a-z']/g,' ').replace(/ +/g,' ').trim().split(' ').sort())).toString();},false);
// ]]></script>

 

 

実際に動作するか確認

上記コードを貼り付け、「元となる英文」のところに適当に英文を入れてみたものがこちら！

 

Once upon a time, there lived a close friend of young twin sisters. But one day, in order to parents died in the accident, my sister in the house of the witch is the paternal relatives, sister is a maternal relatives voodoo to the house of doers, went been Morawa respectively. I swear to meet again here ten years later. Ten years later, the two met again. My sister had grown up to be a very beautiful girl, but my sister was as young as she was ten years ago. But my sister wasn't particularly surprised. Most of the mysteries have already been experienced at the Wizard's House. And they decided to go on a trip together. During the trip, when I was in trouble because I didn't have a place to stay, a kind man said that I would stay at my house. As soon as I entered the house, the man's attitude changed as I followed him in favor of him. The man killed his sister many times, and because he saw his face, he also killed his sister, buried the two bodies behind the house, and fell asleep. A few hours later ... a muddy arm came out from under the soil. I'm my sister. In fact, the relative who took over his sister immediately killed his sister and revived it with Voodoo's secret method, turning it into an immortal zombie. Eventually, when her sister finished her revenge, she revived her sister with Voodoo's secret method and re-entered the journey.

「単語取得」ボタンを押してみると…元の物と同様に動作しますね^^

 

 

日本語で例えるとこういう事です

スクリプトの話ばかりでしたが、今回やった事を日本語で言うと、こういう話になります。

 

コメント部分を取り出すと、元のものは

 

ボタンにイベントリスナーを設定　クリックでtango()を呼び出す
変数txtにテキストエリアの内容をコピー
大文字を全て小文字に変換
正規表現を用いて、アルファベットとアポストロフィ以外の文字を全てスペースに変換
複数の連続するスペースを一つのスペースに変換
先頭と末尾のスペースを削除
txtの内容をスペースで分割し、配列変数tangotxtに取り込む
配列変数tangotxtの内容をソート
配列変数tangotxtの内容から重複削除
配列変数tangotxtの内容を画面に書き出す

でしたが、この日本語を、

 

ボタンに、クリックで「テキストエリアの内容を、大文字を全て小文字に変換してから、正規表現を用いてアルファベットとアポストロフィ以外の文字を全てスペースに変換した上で、複数の連続するスペースを一つのスペースに変換、それから先頭と末尾のスペースを削除したものをスペースで分割し、その内容をソートして重複削除して画面に書き出す」ようにするイベントリスナーを設定

 

という文章に書き換えた、のと同じ事をスクリプトに施した、って感じです。

 

 

 

まとめたほうがいいのか、まとめないほうがいいのか

自分のプログラミングはあくまで趣味レベルで、本職でプログラムを書かれている世界では「可読性（読みやすさ）」を重要視されている、らしいです。

特にチームで、複数人でコードを書いていると、仲間が見て分かり辛いコードは大変なんだろうな、という事かと。

 

とはいえ、元のコードのように「細かく、ひとつのちょっとした処理ごとに１行ついやす」のも、それはそれで読みにくそうな気も？
（もちろん、最終形のはやりすぎだと思いますがｗ）

 

このあたり、日本語の文章も同じですね。

ブログでも「あまり長文にせず、適度な長さの文に区切ったほうが読みやすい」という話はよく見かけます。

 

分かってても、自分はついつい長くなっちゃうクチですが^^;

 

 

 

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^