13
Help us understand the problem. What are the problem?

posted at

updated at

React未経験者がUdemy学習で3週間で「すげえサイト」が公開できてしまった・・・

「すげえサイト」ってどないやねん!

とやかく述べる前に、たった一人で3週間かけて構築したサイトをご紹介します。

百聞は一見に如かず!!

まずはこちらのURLからご覧ください。
少しでも良いと思ったかたはLGTMお願いします🥺(例のやつです)

Image from Gyazo

分け合ってこちらにサイト移し替えました(2021/06/23)
https://shindan-page.vercel.app/

ページプレビュー

「いちいちページ遷移して見に行くの面倒臭いねん!」って人向けに概要を説明します。
今回制作したWebアプリは中古フリマサイトで取引されているスマートフォンの品質別の相場把握や、有名所のフリマサイト横断で価格比較や商品検索ができる便利ツール的なアプリケーションをコンセプトとして制作しました。
今やスマホは一人一台の時代になったので、”高く売りたい人”や”安く買いたい人”にとって中古品の直近相場や品質の程度による価格の幅を知れるのは嬉しいかなと思い作成してみました。

image.png

image.png

Reactのスゴいところは何と言ってもページの切替なく、ヌルヌルと動きのあるWebアプリを簡単に作成できるところですね。
条件変更に伴うグラフの再表示も俊敏にカッコよく実現できたりします。

1週間目:とにかくインプット on Udemy

Reactを習得するために今回受講した講座はこちらです。

講座のタイトル
Modern React with Redux [2020 Update]

URL
https://www.udemy.com/course/react-redux/

受講してよかった点

  • ボリューム満点。全52時間なので小規模から大規模なReactアプリの開発手法が学べる
  • とにかく説明が丁寧。「こうすれば動きます」ではなく「なぜこうすれば動くのか」の説明が深い理解を促してくれる
  • ミニアプリを作りながら学べるので単元毎に達成感がありモチベーションが下がりにくい教材設計となっている
  • 講師のコーディングを見て実際に自分でもコードを書きながらハンズオンで学べるので、コードを書く力が養われる
  • アメリカのトップ企業で働いているエンジニアが講師なので、変数の命名規則やお作法など細かい部分も実務で役立つ観点を取り入れて説明されている

image.png

「英語圏の講座かい。英語なんて無理。」 と諦めかけたそこの読者の方、ちょっとお待ちください!
私も3週間前まではそんな一人でしたが、この講座を受講してから英語教材が第一選択肢となる程、考えが一変しました。
理由は明白で、日本に比べて英語圏はUdemyの市場競争が激しい為に、教材・講師の質がとにかく高いんです!

僕も高校卒業して数十年来、英語なんて触れていませんでしたが、それでも問題なく理解できました。
どうしても苦手な方の場合でも、Google翻訳を使って日本語字幕に変換もできるので、英語学習のハードルはかなり低くなっていると思います。詳しくは以下の記事が非常に参考になるので興味のある方はご覧ください。

【Udemy】50講座以上取った筆者がおすすめ英語字幕講座と勉強法を解説してみる

52時間の動画教材なので盛沢山でありますが、今回制作したレベルであれば10.4時間分の学習内容で事足ります。
ECサイトなど規模の大きいWebアプリの制作となると色々なライブラリを駆使することになるのでもっと学習が必要です。
実際に私もまだ半分しか見終わってません。

教材の中ではアプリを作りながらハンズオンで学べるので、動画を見進める内に自ずとコードが書けるようになっています。
1週間目はとにかく動画を見ながら、講師と一緒にコードを書いてインプット作業に専念しました。

2週間目:作りたいプロダクトの構成を考える

1週間本気で動画を見進めると、ある程度の簡単なWebアプリであれば作れるスキルが身に着いています。
というより、得たスキルで何か自分でも作ってみたい衝動に勝てなくなります笑

もちろん動画で学んだことだけでアプリ制作が出来るわけではないので、作りたいプロダクトを先に頭に描いて、足りない部分はGoogle検索でつまみ食いで勉強する形になります。今回のプロダクトの例では、グラフ表示のロジックはネット上の記事を漁って実装しました。

