本記事は
2022年度 新人卒業記念Week
4日目の記事です。
🌸
3日目
▶▶ 本記事 ▶▶
5日目
📚
はじめに
初めまして、入社一年目の小嶋です！現在はWebディレクターを目指して日々修行中です！
新人卒業記念Weekということで、コーディングがほぼ未経験だった私が、html・cssを使って一からページをコーディングできるようになるまでに経験したことや感じたことを3つのSTEPに分けてご紹介します。
これからコーディングを勉強し始める方や、後輩へコーディングを教える立場になる方の参考になればと思います！
1.Udemyでのオンライン学習
まず初めに、「Udemy」というオンライン学習サイトで講座を受講し、コーディングについて学習を行いました。「Udemy」では、多岐にわたるジャンルやレベルの講座があり、必要に応じて自分のペースで学習することが可能です。
私は、大学の授業でhtml・cssの概要について学んだことがあったため、こちらの中級の講座から学習を始めました。
www.udemy.com
この講座では、3つのサイト制作を講師の方と一緒に進めていきます。段階的にレベルアップしていくので初心者の方でもわかりやすく、また、動画であるため一時停止や巻き戻しができるので、手も動かしながら理解できるまで自分のペースで講義を進めていくことができます。さらに、繰り返しサイト制作を行うため、コーディングの全体的な流れを学ぶことができました。
その他の講座についても、仕事内容や自分のレベルに合わせて時間が許す限り受講を進めていきました。これらのオンライン学習によって、html・cssの基本的なタグの使い方やコーディングの流れについて学ぶことができました。
2.実務での修正作業
Udemyでコーディングの基本的なルールやコツを学んだ後は、実務の中でページ内の一部を修正する作業をいくつか行いました。
初めは一ページに2か所ほどある年度の更新など簡単なものから行い、作業の一連の流れやツール（今回はSourcetreeとVisual Studio Code）の使い方を学びました。ツールや作業に慣れてきたら少しずつ修正量を増やしていき、さらに、デザインの修正など自分でプロパティを考える必要がある作業を行うようになりました。
（プロパティとは、どのような装飾をするのか指定するもののことで、例えば文字色を指定したいときはcolorというプロパティを指定します。）
Udemyでの学習とは違い、プロジェクトではクラス名の指定方法や、編集可能なファイルが限られているなど特有のルールが決まっており、また、既存サイトへの影響を気にしながら作業をしなくてはいけないため、ディレクターである先輩への報連相を適宜行いながら進行していきました。
これらの修正作業を繰り返すことで、作業ペースが上がったことはもちろん、実務ならではのルールや実際に運用されているサイトを見る機会ができ、業務でのコーディングについて学ぶことができました。
3.新規ページ作成
そして実務でのコーディングに慣れてきた頃に、新規ページの作成を行いました。
今回は具体的な例として下記のNRIワークプレイスサービス様の採用サイトでのコーディングについてご紹介します。 recruit.nri-workplace.jp
こちらの案件では、ヘッダーやフッダーも含めたベースコーディングを一から担当しました。
また先輩から私が作成したコードへリアルタイムでレビューをしていただき、修正を行いながら進めていきました。
コーディングを一から担当して大変だったこととして
- 参考となるコードやパーツがない
- クラス名や共通要素を一から考えなくてはいけない
などが挙げられます。
これらについて少し詳しくご紹介します。
大変だったこと①：参考となるコードやパーツがない
修正作業の際には他ページにあるパーツなどからコードを持ってくることで、ある程度フォーマットに沿ったコーディングを行うことができます。しかし、今回は一からページ制作を行ったため参考となるものがほとんどなく、実装したことがないパーツについてはネットで調べながらコーディングを進めていきました。中には、ネットから探してくるだけではデザイン通りのものにならなかったり、サイト内の他パーツと影響し合ったりして実装できないなど、なかなか思い通りにならないことも多くありました。そのようなときに、STEP1のUdemyで学んだプロパティの使い方を思い出しながら修正を行ったり、先輩にアドバイスをいただいたりすることで、実装することができました。
実装が大変だったこととして、こちらのヘッダーを例に挙げます。
一見簡単そうに思えますが、初心者の私には重なり順を設定しているz-indexというプロパティが上手く反映できず、何回もヘッダーがメインコンテンツの裏に表示されてしまいました。
そこで、先輩にレビューをしていただいたところ、z-indexを指定している階層にバラつきがあるため反映されていないことがわかりました。このように、プロパティの正しい使い方を理解できていないと、思った通りに実装できなかったり、思わぬところで他の要素に影響を与えてしまったりするということを学ぶことができました。
そのため、以降は詰まってしまうことなどがあった場合は、
CSS: カスケーディングスタイルシート | MDNでプロパティの正しい意味を理解し、必要な要素について考えながらコーディングを行うようにしました。
大変だったこと②：クラス名や共通要素を一から考えなくてはいけない
クラス名はサイトによって命名規則があり、さらに、他の方が見た際に意味が理解しやすくなくてはいけないため、初めて一から考える私はどのようなものがいいのかさっぱりでした。
そのときに参考にしたのが、 CSSのクラス名を決めるときに使うリストをつくりました #CSS - Qiitaというページです。クラス名を決めるときはいくつかの単語の組み合わせで作るので、Webサイト制作でよく使われる単語をこちらのページから探し、クラスごとの意味が通るよう意識し組み合わせていきました。
また、命名する際に連続している要素について、「〇〇1」「〇〇2」というように数字を振っていたのですが、先輩から似たような要素は共通して使うことができるプロパティもいくつかあるため、できるだけ数字を振るような細かい分け方はしない方がいいとアドバイスをいただきました。また、数字というのは意味が伝わりにくいので、前述したように単語を組み合わせることで意味が伝わるようにすることが大切だと教えていただきました。
このように、実際に新規ページを一から制作してみるとオンライン学習や修正作業では学ぶことができない、自分で考える場面を多く経験することができました。
まとめ
入社前までコーディングがほぼ未経験だった私が、新規サイトを制作できるようになるまでの過程をご紹介しました！
オンライン講座を使うことでサイト制作全体のことを自分のペースでしっかり理解し、その成果を業務で実践していく、このように状況に合わせてインプット・アウトプットをしていくことで学びを定着させることができました。入社時は本当に私でもサイト制作ができるようになるのか不安でしたが、様々な研修や実務での経験、先輩からのアドバイスを受け制作することができるようになりました。
特に、NRIワークプレイスサービス様の新規ページについては、先輩が時間をかけて何度もレビューしてくださったおかげでリリースに必要な品質についても学ぶことができ、上長よりお墨付きをいただくことができたのでとても良い経験となりました！
今後も、自己研鑽を重ねていきスムーズに高品質なサイト制作ができるよう頑張っていきたいです！
最後までお読みいただきありがとうございました。
