0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

IT未経験からWeb開発エンジニアを目指す。  第3章 〜Web系企業に入社して2週間〜

Last updated at Posted at 2024-12-29

第3章 〜Web系企業に入社して2週間〜

ついにWeb系企業に入社してから2週間が経ちました。最初のうちは不安や戸惑いもありましたが、日々の仕事を通じて多くのことを学び、少しずつ成長を感じることができるようになりました。この2週間を振り返りつつ、学んだこと、経験したことをまとめてみたいと思います。

1. 前任の先輩が退社 

ついに、前任の先輩が退社することが決まりました。正直なところ、まだ全然自信がなくて、頼りにしていた先輩がいなくなるのは不安でした。しかし、先輩が在籍していた期間中にたくさんの指導を受け、その成長を実感することができました。

先輩からのコードレビュー
先輩からのコードレビューを受けるたびに、細かいところまで気を配ることの大切さを学びました。例えば、インデントの使い方、変数や関数の命名規則、コメントの書き方など、普段はあまり意識しない細部にまで目を向けることが、より読みやすく、保守しやすいコードを書くために重要だと実感しました。

レビューを通じて、自分では気づかなかったバグや改善点に気づくことができ、少しずつ成長していく感覚を得ることができました。

2. デザインツールの使用

私はWeb開発を始めたばかりですが、開発の現場では「デザイン」の重要性を再認識しました。PhotoshopやIllustratorなどのデザインツールを使う機会があり、これらのツールを使ってデザインデータを切り出すことにも挑戦しました。

特に、デザインデータをHTML/CSSに落とし込む際の注意点や、レスポンシブデザインへの対応など、デザインとコーディングの橋渡しをする役割が求められることがわかりました。PhotoshopやIllustratorで作成されたデザインファイルを、実際のWebページに落とし込む際に求められる精度や調整を学びました。

3. HTML/CSSを利用したWebサイト制作

最初の頃は、ただただ「コードを打つこと」に集中していましたが、少しずつHTML/CSSの基本的な考え方を理解し、効率的にWebサイトを作成できるようになりました。特にHTMLとCSSの分離、そしてCSSを使ってより効率的にスタイリングを行う方法については、実践を通じて深く学ぶことができました。

指摘された点
以下のような指摘を受けることが多かったので、それぞれについて振り返りながら学んだことをシェアします。

インデントがめちゃくちゃ
最初はインデントがバラバラで、コードが非常に見づらいと指摘されました。コードの可読性を高めるためには、インデントを適切に使うことが必須だと痛感しました。

SCSSの前にまずはCSSを完璧にする
SCSSやCSSを使ったスタイリングについて学びましたが、最初はSCSSを使う前に、まずはCSSの基礎をしっかり理解することが大切だと指摘されました。SCSSはその上で効率的にコーディングするためのツールに過ぎないので、CSSの基礎を固めることが最優先だと感じました。

まずコードをざっくり書く。その後ブラウザの検証ツールで見比べながら編集
コーディングを始めたばかりのころは、細部にこだわりすぎて進まないことが多かったのですが、「まずはざっくり書いてみる」ことが重要だと気づきました。ブラウザの検証ツールで実際にどんな表示になるかを確認しながら、細かい調整をしていくというプロセスを学びました。

ブロック要素とインライン要素の違いを理解する
HTMLでのブロック要素とインライン要素の違いを理解することが、レイアウトを組む上で非常に重要だと学びました。また、CSSの「margin: 0 auto;」と「text-align: center;」の違いについても、実際に触れながら理解が深まりました。

mainタグに直接CSSを書く場合の注意点
「mainタグに直接CSSを書くのはOKだけど、他ページへの影響も考えるべき」と指摘されました。全ページに共通するスタイルはmainタグで書いてもよいが、ページごとに異なる部分は適切に分けることが求められます。

コピペしても全て把握する
コードをコピペすることは便利ですが、それを使う前にそのコードが何をしているのか、どんな影響を及ぼすのかを理解することが重要だと指摘されました。

HTML/CSSの基本的なポイント

のように複数のクラスを指定した場合、CSSでは .a .b {} のように個別に指定できることを学びました。こういった細かい部分を理解することが、効率的なコーディングに繋がります。

CSSを書く際には、予めページ全体の構造を把握しておくことが大切だと感じました。特に、WordPressでのテーマ制作に関しても、index.php、style.css、function.php などの基本ファイルがどのように連携して動くのかを学ぶことができました。

4. WordPressのテーマ制作

WordPressを使ったWebサイトの制作も進めています。特に「テーマ化」するために必要なファイルや手順については、理解が深まりました。

テーマ化に必要なファイル
WordPressでテーマを作成するには、index.php、style.css、そしてfunction.phpが必須であることを学びました。それぞれのファイルがどのように連携して動くのかを理解し、実際にテーマを作成する際に活用しています。

page.php と single.php
固定ページを表示するための page.php、投稿ページを表示するための single.php の作り方についても学びました。それぞれのファイルで何を表示するべきか、どのようにデータを取り扱うのかを学んでいます。

Archive.php
投稿一覧ページ (archive.php) についても、どのように作成するかを学びました。単に投稿の一覧を表示するだけでなく、特定のカテゴリーやタグごとにデザインを変える方法にも挑戦しています。

まとめ

入社して2週間が経ち、これまで学んできたことを実践で活かしながら成長を実感しています。まだまだ学ぶべきことは多いですが、少しずつ自分の力がついてきたと感じることができて、日々の成長が楽しいです。

これからもこのペースで努力を重ね、もっと深い技術を身につけていけるように頑張ります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?