元々、分析・研究目的でフリマサイトから収集したデータが手元にあったことに着想を得て今回のアプリを作りたいと思いました。

インフラやバックエンドはAWSを組み合わせて構築してます。⇩が最終的なシステムアーキテクチャーです。
この辺の構成は最初から描いたわけではなく、作りながら拡張・微調整して今の形に落ち着いたという感じですね。
image.png

  1. データ収集レイヤー (EC2+RDS)
    EC2上でPythonでスクレイピングコードを定期スケジュール実行し、RDS上のテーブルにデータを保持する流れを構築しました。無料利用期間であればt2.microインスタンスであれば起動しっぱなしでも無料で使えます。

  2. バッチ集計レイヤー(RDS + Lambda + CloudWatch)
    グラフに表示するような集計データは、アプリでの表示の都度、集計や計算を行うとパフォーマンスが最悪なので、毎夜間にクエリを実行して明細データが蓄積されたテーブルを基に集計データ用のテーブルを再作成する仕掛けを構築しました。

  3. APIレイヤー(Lambda + API Gateway)
    アプリで表示したい結果セットをRDSからSELECTするコードをLamdaで関数を定義しました。関数実行のトリガーをAPI Gatewayに設定することで、HTTP通信を介してアプリ側からデータを受け取ることが可能になります。「APIとの連携がよく分からない」という方も講座内で詳しく説明されているので大丈夫です。

  4. Hosting
     Webアプリの公開はVercelを利用しました。無料で使えて、マジで10分くらいあれば世界中に自分の作ったWebアプリを公開できて非常に便利です。コマンドたった1行書いてEnter押すだけでURLが発行されて世界中に公開できるなんて夢のようですね。この辺の使い方も講座内でしっかり触れられています。

AWSについてもUdemyの動画教材を利用して学習しました。以下の教材はAWSのサービスに加え、インフラの知識も補填して話を進めてくれるので特におススメです。

AWS:ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得

image.png

3週間目:実装してとりあえず公開! そして振り返り!

1~2週目で作るための力と作りたい物が決まったので3週目はひたすら実装です。

ここで大事なのは完璧を求めすぎないこと

完璧にキレイに実装しようとすると時間がかかりすぎます。また、難しいドキュメントに辿り着き、意味が分からなくなってモチベーションが下がって頓挫、なんて良くあることです。とりあえず動くものを作る これが大事です。

僕の作ったアプリも一見良さげに見えますがコードはまだまだ汚かったりします。パフォーマンスも最適とは言えないです。
それでも一旦作ってしまえば達成感に溢れ、「もっと良くしたい」という欲が出てくるものです。

その時に立ち止まって見直してリファクタリングすればいいんですね。改めて見直してみると、「何でこんな汚いコードの書き方したんだろ...」とか出てきます。その気付きが本当に大事で、効率的で可読性の高いコードの書き方を定着させ成長に繋がるんですね。エンジニアの成長ってこういう積み重ねなんだなあと思ったりもします。

まとめ

とまあ偉そうに書き連ねましたが、インフラ・バックエンド・フロントエンド通しでアプリ構築する経験は本当に勉強になりました。

プログラミングスクールに通っていた時期がありましたが、個人的にはUdemyの講座で独学でも十分だと思います。
今回はスクールでの知識は一切使わず、実際にUdemyで学習した知識だけでアプリ構築できましたし。
それくらい質が高いですし、費用対効果が断然違うと思います。コミュニティにも今やネット上で簡単に参加できますし、スクールに通うメリットって強制感くらいしかないのかなあなんて思ったりします。

エンジニアとして技術を高めたいと考えている方は、是非Udemy学習やってみてください。セール中であれば1講座 ~2000円ぽっきりでいつでも学習できるので。

僕も現在、無職なの年明けには仕事に就けるように頑張りたいと思います!
記事の内容についてご指摘・ご意見・ご質問等あれば是非とも宜しくお願いします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
13
Help us understand the problem. What are the problem?