Oinari Tech Blog

プログラミングとか、日々の技術的アウトプットをするためのブログ

【初学者向け】フロントエンドエンジニアになるために自分が勉強したこと

どうも、フロントエンドエンジニアのおいなりです。

今はフロントエンドエンジニアとして都内で働いています。今年でもう5年目です。
時の流れの速さをひしひしと感じ、とても焦っております(だからこそちゃんと行動に移せている気がする)。

だいぶシンプルではありますが、僕がこれまで取り組んできたことを書いていきます。

未経験のとき(就職前)に取り組んだこと

僕は23歳ぐらいのときに、初めてHTML/CSSに触れました。

初めて取り組んだものは、『ドットインストール』です。
当時はほぼこちらが一強で、ひたすらこれでHTML/CSS/JavaScriptをやりました。

そこから、こちらの本を参考に自分でサイトを作りました。
作りながら学ぶ HTML/CSSデザインの教科書

こういった勉強をした最初のきっかけは全く覚えてませんが、文字で書いたものが画面に色付きの四角として表示されたことに、めちゃめちゃ感動してのめり込んだことははっきりと覚えてます。

HTML/CSSがちょっと理解できてくると自分で作りたくなり、「インプット => 自分で作る」というサイクルをひたすら回してました。JavaScriptも同様です。

他にやったこと

上記だけでなくいろいろ雑多に取り組んだので、それらとそれらを学習するために使った本を挙げると下記になります。
こうやって見ると結構やってますね、おそらくそれぞれ一通りはやったはず。

HTML/CSS/JavaScript

WordPress(自分でテーマ作って、レンタルサーバーで公開)

Photoshop

Illustrator

当時は全く理解できてなかった

当時の僕は恥ずかしながら、web系のエンジニアのすみ分けやwebデザイナーとフロントエンドエンジニアの違いとか全く理解してませんでした。
しかも、バックエンドに関してはググってみても、ほぼ想像できず意味不明だった記憶があります。笑

ただ、当時は全く理解できてなかったけど、なんとなく分かる範囲の「HTML/CSS/JS」「WordPress」「Photoshop/Illustrator」をひたすらやり続けていました。

就職して初めて作ったポートフォリオ

そんなこんなで努力が実り、こんな僕でも就職ができました。

就職した当時はほんとにペーペーで、振り返るのも恥ずかしいくらいなのですが、思い出にもなるので残しているものがあります。
それが下記のサイトで、僕が「就職して初めて作ったポートフォリオ」です。
よかったら見てみてください。

就職して初めて作ったポートフォリオ

おそらく最終更新が2016年?なので、そこから中身のアップデートはしてません。


僕が思う重要なこと

初学者にとって重要なことは、どこでも誰でも同じことを言っていますが下記の2つです。

  • 興味をもつ・ハマる
  • インプット => アウトプット

興味をもつ・ハマる

僕のことで言えば、5年前の勉強し始めの感動から、この仕事をやめたいと思ったことはありません。しかも、できること・知識が増えてくるとさらに感動するという、5年前当時と変わらずの情熱で取り組めています。

もちろん大変だと思うことはありますが、それ以上に感動するし達成感を感じています。

自己学習を続けてハマるまでには時間がかかることもあります。また、それに充てる時間が少ないと思うように進まずハマれません。
なので僕のおすすめは、ある程度まとまった時間を毎日自己学習に充て、1ヶ月くらい続けてみるということです。

ただ、ハマるハマらないが全てではないし、向いてる向いてないが全てではありません。
ハマらなかろうが向いてなかろうが続けていれば、できるようになってきます。できるようになってくるとそれを仕事にできます。

今後どうなりたいかに関わらず、IT系の業界でやりたいという思いがあるのであれば、ここからITの世界に入るということもありだと思います。

インプット => アウトプット

インプットしたら、見える形でアウトプットをする。

このブログが僕にとって初めての記事としての技術的なアウトプットです。
今までやってきたアウトプットは、「ページやシステム(WordPress)を作る」いうものでした。

インプットしたものを実践的にアウトプットできるのは、ページやwebのシステムを作ることだと考えていました。今でこそバックエンドも含めて様々なものを作れるようにはなりましたが、当時は静的なページ、できて「WordPress」が限界でした。
なので、webのシステム(WordPress)やページをひたすら作ってきました。

作っては壊し、作っては壊しの繰り返しです。そうすることによって、一度経験したこと試したことは次第にすんなりできるようになります。
すんなりできるようになるとその分脳のキャパシティ空くので、また新しいことに挑戦できるようになります。それを繰り返していくと徐々にできることが増えていきます。

プロゲートやその他スクール、YouTubeなどにある動画教材もあり、インプットができる環境は整っています。
ただインプットだけで終わらず、そのインプットをもとに自分なりのアウトプットをしていきましょう。

また、インプットするなかで教材に沿って制作物を作ることもあるかもしれませんが、作って終わりではなく、その制作物に手を加えるなり0からなにか作るなり、自分なりに考え再度形にするところを目標にするといいかもしれません。

僕の場合残っているものはほとんどありませんが、それが残っていれば過去を振り返って自信になったり、人に経験として見せられるものになるので残しておくことをおすすめします。

まとめ

何気なく始めたことに感動しハマり、それが今も続いています。
飽き性の自分にとってはほんとにびっくりするほどのことです。人間何に向いていて何に熱中できるかなんてやってみないとわかりません。

なので、ひたすら色んなものに手を出し、ハマったものはちゃんと形にするということを積み重ねていけばいいのではないでしょうか。僕もこれからもどんどん成長します!

技術職ということもあり、勉強量で言えば就職前と同等かそれ以上やっています。
それはこの仕事をしてる以上、これからも続くことだと感じています。
が、別に頭のいいわけではない自分が一生懸命取り組んで頑張ってこれたので、続ければなんとかなります!
ともに頑張りましょう!

僕でよければいつでも話は聞きますので、Twitterでお声をかけていただければと思います。