どうも、オタユウです。

前回の続きで「チャットアプリ開発着手編」です。20〜21日目はメイン画面のマークアップをしていました。

HTMLやCSS含め、全て1から作っていく作業。唾をごくり。いきなり荒野に放り出されるような感覚。これまで学習してきたことを本当に理解できているか？を確認する意味では、とても良い負荷だなと感じました。
実際にはHamlやSass（scss記法）を用いて「HTML/CSSの構造を把握しながら別の記法に置き換える」という内容。

Railsを用いたアプリケーション開発なのでHTMLだけパッと入力して、Rails使用者の皆さん御用達のGemfile、erb2htmlやhaml-railsでhaml置き換えしちゃえばいいんじゃね？と楽な方に逃げそうになりましたが、いかんいかん。自分のための学習だろ、と。

前提としてBEMに則った設計を要求されていたので、hamlやscss文法と合わせて下記のような記事で学びつつ、手を動かしつつ…な2日間を過ごしました。

BEMの考え方やhaml,scss記法を取り入れると、コーディングの速度が上がります。というか、この部分の名前どうしよ…とか余計なことを考えなくてよくなった。厳格なルール大事。

Twitterでも言いましたが、初学者だと自分の力を見誤りがちです。謎の万能感に憑依されちゃうのか、自由に書きたいとか色々欲求が出てくるし。

ただ、プログラミング自体「一人が書ければそれでいい」ってもんじゃ無いと実感してきてるので、BEMやhaml,scssのようなプログラミング言語に設けられているさまざまな仕組みや規則は、僕たち初学者にとって非常に助けになる。ということを認識しておきたい。

Chromeの検証ツール（これ超オススメ）も用いながら、本番環境で動作しているチャットアプリとどう違うのか。どんな記述がされているのか。自分の仮説コーディングと比較しながら、およそ12時間ぐらい格闘の末、仮置きのビューが完成しました。

個人的に苦労した点、楽しかった点は下記の通りです。

苦労したところ
・最初のHTML全体構造の把握
・BEMに則った設計、クラス命名
・CSSの優先順位を考えながら、要素にCSSを適用していくこと

楽しかったところ
・思い通りにビューを作れている感覚になれたこと（快感）
・サイトの構造を仮説検証しながら理解→構築していくプロセス（快感）
・上手くいかない部分の要因を考え抜いて、問題を解消出来たとき（超快感）

完成後はGitHubでプルリクエストを出すのですが、やっぱりBEMに則ったクラス命名やscss記述部分で指摘をいただきました。
また謎の万能感に包まれそうになっていましたが、メンターの方のレビューが見事現実に引き戻してくれました。ありがとうございます（涙）
とはいえ、プルリクエストからLGTM貰いマージするまでの過程含め、割とスムーズに出来たんじゃないかなと。少なくとも今はそう思うようにしています。

今回は、チャットアプリのチャット画面の作成を高速で終わらせられたことが幸いしてか、遅れを取り戻せた感がありますが、油断は禁物。常にフルスロットルでペース維持できるよう頑張ります。


さいごに、現在の心境をば。
シンプルにプログラミングが楽しすぎる。難しい・理解できていない部分はもちろんまだまだあるものの、もっとサイト制作したい！アプリ作りたい！という熱が込み上げてきます。乞うご期待です。


ここまでお読みいただいた方、ありがとうございました。
熱量は技術に勝る。ですね。この言葉は今後も僕の信条になるでしょう。


オタユウ