バックエンドエンジニアが頑張ってVue.jsを使ってサイトを2週間で作ってみたのでその振り返り
おつcomi様です！限界人妻SE Vtuberのcomiです！メインはバックエンドです。
現在ボクは、Vtuberの企画として1week開発プロジェクトを立ち上げました。
概要は以下の通りです。
- 1週間でデザインからデプロイまで
- 1週間で（終わらなくても）振り返りを行う
- アイディアを自分発だけではなく他者からも頂く
- 配信して過程を見せる
その第1弾として、「このPJのサイトを作る」を実行しました。
以下、順を追って行ったことを記載していきます。
なぜ配信するのか
結論から言うとシステムエンジニアやプログラミングは高尚な物ではないと感じで欲しいからです。
ボクが職業を聞かれて「システムエンジニア（SE）です」と名乗ると、「凄い！頭いいんだね！」と言われます。言われたとき、少しモヤっとする自分がいたのです。
「凄い」という言葉を使って理解を拒もうとしているのではないか、と勘ぐってしまう時期が長らくありました。
それを打破するためには「自分のような底辺エンジニアがものづくりをしている時って、どういうことをしているのかを見せること」が必要だと考えたのです。何をしているのか分からない仕事は社会から隔離されがちなイメージがありましたので、そこの穴埋めの役割が必要だと感じました。
幸いにも、配信環境は数年前から整っていましたので、それを利用することにしました。
なぜVue.jsなのか
1week開発プロジェクトを行うにあたって、事前にいくつか案を出したり貰ったりしていました。それらを公表するプラットフォームがあるほうが良いかなと思い、まずはサイトづくりに取り掛かることにしました。
バックエンドエンジニアですので、フロントの知識はサッパリ（HTML/CSSの構成は理解していたくらい）でした。そんな折、知り合いのエンジニアが「Vue.jsってのがいいすよ！」っていったのを鵜呑みにした結果、Vue.jsを採択することになりました。
デザインの作成
デザイン作成はFigmaを利用しました。
こちら
こだわったところは以下のところです。
- ヘッダー画像を画面いっぱいにする
- 各タイトルにアイコンを付ける
製作の過程
製作の過程はYoutubeで配信しました。
1回目
このころはHTML/CSS→Vue.jsで構築できるのではないかと考えていました。
結果（有識者には自明の話かと思いますが）構築できませんでした。
理由としては
- HTML/CSS→Vue.jsのインポートは不可能であった
- Vue.jsの勉強不足
があげられると考えています。
2回目
前回できなかったことを踏まえ、今回はVue.jsのインポートから始めています。
しかしここで壁にぶち当たります。
- Vue.jsとBootstrapの連携むずくね？
- Vue3.x入れているのにComposition API理解できてなくない？
やりたかったこととしては、スクロールするとフェードインフェードアウトする挙動です。
そもそも、Vue.jsとBootstrapを共にインストールするのにTypeScriptをインストールしなければなりませんでした。
TypeScriptは触ったことがありませんでしたが、いい機会なのでそちらで…と考えたのが（今回のPJでは）間違いでした。main.jsも書き方が変わってしまっていたのです。
まだVue.js(3.x)+TypeScript+Bootstrapを使ったプロダクトは初心者には早かったんじゃ…。
配信内でもエラーについて調べる工程が何度も映されています。恥ずかしい。
3回目
一旦初心に帰りプロジェクトを再制作しました。
ここで気づくのですが自分はVue3+viteを使って今まで作成していました。 これを活かさない手はないということで、各項目をComponent化して記載しています。
なんとなくですが、このあたりからScript→template→stypeの順番で書くんだなということを認識し始めています。
ここで感動したのはcardクラスですね。これを作成して成果物を並べられそうに作成出来たことは、今回のページにかんして満足したところの1つです。
というのも、参考にしているサイトを変えたからなんですが。 何ちゅーことや。
❤各項目についているアイコンと、ページ名についているアイコン、またサムネにもなっているイラストは門脇智空さんに頂きました、感謝です❤
ところでお気づきでしょうか。そう、1週間で終わっていません。 ／(^o^)＼ﾅﾝﾃｺｯﾀｲ。
まあPJが初めからそう上手くいくはずはない（暴論）ので、2週間目に突入した次第です。
4回目
ヘッダー画像を整えていました。まだフェードインフェードアウトは諦めていませんでしたが、とりあえず置いておいて、ナビゲーションを整えることに専念しました。
一番進捗が悪かった回かもしれません。
5回目
進捗の悪さにめげず最終日を迎えました。
ナビゲーションを表示させたり、ヘッダー画像を整えたりした日でした。何とか下線が引かれたのと、レスポンシブ対応が出来たのは良かったなと思います。
全体の見た目を整えて完了させました。
総括
【良かったこと】
- Vue.jsを触りながらプロダクツを作れたこと
- デザインから始めたこと
- cardクラスが上手くいったこと
- レスポンシブ対応が上手くいったこと
【改善点】
- 1週間で終わる量では無かった
- Vue.jsの知識を前にもっと仕入れるべきだった
- フェードイン/フェードアウトを入れたかった
- デプロイまだなのでしたい
考える事
今回の配信やプロジェクトを通じて、まずプログラミングへのアレルギーだったりとか、抵抗感が無くなれば良いなと考えています。
また、この「1week開発PJ」は今後も続きますので、応援して頂けたり、配信を見に来ていただけたら幸いです。
今後の予定
※日付は未定です。また、順不同です。
- 本棚アプリ
- 精神科系TodoList
- シーシャフレーバーリスト
- 誰でもwiki（Notionでイイかも？）
- ボトルキープリマインダー
Discussion