これは精神衛生上よくない。

そんな悔しい気持ちを抱える多くの人のために
　　　Clubhouseっぽいプロフィールメーカー
を作りました。

何ができるのか

こんな感じで

こちらからサクッと試せます。

どうやって作ったか

Qiitaは技術情報共有サービスですので、クソアプリの宣伝のためだけに使うのはよくありませんね。

使用技術

• Vue.js
• AWS
  • S3
  • Lambda
  • API Gateway
  • Route53
  • CloudFront

筆者の技術レベル

Pythonなら問題なく書ける。Flaskを使って簡単なWebアプリを作った経験あり。
最近モダンなフレームワークに興味を持ち始めた。
JavaScriptもVue.jsも最近勉強し始めたので見よう見まねでやっているが、あまりVue.jsの良さを生かせた開発はできない。

全体図

ルーティング制御のためにvue-routerを使ったのですが、https://example.com/example に直接アクセスすると404 Not Foundになるということを知りました。
SSR（サーバーサイドレンダリング）も可能なようですが、今回はそこまで時間をかけたくなかったためプリレンダリングを用いました。
Vue.jsのプリレンダリングについてはこちらのサイトが大変参考になりました。

API Gatewayから返されたデータを表示できない

事前にdataの中にimage: nullを定義しておき、axiosでAPI GatewayのURLにPOSTする形で画像処理を行っていましたが、なぜか処理後の画像がHTMLに反映されない問題
デバッグコンソールにはUncaught (in promise) TypeError: Cannot set property 'image' of undefinedの文字が…。
そのときに書いていたコードがこちら。

axios.post('https://example.execute-api.ap-example.amazonaws.com/example', {
          name: this.mei + ' ' + this.sei,
          userId: '@' + this.id,
          image: imgData
        }, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(function(response) {
          this.image = 'data:image/png;base64,' + response.data.image
        })

Vue.js上級者ならすぐわかるのかもしれませんが、初心者の私は1時間くらい溶かしました。

解決策

結果、こちらの記事に助けられました。

Vue.jsのdataオブジェクトを参照する際に Uncaught (in promise) TypeError: Cannot set property 'foo' of undefined

thisへのreference用変数(self)が必要なようです。
というわけで、正解はこうですね。

+ let self = this
axios.post('https://example.execute-api.ap-example.amazonaws.com/example', {
          name: this.mei + ' ' + this.sei,
          userId: '@' + this.id,
          image: imgData
        }, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(function(response) {
-           this.image = 'data:image/png;base64,' + response.data.image
+           self.image = 'data:image/png;base64,' + response.data.image
        })

また一つ賢くなりました。

編集後記

初めてのVue.jsとLambdaということでちょいちょい詰まりながらも大体2日（徹夜含む ）で完成しました。

Vue.jsはまだまだ初心者なので、「こうしたらいいよ！」などありましたら温かいコメントをくださいますと幸いです。

以上、最後までありがとうございました！

※筆者は2月2日にはClubhouse招待されています