Webデスクトップの制作 #05 リファクタリング作業

コツコツとアプリ開発を毎日続けています。 ウィンドウ処理をプログラミングして、処理が増えたことで、ソースコードが煩雑化してきそうなので、今後のことを考えてJavascriptの構造を変えるリファクタリングを行いたいます。 最初から入れ込む機能を設計して、リストアップしていれば、大規模な構造体変更などはやらなくてもいいのですが、適度にリファクタリングをする事は、ソースコードの健全化として非常に有効です。 ちなみに、個人的にこのリファクタリング作業が一番好きな作業なんですよね・・・

ソースコード

ソースコードのcssとjavascriptを機能別にファイル分割して、ファイル構造が増えたので、Githubに設置することにしました。 github : https://github.com/yugeta/web_desktop ※今回は、commit : #05です。

リファクタリングファイル構成

/ Root directory ├ css │ ├ style.css │ ├ common.css │ ├ header.css │ ├ icon.css │ ├ main.css │ └ window.css ├ img │ ├ gift-svgrepo-com.png │ ├ like-svgrepo-com.png │ ├ set-up-svgrepo-com.png │ └ the-internet-svgrepo-com.png ├ js │ ├ main.js │ ├ bootstrap.js │ ├ event.js │ └ window.js └ index.html

githubを見てもらっても分かりますが、現在のところ、上記のようなファイルで構成しています。

リファクタリングについて

リファクタリングのポイントは、機能事にファイル分割して、１つのファイルの役割を機能別にするという点です。 もっと細かく1ファイル1作業みたいな、関数=ファイルみたいな構造を作るのが、構造的にいいと考えているコーディングルールが多いみたいです。 個人的には機能=ファイルとするオブジェクト構造の方が、今後の機能追加時の対応もやりやすくなるし、無駄にファイルを増やさないという点でもいいと思うんですよね。 でも、確かに他人の書いたプログラムでクソ長い関数なんかは読み解くのが面倒くさいと思うので、1つの処理が短いというのは、いいのかもしれませんね。 個々の感覚が経験と感覚なので、正解はありませんが、チーム開発を行う場合は、よく話し合って決めたほうがいいと思います。

CSS機能分解

ベース部分のheader（上部ヘッダ）とmain（デスクトップ部分）をそれぞれ分割。 mainの中に位置するiconとwindowもそれぞれ分割。 さらに共通処理の、commonを分けて、それらを読み込むためのstyle.cssを設置しました。 これ、ホームページ制作の時でも同じ手法でやるので、個人的な定石でもあります。 ちなみに、SEO的には、これらを１つのファイルにまとめたほうが、パケット効率がいいようです。 フレームワークなどでは、レンダリング処理でまとめてくれますが、バニラ（独自コーディング）で行いたい場合は、phpなどを使って1アクセスで全てのファイルを返すようにするといいでしょう。 ※このやり方については、別の回で説明したいと思います。

Javascriptの機能分解

Javascriptも機能別に分割したのは、ファイル名をみるとわかると思いますが、 基本的なファイルは、main.jsです。 ページ読み込み時にMainクラスを起動して、そこからすべての処理を始動する設計です。 これも、Javascriptの定石的な手法なので、理解して下記慣れておくといいでしょう。 あとは、class構造体を機能別にしておくだけで、機能ごとに呼び出して処理させればいいので、機能が追加された時は、ファイルを追加して、処理を書き込めばいいというシンプル思考です。 ※実際は、そんなに簡単ではないですが・・・ bootstrap.jsは、アプリ内で共通で使う変数や定数を一元管理するファイルです。 event.jsは、その名の通り、共通イベント処理を行う設定です。 少しややこしくなるのですが、機能内で個別にイベントセットする場合は、個別のファイルに書き込むので、全てのイベントを書き込むわけではありません。あくまで共通イベントです。

あとがき

今回のようにファイル構造をリファクタリングすることで、その後の作業がやりやすくなります。 適度にリファクタ作業をはさんで、確実にアプリ構築をしていくことで、プログラムがスパゲッティ化して嫌になってしまうモチベーション低下を防いでください。 スパ化した時にリファクタしてモチベアップするというのが実現できるようになると、アプリ制作をくじけること無く達成できるようになるはずですよ。 なので、個人的にこのリファクタ作業は好きなんですよね。