Webデスクトップの制作 #37 大規模リファクタリング

これまで突き進んで開発してきましたが、ここに来てソースを見直してみると、データ保存箇所の処理が複雑化していて、バグの温床になりかけている。 モジュールのそれぞれの配置や役割なども見直すために、大規模なリファクタリングを行います。 まったく、ちゃんと設計しないから、こういう行き当たりばったり無駄開発が入ってしまうんだよね。 でも、これが面白いと思ってしまうのは悪いことなんでしょうか？

デモ

うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

https://github.com/yugeta/web_desktop/ 今回の最終Commitは"add demo#37"です。

解説

いや〜、まるっとコードを置き換えてしまいました。 これまで表示するHTMLなどを格納していたassetを、jsフォルダ内のcomponentフォルダにして、jsファイルとして格納するようにしました。 他にもjsフォルダ内は、これまでは、windowやiconなどのも受＾るグループの入口jsをrootに置いていたのを、それぞれのモジュールグループフォルダ内に入れて、 機能別のフォルダ構成にしました。 MVC構成にしようかと迷ったんですが、 アレはアレで、無駄に階層が増えてしまうので、今回はモジュールグループの機能ファースト構成にすることにしました。

今回のリファクタリングの本当の目的

cssやdataやappといった、js以外の構成はさほど変えていないのですが、今回のリファクタリングには、実は大きな目的がありました。 兼ねてより、GoogleBloggerでの運用でサーバー管理コストがかなり軽減されるという事を、このブログで公言してきました。 ということで、この「Webデスクトップ」システムを、まるっとGoogleBloggerに乗っけて運用してみようかと考えたんですね。 そうすると、これまでassetフォルダで管理していたように、htmlファイルをajaxで読み込むような仕様は、Bloggerシステムでは使えないので、 jsファイルに落とし込む必要があったんですよ。 まあ、それに合わせて、しっかりとした構造を作っておこうと考えた結果のリファクタリングでした。

あとがき

このシリーズ、これまで最大のブログ数になりましたが、完了までの時間がめずらしく長くなってしまい、改めて仕事をしながら、プライベートで独自開発をしている人ってこんな感じなのかと思ってしまいました。 とりあえず、このリファクタリングを持って、githubの更新は終了にしておこうと思ってますが、プルリクを希望する人などがいたら、受け付けていますので、お気軽にpushしてみてください。 コラボレータ希望の人もいれば、お知らせください。 あと、当初はこのWebデスクトップをまとめて電子書籍にしようかな・・・とか考えていたんですが、 なかなかまとめるのが厳しい状況になっているので、もし書籍化する場合は、もう少し先に行いたいと思います。 とりあえず、間がかなり空いた状態にはなりましたが、この企画を読んでくださった方、本当にありがとうございました。