こんにちは、ゆゆです。
最近台風や地震など自然災害が多く、どこか落ち着かない日々が続いてますね。
この記事では、前回の振り返りに引き続き、6月の振り返りをしていきたいと思います。
前回は４月と５月をまとめて振り返ったのですが、かなり長文となってしまったため、今回は6月のみの振り返りとなります。
使用した教材の紹介とレビューや、自主制作についても紹介していきたいと思います。
実案件
６月も実案件の中でwebページの実装を担当しました。今回は前回よりも考えるべき要素が多く、レイアウトの組み方にかなり苦戦しました。
特に難しいと感じた点は、以下の3つです。
- display:flexとgridの使い分け
- 疑似要素を使った表現方法
- クラスの命名
どれも実装する中で必要になる場面が多く、自分の理解不足を強く感じました。
HTMLの構築はだいぶ慣れてきた一方で、CSSを使ったスタイル設定はまだまだだと感じました。
中でも苦戦したのが、アニメーションです。
実装したい動きに対して、どのプロパティや考え方が必要になるのかを自力で判断するのが難しく、調べながら進める場面が多くありました。
- キーフレームアニメーションとtransitionの使い分け
- easingやdelay、アニメーション時間や間隔の調整
- JavaScriptを使用したCSSアニメーションの制御（
addEventListnerを用いた制御）
など、多くのことに苦戦しました。
また、CSSアニメーション以外に、GSAPを用いたスクロール連動アニメーションの実装も行いました。しかし、動きを付ける要素が多く、実装しながら理解が追いついていない部分もあったため、今後改めて復習したいと感じています。
一方で、苦戦しながらも一つの案件を最後まで担当し終えたことは、非常に嬉しく思います。案件を通して、普段よりも多くの方と関わる機会もあり、少し自信がつきました！これからも頑張っていきたいと思います。
使用した教材
６月は案件の作業に多くの時間を費やしましたが、自主学習にも取り組みました。
『改訂3版 JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで』
先月に引き続きこの参考書を読み進め、一通り読み終えました。
624ページと大ボリュームな内容となっており、最新の基本文法から、開発に欠かせない応用トピックまで、かなり詳しく解説してある一冊です。
私は、参考書に書かれているコードを片っ端から書いて実行しながら読み進めました。しかし、そのすべてを覚えているわけではないので、今後辞書のように使っていこうと思います。
『プロのコーディングが身につく HTML/CSSスキルアップレッスン すぐに活かせてずっと役立つ現場のテクニック』
この本は、案件が落ち着いてきた頃に読みました。
HTMLとCSSの基礎を一通り学んだ人をターゲットとしており、実務で通用するスキルを身につけることを目的とした一冊です。HTMLのタグやCSSのプロパティの一つ一つを説明する入門書とは異なり、デザインカンプを読む際に意識すべき点や、HTMLのタグが持つ意味合いに沿った構築方法、CSS設計など、基礎から一歩踏み込んだ内容となっています。
この本は基礎を一通り学び、何か一つwebページやwebアプリを作った人に読んでほしい一冊です。自分の書いたコードが「後で困らないコード」か確認できると思います。
私はこの本を読んだ後、６月の案件で構築したHTML/CSSを見返したことで、自身の書いたコードが「後で困るコード」であることを強く実感しました。HTMLはタグがCSSのレイアウトに沿って組まれており、CSSではクラス名が何を示しているのか不明瞭で、かつ破綻しやすい構造でした。次回からは再現性や拡張性の高い「良いコード」を意識ていきたいと思います
『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法』
『HTML/CSSスキルアップレッスン』を読んで、CSS設計についての興味が沸き、手に取ってみました。
『HTML/CSSスキルアップレッスン』はHTMLとCSSの両方に隈なく焦点を当てていましたが、この本はCSS設計についてより詳細に説明されています。コンポーネント設計や、OOCSSやSMACSSなどの設計手法など、「より良いCSS」を書くための一冊です。
CSS設計について詳しく書かれているのですが、設計に関する考え方や概念の話が多く、内容は少し難しく感じています。なんとなく理解できる部分はあるものの、それを実際のコーディングでどのように活かせばよいのか、具体的な使いどころを想像するのがなかなか難しいです。
そのため、この本を今後どのように活用していくべきか、少し悩んでいます。来月中には読み終えると思いますので、またレビューや学習方法についてまとめたいと思います。
自主制作
案件や自主学習の息抜きとして、自主制作も進めています。
プライベートでXseverを契約し、自分のドメインも取得できました！！！！
今、自分のブログサイトを制作中です。前回の振り返りに制作中のページのスクショを載せたのですが、あまりにもシンプル過ぎたので、作り変えています。
また、ブログ制作と並行して、JavaScriptの問題集サイトの制作も進めています。
JavaScriptの学習を進めるうえで、問題集を探していました。「JS Challenge」というサイトがあったのですが、すべて英語だったのと、アカウント登録をする必要があり、少し面倒に思えました。そこで、自分で作ってやろうと考え、今レイアウトを組んでいます（誰か一緒に作ってくれる人募集しようかなとも思ってたり思ってなかったりしてますw）。
もう一つ、業務での実装経験を通して、アニメーションに対する苦手意識を感じたので、アニメーションに関するWebアプリケーション、もしくはサンプルコード集を制作しようかなと考えています。まだ構想段階で、サイトやアプリケーションを作るか、Qiitaでまとめるかは決まっていません。
自主制作については、別の記事で進捗報告兼やる気維持のために、ちょくちょく記事にしていきたいと考えています！！
現在感じている課題や不安と、今後の方向性
今月は、案件を通して自分の苦手な分野がより明確になったように感じています。
- HTML → タグの意味を理解できていない
- CSS → 設計がわからない、アニメーションが苦手
- JS → オブジェクト設計が弱い 、DOM操作に慣れていない
そのため、次の数か月はこれらの苦手を一つ一つなくしていくことを目指して学習を進めたいと考えています。
chatGPTに学習の方向性を相談しているのですが、
「HTMLとCSSでなぜその実装を選ぶのか説明できるようになる」ことを目標すべき
と言われて、納得しました。
自分の書いたコードについて論理的説明ができるよう、頑張りたいと思います。
一方で、不安もあります。JavaScriptの勉強方法が自分の中で確立していないということです。最近、「JS Challenge」というサービスがあることを知ったので、まずは試してみようかなと考えています。
ただ、あれもこれもと手を伸ばすと、逆に上手くいかないので、ゆっくりひとつひとつ進めていきたいと思います。
最後に
今回は６月の振り返りをしました。
6月だけでこれだけの文量になってしまいました。それだけ頑張っているということにしたいと思いますw
振り返りは今後も続けていこうと思いますので、ぜひ読んでいただけると幸いです。
余談ですが、最近『技術記事を書く技術』という本を読んでいます。文字通り、技術記事の書き方の指南本です。今年からQiitaへの記事投稿を始めた僕にとっては、ちょうど欲しかった一冊です。エンジニアとしてのスキルを磨きつつ、記事の質も挙げていけたらなと思います。