React+Redux+Firebaseでポートフォリオを実装する手順を解説します。

こんにちは、けんぞうです。 React.jsでポートフォリオを作ったので、そこまでの具体的な学習手順などを解説しようと思います。

ちなみに僕が作ったのは「Devmap | 独学ロードマップ共有サービス」です。画像文字載せサービスの「TextOverlay」もReactで動いています。

この記事をざっくり言うと
  • React+Redux+Firebaseでポートフォリオを作る具体的な学習手順について解説する
  • ポートフォリオサイトではなく、ログイン・投稿機能のあるサービスを実装する
  • カスタムドメイン設定などをしない限りは、全て無料で完成する

Reactでポートフォリオを作る必要性【転職の文脈】

defaultImg

フロントエンドエンジニアとして転職を検討しているならReactに触れておいた方が、可能性が広がるのは自明ですが、バックエンドエンジニアとして転職を検討しているとしてもReactでポートフォリオを作っておくことは有効であると思います。

実際に転職活動をしてみるとわかりますが、多くのWeb系自社開発企業さんでは「バックエンドだけを担当する」というような明確な切り分けがされておらず、バックエンドとフロントを兼任する形での就業スタイルが多いからです。

そしてモダンな開発をしている企業さんに限っては、フロントはReact(またはVueなど)でリッチにしていてバックエンドはRailsで動かしているというケースがかなり多いです。

したがってバックエンドエンジニアとしての転職を検討しているにせよ、フロントエンドのライブラリReactを理解している証明としてポートフォリオを作っておくことは転職において、非常に有利に働くと言えます。


基礎知識の構築〜実践までの流れ

defaultImg

全体の流れ
  • 基礎:優しめの教材で基礎を学ぶ
  • 応用:Youtube動画で学びデプロイする
  • 実践:コンセプトを決めて一から作る

基礎:優しめの教材で基礎知識をつける

defaultImg

stateの役割とかコンポーネントとか、最初のうちはなかなか理解しがたいと思うので、まずは優しい教材で基礎知識構築を行いましょう。

 

 

ProgateのReactコースに関してはあまり充実しているとは現時点では言いがたいので、React公式チュートリアルも触っておくことをおすすめします。 マルバツゲームを作りながら学ぶ形式なので、それなりに楽しめるかと思います。

応用:The Net Ninjaさんのチュートリアル動画でデプロイまでやり切る

defaultImg

上記の手順で基礎知識をつけることができたら、次はより実践的にアプリケーションを実装する手順を学習しましょう。

この際に最適な教材としては「The Net Ninjaさんのチュートリアル動画」です。


上記のツイートの通り、Youtubeに上がっているチュートリアル動画の中でもかなり質が高い印象です。本当にお金を払って良いレベルだなと。

このチュートリアル動画ではReact+Redux+Firebaseで、ログイン・投稿機能つきのサービスを実装しデプロイするまでの全体像が解説されています。

僕はここまでで、「まだ全体像を掴めていないかなー」という感触だったので、「React.js Firebase Tutorial: Building Firestore CRUD Web Application」という記事でCRUD実装をおさらいしました。

実践:自分でコンセプトを決めて実装する

defaultImg

上記の手順でだいたい全体像が掴めてきたかと思うので、いよいよポートフォリオの実装に入りましょう。

コンセプトは自分で決めると良いですが、せっかくなのでログインや投稿機能がついたものを作る前提で考えましょう。(例:技術について語れるSNSなど

僕はプログラミングを独学した経験から「再現性の高い独学ロードマップが沢山見れるサイトが欲しいなー」という発想から、Devmapを作成しました。
こんな感じで「あの頃にこういうのがあれば、良かったのになー」という自分の経験に紐づけて発想すると良いアイデアが思いつきやすいかと思います。


学習時の注意ポイント

defaultImg

  • デプロイまでを早めに経験しよう:インターネットに自分が作ったサービスが公開されるとモチベーションに繋がります。早めにデプロイをして、改修作業に時間を使おう
  • 手を止めてはいけない:受け身な学習スタイルではスキルは発達しません。何を学ぶ時でも手を動かそう。

👇今日のまとめです。

defaultImg

 

関連

「作りたいものを作れ」というアドバイスが、プログラミング初学者の方には有効ではない理由 【ご注意】エンジニア転職をするならポートフォリオ共有に「Google Drive」はやめとこう