SNSサイト作りの試み4 プロフィール編集画面実装

前回から時間が空いてしまった。
主な理由は実装にすこし手こずってしまったこともあるのだけれど、
何よりポートフォリオを見せることなく就活の選考が進んでしまったからだよ。

ポートフォリを実装するにあたって、
ブログに書こうと思ったことが断片的にメモしてあるので、
記憶を辿りながら綴ろうとおもう（おそらくいくらか抜けは発生してそう）。

実装した機能
・プロフィール更新

今回は見切り発車が過ぎて、かなり無駄が生じたので、あえて過程を残しておく。

デザインも決まってないので、モックも用意せず、
表示すべき内容だけを頭の中で定義する（テーブル設計の時点でそれは行っているのだけど）。

ひとまずプロフィール編集画面を作って、
最初に作っておいたプロフィール編集APIを非同期で叩いて更新しようと考えた。
フロントエンドはVueJSを採用しようと考えていたが、
ポートフォリオの目的はコードを見せるという目的なので、
ある程度経験のあるjQueryにしようと考えた。
（なるべく早くコードを見せられるところまで持って行きたかったため）。

APIとの繋げ作業をして気づいたけれども、
APIのインターフェースに自分のユーザーIDを投げる必要があり、そこが気になった。
通常ログインしている状態であればAuthから自分のユーザーIDをを取れるのに、

無駄だと感じた
（別のユーザーID突っ込まれうることを考えても含むべきでない）。

前職でAPIの実装が続いていたので、無意識にAPIを先に作ってしまったけれど、
そもそもアプリの実装は念頭にないので、無理にAPIを実装する必要もない。
Laraelのバリデーション機能の恩恵も発揮しづらくなるし。

そのため、APIは破棄することにした
（サービスとリポジトリーのクラスは使いまわせるので、そこは助かった）。

更新機能を作り終わった後に、トップページでプロフィール取得処理を書いたけれど、
新規登録してからログインのタイミングではレコードがないのでエラーが発生した。
編集画面ではレコードがないためUpdateOrCreateの処理で書いたのだけれど、
ホーム画面に来た時点でレコードがなければ、レコードを突っ込んでしまおうと考えた。
プロフィール情報を取得し、なければインサート。
こうすると画面に出力する際のインターフェースを統一するのが楽になる。

        $profile = $this->profileService->get(\Auth::id());
        if(is_null($profile)){
            // プロフィール未設定の場合はレコードがないため初期化処理
            $user = \Auth::user();
            $profile = $this->profileService->init($user->id, $user->name);
        }
        $base64 = base64_encode($profile->thumbnail_image); 
        return view('home',compact('profile','base64'));

ただ、それをすることで、

今度は編集画面でUpdateOrCreateを使用していることが気になった。
ホーム画面でinsertしているのに、編集画面ではupdateしか起こり得ないのに、
UpdateOrCreateを使うと、編集画面でもCreateするパターンがありえるように思えてしまうと感じた。
気にしすぎかも知れないが、個人的にこういうのが気になる。

のでUpdateOrCreateをラップしてInsert処理とUpdate処理を分けた。
ただUpdateOrCreateは内部でレコードのチェックしてるだろうから、

無駄な処理が多くなってしまってるように思う。
綺麗にするのか、手を抜くのか、中途半端になってしまったように思う。

また、久々にフロントエンドの実装して感じたが、やはり両方含むと結構作業が膨らむ。
・画面の作成（デザインもあったらもっと大変）
・フロントエンド側のバリデーション（今回まだ実装してない）
・バックエンド側のバリデーション
・バックエンド側での更新処理

・バックエンド側でのエラー処理

バリデーションは単純作業だけど、結構めんどくさい。
前々から「xxxの更新画面　工数1日」とか書かれたりすることあったけど、

やはりせわしないように思う。

上述したとおり流れはめちゃくちゃで無駄がかなり発生したけれど、

とりあえずトップページにてプロフィール表示、
及び編集画面にての編集処理は実装できた（１つの画面遷移の流れができた）。

詰まった点メモ

・UpdateOrCreateを使うにはモデルにfillabaleを定義しなくてはならない
（エラーが出ずに困った。SQLのログを確認して想定しているSQLになっていないことで不具合を認識した）

・blobのカラムにデータを突っ込んだ際にUnknown column xxx in 'field list'のようなエラーが出る
(原因忘れた。確か型がstringになっていたか、blobの要領超えていたのでlongblobにするかでなおったような。エラー内容と原因が紐付いていないように見えてちょっと鬱陶しかった)。

・分離したJSファイルを修正すると「Uncaught SyntaxError: Unexpected token　...」のようなエラーが出る
（割と短時間で解決できたけど、これが一番意味不明だった)
↓一番下の参考にも明記しているけど参考にさせて頂いたURL
//Vagrant上のjavascriptで「Uncaught SyntaxError: Unexpected token ILLEGAL」
https://qiita.com/shibukk/items/07bb794981fe2d0daf7c

感じたことメモ

・どんくさいデザインでも書くことで項目の漏れを防ぎにくくすると感じた
（今回は図があれば処理のフローももう少し整理して無駄を少なくできてと思う）。

それから
今回ポートフォリオ作ろうと思った理由は主に以下の理由なのだけど
・就活用
・プログラミングの腕を鈍らせないようにするため

前々から就活するにおいてあったほうがいいよな、と思いながら今回作ったものの
就活で使う機会は一度もなかった（話のネタにすることはあったが）。
ただ、おそらくちゃんとした？会社ほどポートフォリオを要求する場面も多いと思うので、
可能であればもう少し機能を追加しても損はないとなさそう（今後使うかも的な意味）。
結局プロフィール編集機能しかできてないけど、他に勉強したいことが出たので
ポートフォリオは一旦区切るよ。

参考
//テーブルにレコードがあった場合Update、なかった場合Insertするベストな方法
http://syossan.hateblo.jp/entry/2014/09/02/122026
//うずら技術メモ
http://webmemo.uzura.work/list/category/102#id_1986

// laravel5.2 実行SQLのログを取る
http://djredhuman.hatenablog.com/entry/2016/04/28/120809

//Vagrant上のjavascriptで「Uncaught SyntaxError: Unexpected token ILLEGAL」
https://qiita.com/shibukk/items/07bb794981fe2d0daf7c