ローカル環境 - snow1216dropのブログ

緊急事態宣言が明けて、早くも第２波の警戒をしなければな状況になっていますね。

内心、すごく怖いなと思いながら、ステイホームしています。

僕のブログでは、プログラミングの学びについて書いていて、水曜日と日曜日の週２回、更新しています。

今週は、課題アプリのローカル環境での実装を全て終えました。ですが、先週のフロント実装に引けを取らない困難が待ち受けていたのです。

壁は３つ。非同期通信、インクリメンタルサーチ、自動更新機能。

これらを課題のアプリ（チャット機能がメインのもの）に実装していくのですが、大変というより、難しくて、一人だと挫折必至だったなと感じました。

ただ、上記のかべに当たる前にも壁がありました。

まず、スクールではひとつ一つを手順を踏んで学ぶので、フロント実装を最初に行った際には、Hamlにform_forを利用していませんでした。

そのため、この子の影響によって大きなビュー崩れが発生。

メンターの方に教えていただきながらだったけど、せっかく頑張ったのに…と心折れそうになりました笑

チャットのメッセージ送信のためのボックス（以下、メッセージボックス）をまとめたタグの中での崩れだったので、画像送信アイコンとメッセージボックスとSendボタンが丸崩れ。

自力で手直しができたのは、元に戻るまであと一息のところまででした。

メッセージボックスとSendボタンが元の幅に戻ってくれず、ここで２人くらいメンターさんへの相談を挟んで、４時間ほどかかりました。でもそれでも直らず。。

結局最後は、別のメンターさんに元通りになるまでをお願いしてしまいましたが、直せなかった理由がわかって学びになりました。

やっとビューが直ったので、３つの壁（鬼門）に突入。

Haml内でjsを利用する難しさ、Ajaxやjbuilderなどの新しい機能やファイルが出てきて、まだインプットするものがあるのか！大丈夫かな…と心配に。

いつもアプリを利用して馴染みある、「画面がリロードされずに切り替わる」機能。この機能はユーザー側にとって非常に便利な反面、実際の作業なると、とても繊細だなという感想を持ちました。

新しいgem の導入、jqueryの利用、jbuilderファイルの作成、attrメソッドなどの利用。多くの作業工程を経て、コードが一つずつ、役割を果たしながら処理を実行してくれることで叶う利便性には、パソコンに感謝したいと思ってしまうほどでした。

ここで、僕が壁だったと感じたのは、jsのコードが初見には、複雑すぎるなと感じたことでした。

$functionの定義、varの定義、Ajaxに対しての指示の記述など、たくさんの動作指示が混在しており、頭が混乱してしまいました。

実装ができたときは、「すごい！」と声が出てしまうくらいに感動。

これもユーザー側としてはとてもお世話になっている機能ですが、実装は簡単ではありません。まず、作業工程で何をしているのかを理解することが難しいのです。

テキストフィールドの加筆修正や、jsへのHTML追記など。

悩ましいのは、やはり波括弧や角括弧、コーテーションといった記号がより混在しているところとインデントです。Hamlの時などにも感じたのですが、プログラミングにおいて、インデントや記号の記述はひとつ余分、ひとつ足りない、ひとつズレてるだけでエラー（パソコンさん優秀すぎます…笑）な点でした。

これらの整合性が上手くとれず何度エラーを出したか。

その上、jsはRailsのようにエラーを自分から教えてくれません。

なので、"console.log"や"binding pry"などを用いて、検証ツールのコンソールやターミナルで状況や動きを確認しなければなりません。

これらの使いこなすにも、一体どの位置に書いてあげるべきなのかがわからなかったり、記述ができて調べるところまではできても、「本当にこれで合っているのか」を自分で認識することが難しかったです。

最後に自動更新機能。

こちらに関しては、上記の２つの工程ほどではありませんでした。

とはいえ、ここでも度々jsやjbilderを編集するので、作業の繊細さに差異は感じませんでした。非同期通信とインクリメンタルサーチを行ってきたので、コードが複雑に見える点には慣れが出ていて、比較的スイスイできたのですが…。

…ビューが崩れました。

画像をメッセージボックスから投稿する際、取っていたmarginが効かなくなっていました。

どうにかエレメントとjs内のHTMLの記述を照らし合わせて自分で解決できたのですが、テンプレートリテラルの記載ミスでエラーが起きていたことは気づけず、メンターさんに直していただきました。

なんだか、結局今日も感想のようなブログになってしまいましたが、無事にこれらの実装を終えることができて良かったです。

今回のフェーズでは、console.logとbinding pryを上手く利用して、イベント発火を確認しながら、正常に行われたことを示す"done"となぜか実行できなかったことを示す"fail"に辿り着かせることがミソかなと思いました。

まだまだ習いたてで、アウトプットにも誰かに共有できるレベルにもありませんが、復習や実践を繰り返して、理解を深めていこうと思います。

明日からはいよいよ本番環境での実装に向けた作業に入ります。