既存サイトに手を入れる際の注意点

非常に危ない。

リスクの話

既存のサイトを宛てがわれて「ここを変えて」という指示が飛んできたとする。仕様が把握できればいいんだけど、手を入れる前に読み解く必要があるとかなり厄介。ガチガチでカスタマイズ性がほぼ皆無だったり、変数で飛ばしまくってどこに何があるのか分からなかったり、なんだこれ!ってことが分かるととんでもない労力が発生することも見えてくる。で、その労力を掛けてもデザインが崩れたり動作が死んだり、えらいことが起きる。そういう事がある。

CSSにおけるリスク

cssはここ数年で使い勝手が良くなったおかげで、「+」やら「>」やらで特定の要素に対しての指定ができるようになった。だから、HTMLの順番を崩したり入れ子を増やしたりすると壊れる可能性がある。更には@mediaとかでPC/SPの振り分けをしていた場合、「○px以上」「○px以下」で付与されていたり、そもそも一定条件でcssファイル自体が割り振られている可能性もある。どういう条件でスタイルが付与されているのかを把握しないといけない。

JAVASCRIPTにおけるリスク

jsのcssより厄介な点は、「○○が存在していたら」の条件を噛ませていない場合、指定の要素が見つからなければjsそのものの機能が死ぬ。この症状はコンテンツをHTMLから置き換えたときに発生する。WEBサイトを構築したときは必要だから、必須だからって前提があれば存在の条件分岐なんかしないんで当然なわけで、でも改修時には丸々不要になることだってある。

よくあるシーンとしてはWEBサイトのデザイン変更。手を入れるよりも新たに作成するほうが手っ取り早い、そもそもの仕様を変更するってなれば不要になるんだけど、完全に旧jsを取り払うならいいんだけど、部分的に活かしが発生するとややこしくなる。使いまわしたほうが楽だからってことになれば、不要になった部分だけ削除したい。

またjsの厄介な点に、「整形」の要素がある。人間が読みやすい、インデントがあったり改行しているファイルは動作的には不要なので、ファイルを軽くするために整形することがある。これをやると、元の形を知らなければ尚の事、太刀打ちができない。頑張ってもめちゃくちゃ時間がかかる。

一応デコード的なことはできるし、オンライン上で公開してくれているサービスもある。

JavaScriptのコード整形ツール
Minify処理されたJavaScriptのコードを、改行、インデントを付けて見やすく整形するサービスです。ソースコードの確認にご利用下さい。

ありがたいんだけど、助かるんだけど、そもそものjsがとんでもないボリュームを持っていた場合、元ファイルをコピーできませんとかそういう問題が起きたりする。なので使えません、とかある。後は単純に、離れたところで動作がリンクしてるやつに気が付かずに一部だけ削ってバグる、とか。変数化して一元管理している場合、仕様がわからないと手のつけようがないってこともある。ほぼお手上げ。

phpにおけるリスク

phpに限らない部分ではあるけど。.htmlとかの静的ファイルで作ってるならいいけど、プログラム要素のある言語だと変数化して格納して、別ファイルから引っ張ってくる事がある。その連動がどうなっているかがわからないと、例えばWPだったら管理画面上で登録した内容なのか、テーマファイル内に入っている内容なのか、どんな条件で動作しているのか、全体像が分からないで下手に手を入れると壊れる。後付していけばどんどん難度が上がるので、きちんと引き継ぎができないとかなり大変なことになる。.svgファイルを使ってると思ったら.php内でソースコードを管理してたとか、しかも条件によってclassをつけたり形が変わるとか、分かってしまえば簡単なことも、分からなければ詰む。

どうやっていくべきか

虱潰しでやっていくしかない。
ライブ環境に近いブラウザの検証で編集してもその条件下にない処理は出てくるので確実とはいえない。

まずは不要な要素を削除して動作に問題がないかを確認。問題があれば、何を残せばいいのか、何を消したらダメなのかを確認。消しちゃダメなやつでも大体はソースコードに残ってればいい(コメントアウトではない)ので、cssで!importantを付けるとかしてガッチガチに非表示にして、とりあえず視覚的に消すようにするとか。

装飾を加える際は重複するのを防ぐためにclass名に日付を加えるとか。重複が避けられない場合は<html>とか<body>にclassを追加して、それを含む指定で優先度を上げるとか。<div>ばっかりで組んでるなら<main>とか<section>とかを使って組むとか。

そんな感じで既存のフォーマットから外れた形で組んでおけば、jsは既存のコードに触れずに新設するだけで対応できたりする。classとかidを指定せずに直接htmlタグを指定していてどうしようもない場合は、これはあまりやりたくないけど、<a>を指定してたら<span>に変えるとか。jsにかかわる動作自体は割りとどうとでもなるんでhtml要素の自由度は高い。ただ、htmlの書式的におかしい部分は出てくる。

大規模なプロジェクトだったり猶予をしっかりもらえるなら、ぶっちゃけ新しく作るのがマシ。コードの組み方が古すぎて環境に合わずにバグることもあるから、できれば現行の形に変えてしまいたい。結局は状況によりけりで汎用性の高い鉄板の進め方ってのはないんじゃないかなーって。頑張るしかない。

コメント

タイトルとURLをコピーしました