頭の中は異空間

生活を日々ハックしてよりよくするブログ

JSをふんだんに使ったサイトを構築する際の注意点

どうも。

 

ES6の時代がもうそろそろやってきますね〜。

JSも進化してるってことでしょうけど、そもそもJSなんて多用すべきじゃないって意見もあるし、使い所が正直かなり難しい言語だなと個人的にも思います。これから独自でホームページを立てようとしている以上は知っておく必要があって色々調べたり製作途中で気づいたことを書いてみます。

 

 


バグ多発

困ったことにJSはNode.jsのような特別なサーバサイドJSやMAYAなどに含まれる物を除いてはフロントエンドに特化しているので、何か挙動がおかしかったり動作してなかったとしてもログを吐かないのですね。。

だから下手するとリリース後何ヶ月も後になって初めて気づいたのがユーザだったりなんてことも。

そもそもJSはバグが起こりやすく気づきにくい厄介な言語なので、不慣れなまま多用するのは危険を伴いますね。デザイン周りなどCSSでできることはCSSでやったほうがいいし、表示以外のロジックはあまり書かないほうがいいのかもしれない。サーバサイドと役割分担をすればバグったときに原因を判別しやすいです。

 

 

SEO対策に失敗するリスク

特にSPAのページなら間違い無くこれがネックになりますね。。

ロボットに対しての見た目のページとユーザが見るページに差異があるので、ページランクに影響しちゃうかもしれないし、キーワードがappendやreplace等で動的に追加されたelementの中にあるのだとしたら、それは残念ながら検索に引っかからない。。

はてなブログはその辺よく考えられていて、JSが最も使われているであろうページはeditだけれど、編集中のページはそもそも検索に引っかかるのもおかしいし、他人に見られてはならないページ。もちろん、ググっても他人や自分の編集中ページが引っかかることはない。それに対してトップページは単にpublish済みのページを表示するだけなので、作成済みページではSEO対策がしっかりできて願ったり叶ったりです。

中の人ではないので詳細は分かりませんが、見たところlazy loadもpjaxも採用していないし、JSによる挙動は見られません。つまり、見たまんまのページがそのまま検索ロボットにも見えるので、自然なページになっているはずです。

 

ページの読み込み速度

JSを1ファイルだけで管理することはまずないとして、分割して大量に読み込んでさらにCSSも、ってなるとファイルが増えるに連れて、またそれぞれのサイズが巨大化するにつれて、読み込み速度にも悪影響を与えてしまう。ので、必要最低限に絞ったほうがいいし、ページの読み込み速度はSEOにも関係する話なので、少しでも軽くするための工夫が必要。

あとこれはまずないと思いますがjQuery等のライブラリをgoogleなどからhostingしている際は相手先のサーバが死んだときに急に動かなくなるので、その辺も考慮したつくりにしておいたほうがいい気がしました。

 

 

ざっと簡単に書きましたが、私もこれらのことを考慮した上で製作します。