1
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?

新卒フロントエンジニアの備忘録(4~5月編)

1
Posted at

こんにちは、ゆゆです。

今年の1月にQiitaへ初投稿し、その際「今年は6つの記事を書く」と目標を立てたのですが、そこから早4か月が経ちました。時の流れって早いですね。

この4か月の間に、私は大学院を卒業し、社会人になりました。そして、2か月が経ちました。時の流れって早いですね(2回目)。

現在私はWebのフロントエンジニアの卵として日々精進中なのですが、今回は4月と5月の振り返りをしていきたいと思います。使用した教材の紹介や、初心者目線のレビューなどもするので、参考にしてくれると嬉しいです。

※投稿時期が7月になっていますが、5月にあげた記事を再度あげなおしたものとなります。内容は全く同じです。

入社前のスペック

  • 大学、大学院でプログラミング(Pythonやp5s)を学んでいたので、基礎はある程度身についていた
  • Web開発は一切したことがなく、HTML、CSS、JavaScriptはすべて未経験
  • チームでの制作はしたことがあるが、インターンシップなど、仕事としてのチーム開発は全くの未経験

4月

4月1日(水)に入社式。
その後、研修がスタート。約2週間かけて社会人としてのマナーや自社の組織形態や事業について勉強しました。

研修翌日から配属。
HTML、CSS、JavaScriptはすべて未経験だったので、まずはこれらの言語の勉強を始めました。参考書を買ったり、上司が用意してくれたオンライン教材を用いて、基礎を固めるところからはじめました。

使用した教材

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

学生の頃に購入して本棚に眠っていたところを救出。私が読んだのは2022年に発行されたものでしたが、初学者にも差支えのない内容でした。計4つのwebページを作成しながら、HTMLとCSSの書き方からFlexboxやCSSグリッドレイアウト・レスポンシブデザイン・CSSアニメーションを学ぶことができます。

勉強方法は、とにかく模倣。説明を読みながら、載っているコードを丸パクリしていました。とりあえず、HTMLやCSSを「知る」ことがメインとしていました。

 

Udemy 『Web開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!』

上記の参考書の次は、Udemyのオンライン講座を受講しました(上司が経費で購入してくれました。感謝)。

このコースは、全26セクション、レクチャー数406とかなりボリュームのある内容となっています。HTML, CSS, Bootstrap 5, JavaScript, MySQL, Node.js, React, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。一本の動画も大体3~4分、長くても10分程度と、サクサクと視聴できます。

4月はHTMLとCSSに関わるセクションを一通り受講しました。大半が上記の参考書と被っていましたが、初めて学ぶ内容もあり、復習として使いつつ基礎を固めていきました。
私は上記の参考書の後にこの動画を視聴しましたが、逆でもよかったなと思っています。

『いきなりプログラミング JavaScript』

Udemyの次に取り組んだ参考書がこの本です。

文法や基礎概念を体系的に学ぶタイプの入門書とは異なり、アプリ制作を通してプログラミングの学習を進める内容となっている本です。計6つのwebアプリを制作しながら、プログラミングの基本や、ひとつひとつのアプリに必要なプログラムの構造を説明してくれます。

私は大学でプログラミングを勉強していたので、基本的な概念は大体理解していました。そのため、基本文法の解説を中心とした入門書ではなく、何か制作をしながらJavaScriptの使い方を学べる参考書を探していたところ、この本に出会いました。

しかし、一通り読んだ感想としては、結構人を選ぶ本であるというものです。
というのも、「とりあえずアプリを制作してみる」ということに重きを置いており、コードの説明は必要最低限しか書かれていません。また、本を読み進めていくほど、コーディングの難易度がかなり上がります。そのため、「アプリはできたけど、コードの仕組みはあまり理解できていない」という状況に陥りやすいです。私もそういった状況にはまりました。

「基礎をしっかりと勉強したい」、「実践的なスキルを身に付けたい」という方は、まず一般的な入門書を読むことをお勧めします。一方で、「とりあえずプログラミングで何か作ってみたい」、「コツコツした学習が苦手だ」という方にはお勧めできる一冊です。また、この本で学習する際は、1度だけではなく何度も繰り返して読み、理解することをお勧めします(私は前者のタイプのようでした)。

5月

初案件!!

ゴールデンウィークが明けてから実案件に初参加。複数枚のWebページの制作を担当しました。
4月にHTMLとCSSは一通り学習したものの順調にはいかず、AIや上司(8割AI)に何度も聞ききながら制作を進めました。

