こんにちはカレイドです。
この記事を書いているのは2019年12月31日大晦日です。
2019年は本当に色々ありましたが、人生を生きてきて一番飛躍した年、考え方を成長させることができた一年になりました。
年末でUdemyがセールみたいなのと、一年のまとめ、半年間仕事でプログラミングをしてきたので総決算として筆者のオススメ講座をまとめたいと思います。
筆者が就活をするにあたって作成した自作アプリManehabiはこちらから
実装方針や考え方はQiita体験記などのものは
【プログラミング】勉強期間4ヶ月でWebアプリManehabiをリリースしたお話【機能追加のお話も】
この辺読んでもらえるといいかなって思います。
簡単な自己紹介です。
なぜUdemyなのか
すでにここから私の実務経験を踏まえてお話します。
基本的に私が紹介する講座は英語字幕の講座がメインになります。英語と言っても字幕を日本語に変換して勉強できるので実質デメリットは0。むしろプラスになる要素がいくつもあります。
そしてなぜUdemyなのか、英語字幕を日本語字幕に変換する方法は下の記事に書いてあるので参照していただければと思います。
英語字幕しかない講座を日本語字幕にして勉強する方法を解説する【Udemyセールとおすすめ講座】
また、30日以内なら返金もできるのでその点も安心してください。一講座も1200円ほどなので安い。
その上だいたい私が紹介するものは20時間ほどは当たり前で入っているのだから驚きですね。
続いて英語字幕で勉強メリットはなんなのか。
英語字幕で勉強するメリットは 高地トレーニング 自走力 英語に触れる
結論から言うと自分で情報不完全なものを検索する能力を養えるところです。
こう聞くと
と思われるかもしれません。正直言うと私自身超丁寧に解説してくれた日本人には負けると思います。でも優劣を並べるなら
喋りもうまいし、講座自体の完成度も高い日本人≧私が紹介する海外講師＞喋りかた、もしくは講座の内容が残念な日本人。
一番上に位置する日本人は私の体感3%もいないと思います。
また、実際実務に入ってからそんな完璧な指導者に出会えるでしょうか。何でもかんでも完璧に指示されないと仕事ができない。そんな人間は入ってすぐにプログラミングの厳しさに挫折すると思います。だったら不完全な情報に対して最初から自分で抵抗をつけておいて、調べ方を練習をする方が最終的なメリットは大きいと思います。
また、分からないときに割と最後は英語で検索するという場面に実際の現場だと幾度となく出会うことになります。
そして心配しないで欲しいのですが、基本的にはハンズオンで講師が解説をしながらコードを書きます。
つまり、解説の内容がわからなくても画面のコードはわかります。さて皆さんは何ができるでしょうか。
そうですコピペです。
コピペをして調べましょう。私もどうしても講師の解説が納得できないときは、そのコードを引っ張って他で解説している記事とかをみたりしていました。現場に入ってもそれは同じ。先輩が書いたコードの中ですでに使われていた例えばArray.flatこれは配列の中身の階層を１次元flatにするものですが、最初は知らないので当然調べます。
基本的に現場に入ったら自分の知識として使えるのはよくて4~6割。
残りの足りない部分は当たるたびに調べるのが基本のスタンスだと自分は思っています。
なので早い時期から高地トレーニングをしましょう。そして面接でお決まりの質問への解答が答えられるようになったらもう大丈夫です。
あなたはプログラミングをやっていて困難にぶつかってきたと思いますがどのようにして乗り越えてきましたか？
私が今の職場に入る前のインターンでお世話になった社長さんが言ってたのは聞くのも力だけど一人は聞きすぎてなんでも頼って、自走する力をつけていなかったので最後はやめてしまったと言っていました。
もちろん私が紹介する講師の方はシリコンバレーで働いていたり、私自身が実際に体験した講座で内容は保証しますので安心してください。
筆者の人生を変えた講座たち
それでは実際に使った講座をご紹介していきます。講座を使いながら意識しておいて欲しいことも書いておくので参考にしてみてください。
筆者はプログラミングの知識を少し持っていたので厳しいところは別で補えるようにしています。
最終的に筆者が面接時に持ち込んだポートフォリオを作成するのに必要十分な講座を厳選して紹介します。
いきなりReactへチャレンジ?
筆者がなぜReactをやり始めたかと言うと就職先の社員さんでReactを使ったことあるよというのを聞いたこと、その他入社までに何をしたらいいか聞いたところ、他の社員さんにはNode.jsなんかで簡単にWebアプリ作れるからやってみたらいいよと言われたこと。
この二つを調べるとどちらもJavaScriptだったのです。私が当時知っていたJavaScriptではそんなイメージはなかったのですが、WebアプリといえばJavaというイメージしかなかったのでちょっと衝撃だったのと技術の発展を感じました。
と言うわけで私は手始めにこちらのReactの講座を取りました。
React - The Complete Guide (incl Hooks, React Router, Redux)
ただReactをやるにあたって最低限知っておいて欲しい知識があります。それは基本的なJavaScriptの構文だったりHTML/CSSが何かということです。実際講座の中で知っておくべきHTML/CSSは軽くしか出ませんが土台になるので別で学んだ方が良いと思いますので本当の初心者さんは、まずはこれ
Build Responsive Real World Websites with HTML5 and CSS3
正直これだけでかなりボリュームあります。最低限学びたい知識はここで手に入るのでこれを澄ませば大丈夫です。
中身見たらわかるのですが、実際にWebサイトとしてありそうなデザインになっているのもやる気を出させてくれますね。
そして、Reactですが、Reactで必要な基本的JSの知識は講座内で学べますが、筆者もこの部分は日本語の方がスマートに理解できるかなと思って記事書いてあるのでそちらを参照するもよしです。
【プログラミング】HTML/CSSを学んだら次はJavaScript！最低限の知識を紹介します
JavaScriptからReactへ。map関数,三項演算子、論理演算子【プログラミング】
この辺は絶対に抑えておきましょう。多分何度も難しいなと思って立ち戻ると思いますが高地トレーニングだと思って頑張りましょう。筆者はとりあえず分からなくてもコードを写していました。そして３週目くらいであぁそういうことか！よくなっていました。
意味は後から理解すればいいのでまずは完成を目指しましょう。
特に筆者が勉強しながら考えておいて欲しいなと思うのは自分だったらどのようにコンポーネントを切り分けるのかと言うところです。講師の方は当然のようにこのファイルを作ってこのコンポーネントを作る（もちろん理由も話してくれます。）と言うように進んで行きますが、それは色々考慮してそうなったのであって実際にその切り方をするまでに考えた過程は人それぞれです。なので皆さんも実際の現場に入ったときになぜこのようなコンポーネント分割をしたのかきちんと説明できるようになっているとBestだと思います。
講師のコンポーネントの切り方が常に正解とは限らないです。この場合にはこう言う方がいいとか自分なりに意見を持てるようになったらばっちりです。
Reactの次はこれだサーバーサイド Node.js を習得するべし
正直これを最初にやってもいいと思います。こっちを先にこなしてしまえば基本的なプログラミングとは何か学べるので抵抗がだいぶ減ると思います。
どちらから最初にやるかは完全に好みだと思っています。両方試していただいてやりやすい方からやるのがいいかなと個人的には思います。
NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)
実はこれだけでアプリが作れてしまうのですごいところです。世の中の基本的なアプリはみんなこういう形でできています。サーバーサイドから情報を引っ張ってフロントの情報に変換(HTML/CSS）そして表示という作業で実はReactはいらないといえばいらないのです。ただ、現実問題として最近のアプリはReactを使っていることが多いです。その理由としては高速とか、表示の管理がしやすいとか様々な理由がありますが、最初からこう言う部分に突っ込んでも楽しくないと思いますので時が来たら腰を据えて学んだらいいと思います。
Reactの変わりとしてVueがありますが、ざっくり見た感じReactの方が個人的に理解しやすいのと海外で一番人気はReactです。なので筆者はReactをお勧めします。
この講座の使い方としては上から順にやっていけばOKです。
メール処理だったり、実際のクレカの決済処理なんかどういう風に行っているかなんかも学べるので本当に広く浅く勉強できます。最後にはGraphQLと呼ばれる新しい技術に触れているところもいいですね。
データベースにはMySQLとMongoDB両方やってくれたりしていますが、どちらか一方でも十分だと思います。
データベースを勉強する際になぜこの情報はここに入れるのかとか人によっていろんな意見が分かれる部分があります。
なのでここも自分だったらどうするのか。その辺に着目しながらやっていけるといいと思います。
そしてもう一つはぜひ変数名のつけ方も盗んでください。実務では自分だけがコードを書いて読むのではありません。自分が書いたコードを相手に読んでもらう機会がたくさんあります(ex.PRレビューなど)。そのとき一番大事なのはつけている変数名、関数名、クラス名です。ここで何をやっているか理解してもらえないと、情報に齟齬が生じたりバグの原因になります。なので誰がみてもやっていることがすぐにわかるような命名を身につけられるように少しずつ工夫していきましょう。
フロントとバックを学んだらそれを統合しよう。 MERNスタックに挑戦だ。
ここまで二つの技術を学んできた皆さんはReactとNode.jsがどのように絡み合ってアプリを作るのかまだ、深くは理解できていないと思います。
当時の私はこいつらをどうやって一緒に使うんだろうとワクワクしていた気がします。バックエンドの講座でその片鱗をすでにみていると思いますが、ついにそれらを統合する時がやってきます。
MERNスタックとは MongoDB,Express,React,Node.jsを混ぜ合わせて作る代表的なアプリケーションの枠組みのことです。
ReactとNode.jsについてはOKだと思います。MongoDBはデータベースのこと、ExpressはWebを取り扱うときに便利にしてくれるライブラリです。
どちらもNode.jsの講座ですでに学んでいるはずなので全ての準備は整っていることになります。
ここでは私が最初に使った講座をまず紹介して、より実践を積みたい方のためにいくつか載せます。
Node with React: Fullstack Web Development
この講座で学ぶのはよく皆さんがアプリを使うときにGoogleでログインみたいなやつをみたことがあると思います。そう言うものの実装から始まって、決済を実際にはどうやっているのか、そして顧客へのメールはどのようなサービスを使って配信しているのか、いよいよそれらを一つにまとめて本物のアプリに仕上げます。ここで学んで欲しいのは本当に実務で使うような知識がてんこ盛りということ。
アプリのログインだったりとか、一つ一つのコンポーネントの作成の仕方などなど、実際の実務とやっていることはほとんど変わりません。特にモデルの作り方とかそう言ったものも当然実務で使いますのでしっかりと練習しておきましょう。
以下二つは上と同じようにアプリを作りながらどんどんパターンを増やしていきます。こういうアプリ作成はいくつものパターンを頭にストックして、使うときに最良のものを引っ張ると言うのがオススメです。
そしてこの辺から何かのWebサイトやアプリを見たときにこの辺の機能を自分ならこう言う風に実装できるなーとか考える力が実務を行う上で重要になってくると思っています。
実務では知識を増やすというよりは今までの知識をどう混ぜ合わせるか、どのチョイスをするかの取捨選択力の方が大事になってきます。また、この部分よく使う割には実装めんどくさいな。元から簡単に実装できる関数あったりするんじゃないの？とかそう言う日々の小さい疑問を大事にしていけると実務でもきっと役に立つと思います。
私がポートフォリオ作り始めたときはこういう講座の中から確かあんな実装したよな、ってところからコピペをして作っていきました。現場でも確かこの実装は前にあそこで似たようなことやった気がする。から始まります。コーディングって案外本当に０からやることって少ないんですよね。なのでこういう正しいコピペの力をしっかりと習得しておきましょう。
MERN Stack Front To Back: Full Stack React, Redux & Node.js
こちらは先ほどは少し趣向が変わってSNSサービスのようなものを作ります。
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
こちらは最近出たコースです。基本的に二人のインストラクターがアプリを作り上げていきます。実際の業務において全てのパートを担当できることは望ましいですが、こう言った感じで主にフロントを触る人、バックエンドを触る人、データベースを触る人のように分かれていることもあります。またこのコースはNode.jsで私が紹介した講師の方が解説しているので彼の解説がわかりやすいと思った人にはうってつけでしょう。
この講座を通してぜひ、一つのアプリケーションって割と同じことの繰り返しなんだなってことを感じ取ってもらいたいです。一見全ての機能は単独で存在しているように見えますが、内部の構造は同じだったりします。単純にクラス名が違う、持っているプロパティが違う、データの扱い方が少し違うだけでほとんど同じ処理の繰り返し。だけれども画面へ表示されるときには全く別の機能のように見える。ここがすんなり落とせる人と、落とせない人で学習効率に差が出ると思っています。私がコピペを意識して欲しいと言うのはまさにここに直結します。ここが理解できてしまえば自分で機能を付け足すときにすんなりうまくいくのです。
AdvancedなHTML/CSSの知識を習得してデザインセンスも手に入れる。
ここまで講座をこなした人は多分もう自分でフルスタックアプリケーションを作る力を手に入れたと思います。なのでここから始めるもよし、ただ一つだけ欠けているものがあります。それは、今まで紹介したコースはどちらかと言うとアプリを作る技術に特化して学んでいたので実際に見た目が美しいかと言われるとなんかちょっとって思ったかたもいるかと思います。私のアプリもまだまだデザイン面は甘いと言わざるを得ません。
そんな人にオススメの最後の講座です。
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
実際ここで得た知識を私のポートフォリオのトップページに反映させてあります。見様見真似ですが、最低限のものにはなっていると思います。
特にFlexboxと呼ばれる知識、は実務でもめちゃくちゃ使いますので必ず使えるようになっておきましょう。
まとめ プログラミングだけを学ばずに自走できる力を
いかがでしたでしょうか。今回は私の人生を変えてくれた講座たちをご紹介しました。私のアプリではMongoDBに加えてGraphQLを使っています。
Node.jsの講座で基本は学んだと思いますがより簡単に扱うためのApolloというライブラリがあります。
ここではオーバーワークなのでこの記事で学んだ分だけでアプリは十分に作れますので安心してください。さらに学びたいと言う方は
【Udemy】セールを利用して実践的なアプリを構築できるおすすめ講座【中級編】
こちらを参照していただけると結構上級向けの物まで紹介しています。実際の実務ではまだGraphQLは触っていませんが、徐々に使う企業が増えるんじゃないかなと思っている機能です。
今回この記事を通して改めて伝えたいのはプログラミングだけを学んでも実務では活躍できません。どちらかというと、タスクに対して分からない部分は自分で調べる力。さらに実装における問題点をきちんとリーダーと会話して解決する力の方がどちらかと言うと大事だなと実務では感じています。
特にエンジニアの方達って私は他人の意見を積極的に取り入れてくれる方が多いです。私も自分では気づかない発想とかそう言うやり方があるのかって知ったときは嬉しいのでそう言う人はエンジニア向いていると思います。
なのでここってこういう実装じゃない理由とかって何か意味があるんですか？って私はよく先輩に聞くぐらいの質問魔だと自分では思います。
もちろん質問するにあたって自分はどう考えているのかって言うのは常に念頭に起きつつ話すようにしています。
これで2019年は終わりですね。プログラミングの記事でありながらどう言う考えが実務では必要になるのかって言うのまで書けたのでよかったなと思います。プログラミングはあくまで問題解決の手段です。また、就職がゴールの人はアプリ作って燃え尽きないようにしましょう。
それではまた次の記事でお会いしましょう。