satetsu888のブログ

アラサーwebエンジニアのブログ

更新が簡単なしくみを考えつつサイト作ってみた

同僚とランチしてたら、ポートフォリオサイト作ればエンジニア的価値が伝わってイケてるし作るしかないっしょ、みたいな感じだったので影響されてずらずらと情報並べるだけのサイトを作った。

並べ「た」だけのサイトではなくて、並べ「る」とあえて書いたのがミソ。
 
 
昔からホームページ的なものは何回も作ったことあって、それこそ掲示板とリンク集と箱庭諸島が並んでるページから、ちょっと技術的なやつ、ネトゲのギルドサイト、サークルのとかいろいろ。ホスティングの方法もレンタルサーバーFFFTPでアップロードしてたり、bitbacketでマージボタン押せばjenkinsが走ってテストして簡易なデプロイをしてくれたりしてたんだけど、どんな時でも必ず共通して言えることがあってそれは
 
更新がめんどくさい
 
そもそもコンテンツ生成めんどくさいってのはまあそれぞれケースバイケースなのでなんとかしてもらうとして、あるコンテンツをサイトに追加するためにHTML書いたりCSS書いたりする作業自体のめんどくささがハードルとして残っている状態はよくないと思う。blogとかCMS的なものを使えば記事書くだけでいいんだけど自由度がガクッと下がるので、今回ポートフォリオ的なサイトを作るにあたって自由度を保ちつつコンテンツをサイトに変換するくだらない作業をしなくてもいいようなことを考えてみた。
 
作ったサイトはこれ
 
下までスクロールしてもらえればわかるんだけど、このサイト上のコンテンツは全部jsonで書かれていて、それをvue.jsでコンポーネント化されてるページのそれぞれの要素に渡していってレンダリングするみたいなことをした。
 
やりはじめた当初は、jsフレームワークでやるんだし、各コンポーネントにjs的な動き要素をいっぱいつめこもうかと思ってたんだけど、ちょっとやってみて全然良さがなかったのでやめた。
 
考えながら適当に作ったから、いったい何ができるのかあんまり考えてなかったけど、出来上がった感じをみると、blogみたいでもありblogパーツみたいでもあるよくわからないものになった。
 
よかったこととしては、とりあえずこれでなんらかの方法でjsonを更新すればサイトになるよって雰囲気はつかめた。
cronとかwebhookとかでAPI叩いて情報取得して自動更新みたいなこともできるけど、コンテンツ自体については自分で書かなとただのキュレーションになってしまって面白くない気がしている。
 
逆にあんまりよくなかったのは、情報はそれぞれのコンポーネントで持つ、と決まってたんだけど、デザイン情報についてはもうどうしようと思いながら適当に配置していったのであっというまに技術的負債が積み上がった感じになった。
このまま大規模化は厳しいので、サイトの構造、コンテンツ、デザイン情報、あたりはそれぞれどう独立してどう依存するべきなのか作戦を練り直す必要がありそう。