こんにちはカレイドです。
筆者はフロントエンドの知識0の状態からわずか5ヶ月にしてベンチャー企業のインターンにフロントエンドエンジニアとして働かせてもらうことになりました。卒業までの猶予ですが、実際のプロジェクトにアサインされて責任ある経験をさせていただけるということで今までの勉強がとても報われました。
今回は実際のところどのようなルートで、今のように働くことが出来たのか気になっている人のために、過去5ヶ月間の勉強内容についてご紹介します。
簡単な自己紹介です
簡単な自己紹介
こんな方におすすめ
- プログラミングの勉強を始めたはいいけど周りに成功者がいない
- 今勉強中だけど本当に正しい道なのかわからない。
スタートは1月中旬。まずはHTML/CSSを身に着けた。 全ての土台はここから
もう振り返るのも懐かしいですが、スタートは1月の中旬どんなプログラミング言語をやったらいいかもわからず、悩みに悩んでいたのが事実です。
まずは王道Progate
ひとまず、わたしはフロントエンドに関する知識が0だったこともあってまずはProgateをやってみようかなーぐらいの感覚でした。
月額1000円で無制限に勉強できるしいろんな言語にふれよう!という意味合いもこねて有料会員へ。
元々いろんな言語に触れたかったのもあり、1ヶ月は色々触る目的でした。
【プログラミング学習のProgate】HTML & CSSのレベルが11にUPしました! https://t.co/Da3V5hRDpU #Progate
— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) January 13, 2019
私がTwitterで始めた当初です。
HTML & CSS 学習コース 上級編を修了しました! https://t.co/KeIAjf3WOL #Progate
— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) January 14, 2019
わずか二日ほどで上級編まで終了(普通にWebサイトがどのように作られているかはわかるレベル)。
ここから確か道場(実際の仕様書を元にホームページを作る)が始まっておざなりな暗記では太刀打ちができず撃沈しました。
デザインを見てそれ通りにCSSを当てるって想像以上に難しいのを覚えています。 特にmargin padding をどうやって使い分けるかは至難の業です。
progateは完璧に余白を一致させないとエラーとして認識されしまいます。しかし、初心者の段階で細かくやりすぎると嫌になってしまうのであまりにも合わないようだったら正解を見てしまうことをお勧めします。
JavaScript 学習コース Ⅳを修了しました! https://t.co/2lihsFlDof #Progate
— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) January 19, 2019
そしてそのままJavaScriptへ。私が思う基礎 if for 関数 変数などについて勉強をしました。
すでに私は以前から研究で軽く使っていたPythonでその辺の知識ぐらいは持っていました。なのでほとんどJavaScriptで書くとこうなるぐらいというのを復習したレベルです。
2月 本格的な勉強から離れて自分探しのプログラミング
1月は絶対に必須と言われていたHTML/CSSを重点的にやりました。先ほど言ったようにProgateではいろんな言語触ってみようと思って
Ruby,PHP,Python,Reactなどなどいろんなものを触りました。
そして、Progateを半ばでやめて私の人生を変えたUdemyと出会いPython and JavaScriptに言語を絞りました。
Udemyの最初は実はPythonから
お待たせしました。udemyを使ってみた感想です。有料の価値があるのか迷っている人はぜひUdemyのPython系の講座がセールでこれでもかというぐらいお得なのでまとめてみた。 https://t.co/7hqzyO9khc
— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) February 14, 2019
今はほとんどやっていませんが一時期は本気でPythonをやろうと思っていたためFlaskやDjangoと呼ばれる。ウェブアプリを作るフレームワークなども勉強していたぐらいです。JSでいうReact Angular Vue.jsのようなものです。
Pythonもこの1ヶ月で簡単なECサイトを作るぐらいの知識は多分手に入りました。0から作れるわけではないですが、見よう見まねで作成していくことはできると思います。
今回はインターンへいく過程の紹介なのでPythonの話はこの辺にしておきます。
JavaScriptのバックエンドNode.jsの存在を知り勉強も
Javascriptの役目なんて当時はHTML/CSSとセットで使って動きをつけるぐらいの認識しか持っておらずそれがPythonやRubyのようなバックエンドと同じ働きをするなんて正直思ってもいませんでした。
しかし、就職先の社員さんやメンターさん(企業で内定者一人一人についている)などから色々助言をいただきNode.jsを知りました。そして社員さんがReactを使ってフロントをデザインしたことがあるというアドバイスを頂いてそれが何かはわからなかったですがそれをやってみようとなりました。
始まりはとても単純でした。でもReactに限らず最近のフロントはJSだけでなんでもできると言われ、デザインとロジック両方出来てしまう。
学ぶことは最小限にできるところがとても魅力的でした。
3月はReact, Node.js一色で基礎に励んだ
使っていた講座等は以下のように
【Udemyセール】JavaScriptおすすめ講座【5ヶ月で手に職をつけるために使った講座】
全てここで紹介している通りです。
Udemyを使うなら実際の基礎として必要になる講座はそんなに必要ありません。
なので手軽に始めることが出来ます。
先月のudemy勉強時間が←
今月が→になりますが、一日あたりの時間に直すと約3時間見てることになります。実際はビデオ止めてコーディングもあるのでこれ以上やってると思いますが… pic.twitter.com/GmEXb49beJ— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) April 1, 2019
2月、3月のUdemyの勉強時間ですがご覧の通りです。1日あたり約3時間の動画視聴をしていますが、コーディング中はビデオを止めながらやっているので単純計算で二倍以上の時間を使っていることになるので1日おそらく8時間近くはコンスタントに勉強している計算になります。
よく、カレイドさんは成長が早いと言われますが、実際はただやっている分量が多いだけだと思っています。育児などで忙しい主婦の方なんかは毎日1時間取るのでも精一杯でしょうし、本当に尊敬します。だからこそぜひ、周りと比較せずに自分のペースで続けてもらえればと思います。
私は今、業務に疲れ果ててなかなか業務外でコーディングということが出来ていません。なので忍耐力という面では主婦さんたちの方が圧倒的にすごいと思っています。
というわけでカレイドは単純に飲み込みが早いというより、たまたま学生で時間があってまとまった時間を確保することが出来たので成長が早いだけに見えるのです。おそらく同じ時間分をコミットすれば誰でも私と同じような状態にたどり着けると思います。
4月からはReact, Node.jsを組み合わせた応用アプリの構築
3月は先ほど紹介した記事にある通り土台固めです。Webエンジニアとして働くなら最低限の知識としてフロントエンドもバックエンドも知識を持っておいた方がいいと思ったのでひとまずはこなしています。
そしてそれぞれ単独で勉強が終わったタイミングでいよいよそれらを合体させてアプリを作り始めたのがこの4月5月です。
サイト模写ならぬアプリ模写ですね。
おはようございます!🥰
semanticUIかっこよかったのでudemyでないかなと思ってたらあった🙄
しかも自分がずっと使って来た講座の人だったので安心感
今日明日で終わらせます😆😆 pic.twitter.com/hXZamUIyJX
— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) April 19, 2019
記事内では中級編に位置するアプリです。正直ツイートで今日明日で終わらせますとか書いていますが、無理でした。
1週間近くなぜその構築をするのかいまいち理解が出来ずに苦しんでいました。
でもやっぱりわからなくても前に進んでしまうことが大事でした。
それはなぜか、一見意味のないような勉強の時にふと、点と点が繋がって以前の問題の絡み合っている紐が解けていることがあるからですね。
私の場合は無理やり1周終わらせてもう一度同じ説明をみると意外とすっっと頭に入ってきました。
プログラミングはそのセクションの勉強単体で吸収することが全てではないと思っています。
例えば変数のセクションで変数を学んだから終わりかというとそんなことはないのです。関数のセクションでも変数は使うので知らない間に変数も勉強していることになる。
それが新たな発見に繋がることもあります。
先日ReactのつまづきポイントでState管理の話がありましたが、あれは確かにReactの基礎です。でも基礎だからこそ、それ以降のReactの勉強において必ず出てくるわけです。
にも関わらずStateの先へは進まずむしろ逆に戻ってしまう人が多いんですよね。基礎を理解していないといって。
スポーツで言えば筋トレで部分ごとの練習ばっかりしていて実際のプレーをする前にまだ筋トレが必要だと思ってやりもせずに戻ってるのと同じです。
もう一つ例をご紹介します。
先日JSの基礎に関するツイートをしましたが、たくさんの方に反響をいただいて意見をいただくことが出来ました。
JavaScriptの勉強ってすごい難しいですね。
何がと言うと、最低限の基礎として知っておけばいい事がどこまでなのかの定義が非常に曖昧。
document.何とかなんてReactやる上だと最初のおまじないとして唱えれば以降やる必要ないし。
Reactをやる上での最低限のjsの知識とは?— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) August 26, 2019
確かに基礎は大事です。でも先へ進んで戻ってきた時にわかることもあります。基礎をおろそかにしていいわけではもちろんないですが、少し背伸びをして戻ってくると実は簡単に解けることもあるよってことです。
RPGやったことある人はたくさんいると思いますが、同じレベルの敵と戦い続けてももらえる経験値ってどんどん減ってくるんですよ。
もしくはレベルに比例して自分が感じる成長度合いは小さくなる。
私が考えるそのセクションで抑えてほしい理解度は6割です。
もちろん世の中には本当にそのセクションで学んでほしい6割も学んでないなって人はいます。
でも、もし流石に6割学んだなと自分で思うならば、一歩先へ進んであとで帰ってきてみて見る方法も試してください。
合わなかったらやめればいいだけですからね。一つの勉強法としてお勧めします。
少し話が逸れましたが次は5月です。
5月 複数のアプリを構築しつつ自作アプリに着手
5月。Webアプリを作り始めます。
私の記事をご覧いただいた方にはお分かりになるかと思いますが、結構な数の模写アプリをやっているので5月の中旬ごろまでは割とずっと新しいアプリを作って、脳みその引き出しや使えるコードを集めたりしていました。
私のモットーは6割。このときには残念ながらCSSスキルがかなり衰えていたところもあってフレームワークの力を頼ることにしました。
全て0からWebアプリにしてしまうと膨大な時間がかかってしまうので取捨選択が必要でした。
実際の業務でもデザインを真似ることはあっても1からデザイン自体をすることはありません。なのでアプリを作るという目的には反していると考えたのは正解でした。
もちろんデザインもやりたいという人もいると思います。そういう人はテーマを分けることをお勧めします。
初めてなのに両方は荷が重いです。よくTwitterでデザインがだめだから、載せづらいって言っている人を見ますがそのためにフレームワークがあります。BootStrapでもsemantic-uiでもある程度の見栄えには持っていけます。
今日からいよいよ自分のwebアプリ作り始めました。果たして完成するか
分からないけど頑張ってみます。
まずはリリーす🥰
— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) May 22, 2019
この日からいよいよ基礎から応用の最終ステップ、Webアプリ作成が始まりました。
苦労についてはここでまとめているので興味があれば読んでみることをお勧めします。
【プログラミング】勉強期間4ヶ月でWebアプリManehabiをリリースしたお話【機能追加のお話も】
6月 2週間でWebアプリリリース インターン活動の開始
5月から引き続き、Webアプリの作成です。今でも思いますが色々な面で6割です。
例えば私はこのアプリに関しては自分で1からロジックの実装やモデルの設計などを意識して作っているのでテスト設計などについては一切やっていないです。
多分PHPやRailsをやっている方なら必須だ!と言われるかもしれませんが、テストもまた人の裁量によるところが多いので、Webアプリを初めて作る段階の時に特段意識する必要のないことだと思っています。つまり完成度を目指すことに膨大な時間がかかってしまうということですね。
テストとデザインはあくまで自分の裁量で出来が決まる。必要最低限で私はいいと思っています。
私のスタンスとしてはあくまで知識として知っておく。あとは入った企業で企業内の一つの基準を例に学ばせてもらうという感じでした。
とりあえずそんなこんなで6割を目処にある程度機能を省いてアプリをリリースしました。
https://t.co/RZmhzd7cOd
ついに完成しました。プログラミング学習から2月から本格的に始めて、120日ぐらいでオリジナルアプリまで作成できました!制作期間は14日間
皆で習慣を共有、可視化して継続力を高めていくアプリです!感想などはDMかリプでくれると助かります。どんなものでも大歓迎です!— カレイド@独学4ヶ月でエンジニア&半年でブログ収益1万突破 (@kaleido0101) June 5, 2019
そして後半戦
全部でインターンは3社面接しに行きました。メインはWantedlyです。1社目に関しては言語違いのためそもそもいく気はありませんでした。
そして2社目はとりあえず実力試しで、3週間ほどインターンに参加させてもらって実際の実務を経験させてもらいました。
【プログラミング】独学から実務へ移って1週間で感じた壁と学び【前編】
これが7月上旬まで続きます。
7月 覚悟を決めて卒業までお世話になるインターンを決定
いよいよ最後です。体験させてもらったインターンはReact+Firebaseでしたがバックエンドの業務レベルも知っておきたかったということで。
2社目のReact+Node.jsでがっつり出来そうなところを選択しました。
この辺の苦悩については
実務プログラミングバイト3社面接行って最終的に決めた1社の理由について話すよ!
この記事を参照してみてください。
結局最後は自分が何を求めるか、どんな社風が好みかですね。
そして現在もなおその会社で働いています。もうすぐ9月になりますがだいぶ慣れてきたところです。
まとめ 全体のおさらい
ざっくりになりましたが、基本通りです。
まとめると、
1ヶ月目 自分がやりたい言語をProgateで見極めた
月額1000円なので色々なものを触れやすい。そして深くまでは立ち入らないのでむしろちょうどいい。
あとで反発して他の言語に浮気するぐらいなら最初に触れてしまう方がいいかもしれません。
2ヶ月目 基礎を完成させよう
自分の土台となる基礎を学ぶ。
まずは全体を把握するための基礎部分を学びます。でもとらわれ過ぎてはだめです。
3ヶ月目
応用アプリを作りながら実践ベースで学ぶ。模写サイトはたくさんやるのに模写アプリをする人は少ないように思います。
アプリを作るのも同じように模写から入る方が効率的です。Udemyではそれが実現出来ます。
4ヶ月目
応用アプリと自作アプリ。この辺は私は模写アプリ多めでしたが人によっては自作アプリに時間を多めに割いてもいいと思います
以上で終わりです。
インターン到達まで特別なことはしていません。正しい道で正しい選択をしながらインプットアウトプットを繰り返し続けるだけです。
誰かの一つのルートの手助けになれば幸いです。