31才転職奮闘記

31才未経験がエンジニアを目指しているブログです。

6月の振り返り

こんにちは!@suzy1667687です!

カリキュラムでどツボにハマりまくり、先週分のブログの更新ができませんでした。先週〜今週は応用カリキュラムを進めていきました。

を学習しました。

正直JavaScriptjQueryはほとんど理解できていないです。この先のカリキュラムでRailsJavaScriptjQuery使ったインクリメンタルサーチの実装があるのでその中で学んでいきます!

応用に入ってからの時間のかなりの時間をhamlとsassを使ったフロント部分の実装です。恐らく50時間は使ったと思います笑

display: flex;

hamlは階層構造が非常に大切で、この階層構造がうまくネストできていないとcssが効かない事がよく発生しました。

f:id:suzyanamateurengineer:20190616092145p:plain

このように"test-user"と"日付部分"を横並びにして"こんにちは!"は一段下に配置する場合は方法の一つとしてdisplay: flex;を使って並べる事ができます。

しかしここでhamlの階層を考えなければいけません。

f:id:suzyanamateurengineer:20190616093131p:plain
私の場合はこのように"test-user"と"日付"の下に"こんにちは!"が潜り込んでしまいました。これは他の場面でもよく発生しました泣

f:id:suzyanamateurengineer:20190616093432p:plain

このhamlの記述では.Chat-main__messageの親要素(子要素に"test-user"部分の__message__nameと"日付"部分の__message__dateがいる)にheightで高さ指定をしているので"こんにちは!"(.Chat-main__message__text)は.Chat-main__messageと同じ階層にいるので.Chat-main__messageの下に位置します(htmlは左上に重力がある積み木みたいな構造になるので)。

それを解消しようと.Chat-main__messageの中に.Chat-main__message__text(こんにちは!)を入れてしまうとdisplay: flex;が当たってしまう為

test-user  2019/06/09  こんにちは!

 と3つの子要素全てが横並びになります。

下に潜り込むか横並びになるかでどツボにはまりました。

ここで考える必要があったのは、cssの当て方よりhamlの階層構造でした。

f:id:suzyanamateurengineer:20190616094621p:plain

まず.Messageの階層内に"test-user""日付""こんにちは!"を入れます。これで下に潜り込む問題が解決されます。

次に.Message_titleという階層内に"test-user"(.Message_title__username)と"日付"(.Message_title__date)を入れます。

f:id:suzyanamateurengineer:20190616095126p:plain

.Message_titleにdisplay: flex;を当てます。

"こんにちは!"(.Message_main)は.Message_titleと同じ階層にいますのでdisplay: flex;は影響しなくなります。

これでめでたく意図したレイアウトにできます!

この問題解決の為に5~6時間かかりました泣

 このdisplayプロパティはフロント実装では大変お世話になりました。自分のモノにできるようにこの記事を参考に勉強したいと思います。

overflow: scroll;

これもやっかいでした泣

overflowも色んな値があるのでこの辺の記事を参考にしました。 

f:id:suzyanamateurengineer:20190616100300g:plain

こういうスクロースの動きにしたかったんですが 

f:id:suzyanamateurengineer:20190616100219g:plain

このようにチャット内容が増えていくと下のテキスト入力欄が下に押し下げられる&チャット内容が無い時はヘッダー付近にいるっていう泣

overflow: scroll;はcssに記述しているのにうまくいかない状態でした。

f:id:suzyanamateurengineer:20190616101206p:plain

親要素の.messagesにoverflow: scroll;が記述されているのですが効かないです。私は原因は.messages内にあるはずと.upper-messageや.lower-messageにoverflow〜を記述したりheightを100%にしたりやりましたがダメでした。

f:id:suzyanamateurengineer:20190616101507p:plain

原因はここにありました。.chatが親要素で子要素に.messagesがあります。私は.chatにheight(4行目)を指定していなかったのです。この親要素.chatにheight指定がないと、子要素.messagesの.lower-messageは投稿が増える度に限度を知らずにどんどん下へ下へ伸びていきます。なぜなら親要素でheightの上限が決まっていないから!

子供を外で遊ばせる時に「公園の中で遊んでね!」といえば公園内で遊びますが、「どこで遊んでもいいよ!」っていうと好き勝手な場所で遊びますよね(意味不)

つまり子要素.lower-messageは親要素.chatでheight: 100vhと決まっている事で100vhの高さの上限にぶつかった時に初めてscrollしていくんですね。

まとめ

この2つの問題を解決するのに本当に10時間はかかったんじゃないか笑

他にも様々エラーは発生しましたが、この2つは特に手強かったのでブログにまとめてみました。説明力と文章力が無くうまく伝えられてないので、これからは読む方々に分かりやすい文章でかけるように努力します!

おわり