フロントエンド

40歳を超えて初めてフロントエンドの勉強を始めてみた話

フロントエンド開発未経験者がTODOアプリを作れるようになるのにやったこと

ITのお仕事を約15年やってきたけど、開発経験がない・・・

私は新卒でSIerに入社し、その後インフラエンジニアとして金融機関のシステムのミドルウェア構築やサーバ運用などを行った後、事業会社の情報システム部門(いわゆる「情シス」)に転職して基幹システム周りのサポートやプロジェクト管理などを経験、その後はデータエンジニアとしてデータ分析基盤の設計・構築等に関わってきました。

比較的色々な経験してきてはいるのですが、今までいわゆる本格的な「開発業務」を経験したことがありません。そのため、フロントエンドやバックエンドの開発についてはほとんど知見がない状態です。(一応Pythonやシェルスクリプトなどで40~50行程度の簡単なプログラムを書くことはあります)

私自身が開発未経験ということもあり、勉強会や自身が所属しているコミュニティ等で知り合った人の中でフロントエンドやバックエンドのエンジニアの方に会って話を聞く機会などがあると、

「おお・・・開発カッコいいな・・・私も一度くらいは開発経験してみたかったな・・・」

と言った気持ちになったりします。

もちろん開発がメインの人のお仕事がそこまでキラキラしたものではなく、とても大変なことはある程度は知ってはいるのですが、なんというか・・・単純に、自身が経験したことがないものに対してのちょっとした憧れ、みたいなものを感じたりしていました。

とある勉強会で影響を受けて・・・本格的(?)にフロントエンドを勉強することに

2か月ほど前に友人から勉強会に誘われ、その勉強会後の懇親会でとあるスタートアップの社長(結構有名な人!)と話をしたときに

「〇〇さん、それだけ幅広い経験をしていてしかもビジネス側の視点も持っているのに、開発だけ経験してないのはもったいないよ。というかWebアプリとか作るのおもしろいからもし興味があれば、うちの副業でやってみない?」

などと言われて、その後には本業でインフラエンジニアをしている人が副業でフロントエンドエンジニアとしてNext.js + TypeScriptで本格的な開発をしているケースや、その逆で本業フロントエンジニアから副業でインフラエンジニアを経験している人の話を聞き、

「未経験から本当にそんなことができるのか・・・あまり自信はないけど、どうせなら未経験からどこまでフロントエンドのスキルをキャッチアップができるか試してみたいな・・・」

という気持ちになり、とりあえずはフロントエンドまわりの学習を一から始めることにしました。

フロントエンドの学習、何から始めるか

私の頭の中ではフロントエンドのスキルを身につけるのに必要なこととして、

  • HTML/CSS/JavaScriptの基礎を押さえる
  • Angular、Vue.js、Reactあたりのフレームワークを学ぶ
  • Webアプリを色々作ってみる
  • 仕事としてプロジェクトに参画

こんな印象でした。

本当は副業で使えるレベルまで持っていきたい気持ちはありつつも、それよりはまずは自分で簡単なWebアプリのモックアップが作れる程度になればなんか楽しいかな、というモチベーションで学習を始めることにしました。

なので、まずは1から基礎を、というよりはUdemyなどの動画コンテンツを効率的に使い、スピード感を重視した学習を始めることにしました。

動画コンテンツ(Udemy)をフル活用!!まずは手を動かすことに慣れ、そこから理解へ

まずはUdemyで以下のコースを受けてみることにしました。

モダンJavaScriptの基礎から始める挫折しないためのReact入門

https://www.udemy.com/course/modern_javascipt_react_beginner/

以前、このコースを作成したじゃけぇさんのReactの書籍は購入しており、一通り目を通して手を動かしてみてはいたのですが、本に書いていること自体はある理解できるものの、結局は仕事で触ったり、自身でアプリを作る機会もなかったので、1回読んだきりで放置してました・・・(書籍自体はとてもわかりやすく、これからReactを学ぶ人にもおススメです!)

https://amzn.to/3NYzzbA

 

書籍での学習ももちろん良いのですが、そもそも基礎が理解できてない段階だと、動画での学習が一番効率が良いのではと考え、今回は「モダンJavaScriptの基礎から始める挫折しないためのReact入門」から学習を始めることにしました。

ちなみにこのUdemyコースについては、まずは素のJavaScriptを利用した場合のDOM操作についての基礎の学習を行い、簡易的なTODOアプリの開発を行い、コースの中盤以降ではそれらのTODOアプリをReactを利用して作り直し、Reactを利用することでどのようなメリットがあるのかを理解することができるという、React学習初心者向けのコースです。

あとこのコースでは初心者向けのコースということもあり、開発環境についてはCodeSandboxのみを利用することもあり、コードの書き方や理解に集中することができる点も良かったと思います。

とりあえず2週間でTODOアプリが作れるようになった!

よくありがちな、プログラミング学習初学者が最初に作るような、TODOアプリ的なものをReactで作れるようになりました!

↓こんな感じ

https://rzr1r5.csb.app/

Udemyのコースを実際に手を動かしながら3日ほど掛けて学習し、その後は動画を見ないで成果物を何度も作り直し、つまづいた部分をまた動画を見直す、みたいなことを繰り返してました。

初心者向けのコースということもあって、かなり基本的なレベルのことを学習していますが、やはり一から自分で手を動かして、なんらかの成果物を作れるということにはとても感動しました!

今後は今回、学習したUdemyのコースの応用編に着手し、(こちらはTypeScriptの学習も含まれている!)より本格的なアプリを作れるようになりたいと思います!

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

https://www.udemy.com/course/react_stepup/

ABOUT ME
Gaku
JTCでデータエンジニアっぽいことをしています。仕事ではGoogle Cloud、GTM、Google AnalyticsやKARTE、Datahubあたりを触っています。 本ブログではGoogle Cloudやデータエンジニアリング、たまに趣味などの記事をアップします。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA