WEB系 コーディング

プログラミングを独学で始めて3年間の成長ログ【現役フロントエンドエンジニアの振り返り】

投稿日:2020年10月31日 更新日:

こんにちは。

今日はタイトル通り、プログラミングを独学からスタートし約3年間が過ぎたのでその成長ログを書こうと思います。

自分自身、

「プログラミング独学は6ヶ月しっかりやればエンジニアとしてやっていける。」
「エンジニアは市場価値が高いから給料もいい。」

と何かしらで見聞きして飛びつき傷ついた者です。

決して順調にスキルが上がっているとは言えないので、こんな奴もいるのかと思っていただければ幸いです。
そして皆さんの独学の励みになればと思っております。

まず言っておきますが、
「未経験でもプログラミング独学は6ヶ月しっかりやればエンジニアとしてやっていける。」やプログミングやエンジニア転職は、
そんなに甘くないです。
これを実現させている人は相当すごい人だと思います。
そしてそのことを実感してる人も多いと思います。

ただ同時に相当頑張れば実現できる目標だとも考えています。

30超えてからプロサッカー選手を目指すことや、高校教師を目指して大学に戻って教員免許を取得して、、
のようにかかるコストと時間などプログラミングでお金を稼ぐことを比較すると
自分のやる気次第でコストも少なくできるし、間違いなく今から教師を目指すよりも時間はかからないです。

なぜ記事を書こうと思ったか?

独学を始めて3年ほど経ちました。
自分ではまだまだ満足できていないなと感じる毎日です。

そんな中、最近アルバイトでコーダーを採用しました。彼女も独学でコーディングの勉強をしていました。
彼女と話すと「ついていけるか不安です」といいます。
もちろん経験不足から起きる不安だと思います。

しかし自分も3年やっていますがスキルに満足できずに情けなくなることがあります。

1年以上勉強しているのにこのように感じている方は実は多くいるんじゃないでしょうか?
もし悩んでいる人がいれば自分の経験を書き「こんな奴もいるんかー」って思ってもらえるようになればと思います。

誰に向けて書いているか?

この記事は最近入ったアルバイトの方に向けて書いています。(多分見られることはないだろうが)

それは独学を始めて1年以上だがなかなか成果が出ず悩んでいる人やセンスがないと思い諦めかけている人も含みます。

私はだれだ?

そもそも「誰やねん!?」ってなってると思うので軽く自己紹介します。

・30代前半
・既婚
・京都の私立大卒(スポーツ系学科)
・独学3年以上4年未満。(Webに携わって4年目ってことですね)
・アルバイトから現Webチームのマネージャー
・平日1h、週末5hの勉強時間(バラつきあり)
・HTML/CSS/sass/JS/jQueryの理解あり
・副業収入5万ほど(不定期)

です。

大学はスポーツに関すること全般(経済、制度、倫理、栄養,,,etc)を学びました。スポーツ推薦とかではないです。
大学在籍中に留学と卒業後にワーホリを経験しました。
20代後半からプログラミング独学をスタートし少し前に3年が経ちました。
それまではWebといえばGoogleで検索するだけのものでした。
本業ではありがたいことに上場企業でWebチームの管理をしているマネージャをさせてもらっています。
副業では5万ほどの案件をちらほら依頼をいただいています。

「案件を受けてみよう!」と副業を始めたのは独学を始めて2年6ヶ月を超えた頃だったと思います。
それまではどこかスキル的に満足できず自信がなかったです。
会社であれば同僚に助けてもらったりで問題はなかったのですが、、

とは言っても2年6ヶ月で副業収益化はかなり遅い方だと思います。
めちゃくちゃセーフティにいきました。
これは性格の問題もあるかと思います。
確かにただ収益化をするのなら1年ほどでできたかと思います。
しかし、その頃のソースコードを見ると恥ずかしくなるほど酷いものです。(Web上の見た目は大丈夫)

当時の自分でもこれでお金はいただけないな、、って思っていました。
なのでコツコツ勉強を続けて、恥ずかしくないものを納品できるようになってから収益化を目指しました。

成長ログ

では前置きが長くなりましたが現時点のスキルまでのログをまとめていきたいと思います。
細かいことは別の記事で書いているので見てもらえると。

今回は大まかに刻んでいこうと思います。

0-6ヶ月

独学開始から半年でたどり着いたところは、
HTML/CSSの基本の理解でした。
今のスキルが100%だとしたらの当時は今の5%ほどの理解だったと思います。

ボックスの理解と主要なタグの理解だけだったと思います。
自分のセンスの無さに絶望していたのを覚えています。
「半年でエンジニアとか無理くね?」状態です。

ただコードを書くのが楽しかったので続けられました。
この頃のインプット方法はProgateの基礎と応用を繰り返しやっていました。
あとは参考書を見ながらインプットをしていました。

今思うと、ほぼ頭に入ってなかったと思います。。ただ読んで、打ち込んで、、の繰り返しでしたね。
この時期ってインプットするけど身を結ばないと思います。
ただここの努力をしないと後の伸びがないですね。
この期間で重要なのは「コーディングが好き」と「継続力」という要素です。
この辺は「エビングハウスの忘却曲線」をググってもらえるとわかると思います。

ざっくりいうと、

人は何かを学んだ時、
・20分後には42%忘れる
・1時間後には56%忘れる
・9時間後には64%忘れる
・1日後には67%忘れる
・2日後には72%忘れる
・6日後には75%忘れる
・31日後には79%忘れる

だそうです。
しかし自分にとって重要な物事や興味のあるものは忘れにくくなり、また繰り返し学習を続けることによって忘れる量も減っていくようです。

つまりイヤイヤやっていたり目標なくやっていると覚える効率も下がり、長期間苦痛を感じながらやり続けることになります。
そして実力もつかないという結末。

7ヶ月-1年

この頃はpositionやflexbox,animation,hover,sass,,,etc などをインプットをしていました。
始めて半年が過ぎた頃はある程度は組めていたのですが、なんとなく不自由さを感じていました。
しかし上記を理解できるようになるとグッと実装の自由度が上がりました。
また実装自体が楽になり、動きもつけられるようになり楽しくもなってきます。
簡単なLPなら実装できるようになっていました。

またこの頃からJavascript(以後JS)の勉強も始めました。
しかし全く理解できませんでいた。(めちゃくちゃ心折れたところです)
参考書通りにやって基本的な構文を作るぐらいですかね。。
楽しさは0でした。
コードを打ち込む機械のような感覚でした。

1年-1年6ヶ月

この頃から HTML/CSSの勉強を一旦置いておいてJSをメインに学習をしました。

この頃からUdemyを使って学習をしていました。(この頃はまだ実感できませんが、現在の自分のレベルまで押し上げてくれたのはUdemyでしたね。)

いくつかJS関連の動画を購入しました。
もちろん基本的なものの理解は進んでいましたが、実務に落とし込める様なレベルでは全くなかったですね。
ひたすらインプットの繰り返しです。
この期間の終盤ごろにやっとJSがどのような位置づけで何ができて、Webページとどう連動させるのかがわかってきたぐらいです。(たぶんめちゃくちゃ遅い方です)

1年6ヶ月-2年

この辺からJSで簡単なプログラムを組めるようになりました。
ただ書くコードは汚いです。
jQueryやプラグインの存在を知り、それらを実務に落とし込めるようになっていました。
案件ごとに少しですがプラグインを触ってカスタマイズもできるようになっていました。

そしてこの期間の終盤にCSSに戻ってきました。
この時期の終盤からフロントエンドとしての自覚が芽生え、ソースコードをきれいに書くことを意識しました。
この辺からCSS設計を考えるようになりました。

ソースを見返すと「ここのCSSはどこに書いてるんだっけ?」ってなことないですか?
またCSSのクラス名を決めるときに悩んだりしませんか?

CSS設計は更新性の観点でめちゃくちゃ重要です。(ビギナー脱却ポイントだと思ってる)

下記の2教材は今もみています。CSS設計や命名規則、Sassの考え方などが丁寧に解説されているので1度は読んでた方がいいです。

2年-2年6ヶ月

「コードを綺麗に書く」「開発環境整える」をテーマに実装にいかにスムーズに入り、更新性を高められるかを意識しました。
例えば、

・classの命名規則
・テンプレートフォルダ作成
・scssファイルの分け方
・mixin使用
・node.js導入

です。

今はBEMを基本として記述しています。
テンプレートフォルダとはindexファイルはもちろんリセットCSS、よく使うJSのプラグイン、scssフォルダなどを格納し、各ファイルの読み込み指定しているものです。

これをすることで案件が発生したら、テンプレートを複製しすぐに実装に入れるようになります。(下準備ですね)

この頃には
サイトの実装はできるようになっていました。
そして外に出しても恥ずかしくないものが書けるようになっていたと感じています。
実際に副業で7万の案件をいただきました。

3年-現在

現在は再びJSに戻ってきています。
以前まではES5で記述していましたが、ES6に切り替えて記述しています。
今の目標はjQueryではなくJSをスクラッチで書けるようになるのが目標ですね。
今後はAngular、React、Typescriptまで手を出していきたいのでJSをかなり深いところまで理解しておく必要があると感じています。

引き続きインプットして地道に実力を付けていきます。


まとめ

ここまで読んでいただきありがとうございます。
きっと世の中には自分のように頑張っているけどなかなか実感できなかったり、このまま続けてもいいのか?と悩んでる人が多くいると思います。

とりあえずもう半年続けてください。
個人的な感覚になりますが半年ごとにスキルが上がってくるのがわかります。
半年前にはできていなかったこと、理解していなかったことをリストにあげてみてください。
きっとできることは増えています。

まずはProgateとか参考書で基礎固め。基礎が固まってきたらUdemy。
自分はこれで独学スタートから2年ほどで収益化することができました。
しかしまだまだ単価が低いし効率もそれほど良くなく案件量も少ないです。
もっとスキルをあげて、単価をあげ、量をこなせるようになれれば今まで費やしてきた時間や費用はペイできると確信しています。

皆さんも諦めず、地道に続けましょう。
今活躍している人たちもこの苦しい時期を乗り越えているに違いありません。

また一定の期間が過ぎたら成長ログを書きたいと思います。

では。

-WEB系, コーディング
-, , , , , ,

執筆者:

関連記事

【心得】エンジニア採用で見かけた残念な5つのパターン

1年間通してエンジニア採用活動をしていて、書類選考や面接時に残念だなって思うパターンがいくつかありました。そのパターンを紹介

CSS

【CSS】文字を下線(アンダーライン)で目立たせる。コピペOK。

CSSでテキストにアンダーラインを引く方法をいくつか紹介します。普通の下線、太線、マーカー風の下線まで表現できる実装をまとめました。ブログやLP制作で、ユーザーの目線を奪うことは重要です。それにはテキストを際立たせる必要になる時があります。そんな時の為にアンダーラインの理解を深めましょう。

CSS

【CSS】outlineの特徴まとめ 〜borderとの違いまで〜

outlineとborderの違いについて書きました。今まではborderしか使っていなかったのですが、outlineの特徴を知れば、コーディングでできることの幅が広がります。脱初心者を目指して。

CSS

【CSS】first-childとfirst-of-typeの違いは?lastもnthも同じ考え方

first-childとfirst-of-typeの違いです。この二つは似ているのでときどき混乱しますので詳しく解説します。last-childとlast-of-type、nth-childとnth-of-typeの違いもこの考え方と同じです。

CSS

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)

CSS小技集。勉強しててイイなと思ったテクを共有します。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。