SPAの勉強にVue.js + FirebaseでWeb黎明期風ポートフォリオを作ったので、技術選定とかつまづきポイントを残しとく。
作ったポートフォリオはこちら：ARAI’S PORTFOLIO
ソースはGitHubに公開してます
制作期間について
3ヶ月ぐらいかけて作ったんだけど、実際の作業日数は1ヶ月ぐらい。休日にみっちりやろう！ってモチベーションは早々に消えたので、平日お昼休みにご飯食べながらぽちぽちやったり、仕事終わりにファミレスでドリンクバー吸いながら3時間ぐらいガッツリやったりが主な作業時間だった。サイトの方向性＆構成を練る
まずは何事も先人に習えと、エンジニアが作ったポートフォリオを見て回った。いろいろ見ていくうちに、個人制作したコンテンツがない人間はポートフォリオに載せるものが自己紹介とスキルぐらいしかないことに気がつく。当たり前だった。かくいう自分も業務外で物を作ってこなかったクソザコエンジニアだったので、内容の薄さをアイデアでカバーしたいと考えた。結果、小学生の頃に大好きだったWeb黎明期の個人ホームページをイマドキ技術で作る＋スキルセットを載せることによってポートフォリオにすることにした。
作るものの方向性が決まったので次に機能について考える。阿部寛のホームページを始めとするギリギリ生き残ってる懐かしホームページ達を参考に、基本機能を以下のように決定した。
- TOP（キリ番機能）
- ABOUT
- PROFILE
- LINKS
- BBS（掲示板機能）
- CONTACT（メール送信機能）
技術選定
現在の業務でjsはほぼjQueryしか触らないので、FEとしてやってくならちょっとヤバイよな〜と思ってUdemyでReact.jsとVue.jsの基礎動画購入して一通りやってみたところ、Vueの方が手に馴染む感じだったのでVue.jsで作ってみることに決定。ちなみに動画は公式チュートリアルをなぞってちょっと演習問題がある程度だったので買わなくてもよかったかなと思ったり。タスクランナーはgulpしか使ったことがなかったのでシェアの広いwebpackを使ってみることに決定。サーバサイドは、githubで公開して静的なポートフォリオにするのもいいなと思ったんだけど、キリ番機能がどうしても欲しかったのでDBが必要になる。去年の8月頃めちゃくちゃバズってた「Vue.js + Firebaseでポートフォリオを作ろう！」を思い出してFirebaseを使ってサーバレスに挑戦してみることに決定。
環境構築悩んだことあれこれ
・Vue CLIとかNuxt.js使うか問題Vueことはじめなので基礎固めたい＆サイト規模が小さい＆あんまり新しいこと一気にやると爆死率が上がるなどの理由から今回は使わない。webpackも1から書いてみる。ちなみにこれやるとアップデート作業が激ダルらしいので注意。
・Firebaseお金かかるのか問題
今回作るような、個人ポートフォリオ程度の規模ならかからないと思っていい。もちろん機能ごとに無料で使える使用量&回数に制限があり、超過した場合はエラーを吐くなるようになっている。ので、無料の範囲内でやるつもりなら特に例外処理をしっかりやる必要がある。
デザインについて
デザインは「Wireframe.cc」でワイヤーフレームだけ作った。登録いらずでブラウザ上でサクサク動くし、操作が直感的で速攻それっぽいものが作れるしおすすめ。今回作るぐらいのサイト規模ならデザインなくても作れると思うんだけど、行き当たりばったりにデザイン決めていくと共通CSSが作りにくかったり、デザインの整合性がとれない箇所がでてきたりするので、あった方が実装はしやすいんじゃないかなと思う。
作った機能の概要
■TOP（キリ番機能）
今日の訪問者数＆これまでの総訪問者数を表示するアクセスカウンター。DBはCloud Firestoreを使用。類似事例が全くと言っていいほどなかったので一番手間取った。大まかな流れはこんな感じ。
1. サイトに今日初めてのアクセスか判定 → 今日の訪問者数をリセット
2. ユーザが今日初めてのアクセスか判定 → 今日の訪問者数に＋1
3. アクセスカウンタ表示
ユーザが初アクセスかどうか判定する部分は有効期限24hのCookieを設定した。js-cookieがシンプルで使いやすかった。アクセスカウンタの表示部分は、画像用意するのめんどくさいな…と思ってたらデジタル数字のフォント「SEVENBAR」を見つけたのでそちらを採用！何でも探してみるもんだなぁ…としみじみ思うなど。
あとは、稀にCloud Firestore接続時に1秒間の読み込み回数制限に引っかかってエラーを吐くので、その場合は訪問者数9999999999を表示するようにしといた。
■BBS（掲示板機能）
投稿＆投稿内容一覧を表示するのみの超簡易掲示板。Vue.jsのチュートリアルでTODOリスト作ったときのこと思い出しながらそれっぽく書いたら1hぐらいでサクッと作れて、ここで初めてVue.js+Firebaseの相性の良さとか、汎用性の高さを感じることができた。似たような事例はググったら色々出ると思うので特筆すること無し。■CONTACT（メール送信機能）
フォームからメールを送信すると、私が登録してるGmailにメールが行くように＆送信者に送信内容の確認メールを送信する。GoogleForm + GASで作成。特に目新しいことはしてないんだけど、非同期通信したときにCORSのエラー出るのが嫌でフリーのプロキシを噛ませた。詳細は長くなったので別記事に書いた。デザインはみんな大好きWindods98風に。続きはまた今度追加するます
