243
313

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

モダンWebフロント個人的学習ロードマップ #1 - React & JavaScript

Last updated at Posted at 2020-09-05

はじめに

今回は、フロントエンドエンジニアがほぼ必須で使うJavaScriptとReactのおすすめの学習ソースをご紹介します。今後の記事では、TypeScriptやGraphQL、環境周りやフロント設計についてもご紹介しようと思います

どの学習においても言えることですが、インプットしたらアウトプットすることが大事です。僕のおすすめはチームを組んで開発することです。Twitterなどで募集したら割と集まると思うので、是非やってみてください

設計、アーキテクチャ、フロントエンド、ブロックチェーンに興味ある方是非Twitter(@show_clements)フォローしていただけると嬉しいです!

幅広く学ぶ JavaScript編

はじめてプログラミングを始める人にもわかり易く解説されていてイケメンです。元Yahooのフロントエンドエンジニアをされていたみたいです。

次の2つはどちらも量が多めですが基礎を学ぶにはかなり良い教材だと思うので是非やってみてください!既にJavaScriptを学んだことがある方は、目次をパラーっと見て自信がないところだけやるので十分だと思います。

集中的に学ぶ JavaScript編

DOMについて、もう一度しっかり学んでおきましょう

ES5でECMAScriptは関数型プログラミングに適したメソッドを導入しました。この記事でも書かれているように、関数型プログラミングはテストが書きやすく、簡潔に記述でき、再利用性が大きく高まります。Reactは関数型プログラミングを使いこなしているため、関数型に対する少しの意識があると深く理解することができると思います。ただ、知らなくても使うことはできます。

jest.png

この時点で深くテストを学ぶ必要は無いと思いますが、一回触れておくと良いでしょう。

幅広く学ぶ React編

公式を読みながら、O'reillyのLerning Reactという書籍を読んでみるのが良いと思います。

集中的に学ぶ React編

Hooksやテストについてしっかり学んでおきましょう。

以下の3つは学習というよりこれらのライブラリを使うときに、ドキュメントを必要な部分だけ読むという感じになると思います。

僕は2020年からフロントエンド初めたのですが、その後入ったインターン先が嬉しいことにかなりモダンな技術を扱っている会社でReduxを使ったことがないのですが、必要な方はReduxも学んでおすすめします。必要になったら学ぼうと思っています。

もっと成長するために

アウトプット

実際にフロントエンドアプリケーションを開発してみてください。

  • Twitterなどで共同開発するメンバーを募集して開発する
  • インターンシップに参加して開発する
  • 就職して実際に開発する

イベントへの参加

connpassやMeetUpなどを使って探してみてください。良いイベントがたくさん開催されています。もくもく会などで交流を深めるのも良いと思います。

おわりに

僕もまだまだ勉強中なのでTwitterやコメントなどで色々教えて頂けると嬉しいです!
Twitter: @show_clements

243
313
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
243
313

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?