既存のソースをオブジェクト対応にした苦労ばなし

概要

すでにあるソースコードをオブジェクト対応にしたいと思い、試行錯誤したサンプルです。
可読性の悪い既存のソースを可読性のよいオブジェクト対応にしてみました。サンプルに取り上げたソースはGoogleブログで構築した自前のサイトです。このブログサイトにある目次処理のソースコードをオブジェクト対応にしてみました。

目次について

目次処理しているソースを開発エディターで見渡してどこをどうオブジェクトにするかの見当をつける。
目次処理に必要なデータは、ブログの全投稿データで、そのデータから目次に必要なデータを抽出して目次データを作っています。
その処理をどこで行っているかを調べます。

ブログの目次は何のために作ったかと言うとそれは、ブログには元々アーカイブでブログ一覧がありますが、どちらかと言うと少々、わかりづらいため、もう少し、見やすいブログ一覧を作りたいということからです。

目次のあるサイト
https://tecoyan.blogspot.com/#main
このページのサイドバーにある「〇人生の応援歌」が目次になります。ここの処理をオブジェクト対応します。オブジェクト対応前のソースコードはまとまりがなくコードがあっちこっちに点在するため、ここには記載していません。

作業の進め方

まず、オブジェクト対応にするため、目次処理作業を言葉で表現してみます。
(1)ブログの全投稿データをGoogleブログサイトから取得します。
(2)取得した投稿データを元に目次を生成します。
(3)生成した目次データをデータベースに保存します。
(4)データベースから目次データを取得し画面に表示します。

以上の処理コードをオブジェクト化します。オブジェクトにはプロパティデータとメソッドがあります。既存のソースコードで使用しているデータ(変数など)はプロパティデータに入れます。更に既存のソースコードの関数はメソッドとして作成します。上記の説明から、メソッドは以下の4つ作成します。
(1)getPost()
(2)create()
(3)save()
(4)display()

今回、作成するオブジェクトの名前は、Mokujiとします。
オブジェクト構造の大枠は、以下になります。
let Mokuji = {
・・・・・・　　　//プロパテイ定義データ
//以下はメソッド定義
getPost: function(){},
create: function(){},
save: function(){},
display: function(){},
expand: function(){}　　　//目次を展開するメソッド
};

データの入出力関係

目次データの元データはブログの投稿データです。そのデータを加工して目次データを生成し、Mokujiオブジェクトのバッファへ一時保存します。一時保存したデータはデータべースへ永久保存します。最後に、データベースの目次データを画面に表示します。

メソッド別の入出力データ
(1)getPostメソッド　 (入力元)ブログ　(出力先)Mokujiオブジェクト(投稿データ)
(2)createメソッド　　(入力元)Mokujiオブジェクト(投稿データ)　(出力先)Mokujiオブジェクト(目次データ)　　　　
(3)saveメソッド　 　(入力元)Mokujiオブジェクト(目次データ)　(出力先)データベース
(4)displayメソッド　(入力元)データベース　(出力先)画面

メソッドを4つに分けましたが、他でも使えるのは、getPost()、display()です。
createメソッドとsaveメソッドは一体のもので、単独で使うにはあまりメリットはありません。一つにしてもいいかもしれません。
いずれのメソッドもMokujiオブジェクトと一体です。

他からのアクセスのための干渉問題

(1)目次表示関数は2つのjavascriptファイル(blog_script_body.js,blog_side_bar.js)から呼び出しています。オブジェクト化したのは、blog_side_bar.jsにある目次関数です。そのため、もう一方のblog_script_body.jsから呼び出している目次関数の箇所をMokuji.xxxxx()と変更しなくてはなりません。ここを変更し忘れると、undefinedのエラーが出ます。
(2)blog_side_bar.jsにある他の共通関数の呼び出し
今回のオブジェクト化は、まず先に、blog_side_bar.jsにあるコードを一括してMokujiオブジェクト変更しました。関数はすべて、xxxx:function(){},形式に変更しました。変数もすべて、xxxx:"",形式にしました。
まず先に、全体の形式を整えました。そこで、この中にあるメソッドで目次処理以外のメソッドも含まれていますので、それらは、元の関数形式にもどしました。変数も同様にもどしました。
(3)イベント処理関係
$(document).ready(function () {・・・のような、イベント処理らは、Mokujiオブジェクトから除外し、オブジェクトの外側におきました。
(4)use strict対応
コードの先頭に'use strict';文を置き、変数、メソッドのundefinedエラーを見つけます。この状態で、サイトのページを実行すると、このundefinedエラーが頻繁に発生します。それらは、ひとつづつつぶしてゆきます。面倒ですが、仕方がありません。
(5)$.each(xxx,function(i,val){.....})の中のthis使用で
{}内で、thisを使用すると、このthisはMokujiオブジェクトを参照していません。xxxで指定した配列要素のオブジェクトを参照しています。
そのため、ここは、thisを使用しないで、Mokujiを直接指定しています。
このように都度の実行で、エラーを見つけ、ひとつづつエラーをつぶしてゆきます。

変更後の実行結果

一通りのオブジェクト化が終了したので、実行してみました。
いくつかの問題はありましたが、まずは一応、目次生成した結果が画面に表示されました。

あとがき

今回は、既存のコードを変数を含めてここにオブジェクト対応して行くことは骨が折れると思い、ソースの置換を用いてソースコード全体を一括変更しました。そのあとに個別の変更を加えて行きました。一通りの変更を終えた後は、実行してエラーを出し、それらの不具合をつぶしてゆきました。
この方法で比較的早く、完成に近づけました。
(追記)
実は、メソッドの分割は上記のように4つにはなっていません。既存のソースコードをそのまま使っていますので、アイディア通りにするには、もう少し後になります。ご了承願います。

裏情報

このコードは、みっともなくて人さまにはお見せ出来ませんが、Chromeデバッガーを開いて、ソースタブのblog_side_bar.jsファイルを開くと見ることができます。デベロッパーの方ならいつも行っていることですね。
オブジェクト化の苦労の跡が垣間見れると思います。