特に苦戦したのが、CSSによるレイアウト構築。

CSSでは、

  • marginやpaddingが反映されない
  • positionやdisplayを上手く設定できず、画像があっちこっちに表示される
  • z-indexによるレイヤーの位置関係が上手く設定できない

など、大苦戦。時に腹を立てながらコーディングを進めました。

また、この案件でと、JavaScriptによるモーダルウィンドウのプログラム構築も行いました。ただ、JavaScriptを使ったWebサイトのインタラクションの実装はあまり慣れておらず、基本AIが出力したコードをコピペしていました。

自主学習

案件がひと段落した後、来月まで担当できる案件がないということだったので、自主学習を進めました。
参考書とUdemyを使いつつ、時々自主制作を進めたりしていました。

使用した教材

Udemy 『Web開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!』

上記で紹介したコースのJavaScriptのセクションを視聴しました。教材の説明は省きます。
五月に視聴した動画は、

  • JavaScript入門
  • GitとGithubを使った、コードのバージョン管理

の2つのセクションです。

 

『改訂3版 JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで』

Udemyの動画視聴と同時並行して、この入門書を進めていました(まだ読み終えていない)。
624ページと大ボリュームな内容となっており、最新の基本文法から、開発に欠かせない応用トピックまで、かなり詳しく解説してある一冊です。

私は、一部軽く読み飛ばしつつ、初見の分野や理解の曖昧な箇所については、記載されているコードを実際に動かしながら学習を進めています。正直、あまり効率はよくないかもしれませんが、上記の『いきなりプログラミング JavaScript』だけでは十分に理解しきれなかった部分を、改めてしっかりと固められていると感じています。

自主制作

参考書を使った学習の息抜きに、自主制作も進めていました。
日々、Notionで日記をつけているのですが、自分用の日記サイトを制作しようと、現在少しづつですが進めています。ただ、HTMLやCSSは組めても、デザインセンスが皆無なのでかなり苦戦中ですww

image.png

現在感じている課題や不安と、今後の方向性

直近の2か月を振り返ってみて、自分のスキル不足を痛感しつつも、少しづつ実力が伴っているようにも感じています。HTMLやCSSにも少し慣れてきて、自主制作ではAIを使わずにレイアウトを組めるようになってきました。

一方で、自分のコーディングに多少の不安も感じています。例えば、HTMLのタグの使い分けやCSSのレイアウト手法の選択など、制作するWebサイトに合った実装がどのようなものか、十分に理解できていないとも感じています。また、ユーザビリティや運用面まで意識したWeb制作という観点でも、知識や経験が不足していると感じています。
他にも、JavaScriptの理解や、それを活用したインタラクションの構築にはまだまだ実力が伴っていません。

どういった方向性で学んでいくべきか、迷いや不安もありますが、とりあえずしばらくは

「Webの基礎を固める」

ということを軸に学習を進めていこうかなと考えています。
具体的には、

  • 論理的説明のできるHTMLのタグ構成を身に付ける
  • CSSのプロパティやレイアウトを適切に使い分けられるようにする
  • JavaScriptでUIを操作できるようになる

などです。
参考書を使った自主学習や、実案件・自主制作などを通じて経験を増やしていきながら、少しづつ力を身に付けたいと思います。

最後に

ここまで読んでくださった方、本当にありがとうございます。

4月5月は大半の時間を参考書を使った学習に費やしていたので、半分以上が書籍のレビューとなってしまいました。
インプット多めだったので、来月はアウトプットの量も増やしていきたいです。

AIが飛躍的に進化し続けている昨今、プログラミングを勉強する必要性について悶々と考えることが多くなっています。将来的にAIがコーディング作業をすべて担い、人間がプログラミングをする必要がなくなるかもしれません。僕はコーディングが好きなので、自分の仕事がつまらないものになっていくのか考えると、少し寂しい気持ちにもなったりします。

こうした未来予測の難しい世の中で、経験も浅いため何が正解かもわからず常に迷ってばかりです。しかし、私自身が憧れる人に近づけるように、自分に自信を持てるように、これからも頑張っていきたいと思っています。

振り返りは定期的にやっていきたいと考えています。今回は思ってた以上に長文となってしまったので、1か月ごとに振り返りをした方が読みやすいかもしれないですね。
執筆のタイミングは未定ですが、次回の更新も読んでいただけると幸いです。

1
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
1
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?