未経験フロントエンドエンジニアとして働いてわかったこと

初心者エンジニア フロントエンド

こんにちは、コードキャンプ開発チームのひよこエンジニア担当の中野です。
未経験で弊社のエンジニアとして採用され1年経ち実際に働いてみて感じたことを書いてみました。
フロントエンドエンジニアを目指している方や興味を持っている方に読んでいただけたら嬉しいです!

英語が全く分からなくてもなんとかなる

自分自身英語がかなり苦手でエラーが出るとパニックになってしまっていました。
大体翻訳すれば何を言っているのか理解でき、分からない時はエラー本文自体で検索すると対応方法が載っているサイトを見つけられるようになり解決出るようになりました。

しかし、画面共有をしながらターミナルの操作を先輩方に教えていただいているときにスペルがわからず一文字ずつ伝えてただくなど恥ずかしい思いをしました、、、
単語の意味が分からないとコマンドやメソッドがどのような役割をするのか予想できなかったりするので勉強するに越したことはないです。

CSSのfloatほぼ使わない


CSSを勉強し始めた時から横並びのデザインを実装するときにfloatを使用していました。
floatは画面から浮いているような状態であるため他の要素が下に入り込んでしまうため思い通りに実装ができなかったです。
横並びはfloatでできる=横並びはfloatでしかできないと1年ほど思い込んでいたのが原因です。
(当時は何故下に入ってしまうかもわからず、clearで回避可能なことも知りませんでした、、)


そんなときに出会って圧倒的に衝撃を受けた+サクサク思い通りに実装できるようになったプロパティーが display flex です。
display flexで横並び指定をしてjustify-content間隔指定ができるなど一石五鳥くらいできるかなり優秀なプロパティで実装にかかる時間が大幅に減りました!


こちらのサイトで理解を深めたのでdisplay flexについて詳しく知りたい方ご覧ください

CSSの基本!横並びなどフレキシブルに対応する「Flexボックス」 - WEB改善事例集(GMOソリューションパートナー株式会社)
(※2021年11月15日最新情報更新) 「CSSの勉強を始めてみたけど、Flexboxが理解できない」「Flexboxが便利なのは知っているけど使いこなせい」 CSSの勉強を始めたばかりの方にとって最初の難関となるのが

CSSだけでできることかなり多い

「やりたい実装+CSS」で検索するとCSSのみで実装して記事にしている方はかなり多いです。
参考にしながら実装する機会が多々ありました。
私自身JSを書くのがあまり得意ではないため、でできる範囲でJSを使わない実装方法をとっています。

個人的に応用しやすくかなり使いやすくてよかったのが「もっと見るボタン」をCSSのみで実装するこちらの記事はかなり役に立ちました!

[CSSのみ] 続きを読むボタンをCSSで実装する
モバイル対応のCSSのみで「続きを読む」「もっと見る」ボタンを実装。開く/閉じるも出来ます。

この仕組みを使ってハンバーガーメニューも作成しました。
ただ、かなり複雑なものをCSSだけで作ろうとするのは、時間がかかってしまうためオススメはしません。

【おまけ】よく使う便利ツール

CSS三角形作成ツール

デザイン通りの三角を一瞬で作ることができるので使っています。

CSS三角形作成ツール
CSS三角形作成ツール - CSSのみで三角形を描く

ColorHexa

16進数での色指定からRGBに変えるときに使用しています。

#1473e6 hex color
#1473e6 hex color code information, schemes, description and conversion in RGB, HSL, HSV, CMYK, etc.

さいごに

エンジニアになって「LPを作る楽しさや達成感」沢山を感じた一方で、自分にできないことが沢山あったり「将来はどんなエンジニアになりたい?」とか聞かれても全然わからないです。
弊社の先輩エンジニアの方々は皆さんは作りたいものを1から作って形にできていて、コードのバグをご指摘して下さったり、優しく教えてくださるすごい方々なので私も早く追いつきたいし役に立ちたいと思っています!
できないことを少しずつできるようになるくらいでしか成長できていないですが、来年はもっと胸を張ってエンジニア名乗れるような自分でいたいのでこれからも沢山勉強したことを記事に出せたらいいなと思っています

最後まで読んでいただきまして、ありがとうございました

コメント

タイトルとURLをコピーしました