【2021年最新】フロントエンジニア向けのアプリ開発4選
(こちらの記事は2021年8月に更新)
・ フロントエンジニアになるためにポートフォリを作成したい
・ 実務で使える技術を学びたい
・ お金をかけずクオリティーの高いアプリを開発してみたい
この記事はそんな人に向けて書いています。
今回は、Twitterでもしばしば紹介している、『フロントエンジに向けのアプリ開発記事』を具体的な解説と共に、まとめました。
これから転職をする方や、インターンに応募する人が、ポートフォリオ制作をする上で、使えそうな記事だけを厳選し徹底解説をします。
ぜひこちらの記事で紹介したアプリを自分で手を動かして開発し、より実力を伸ばしてみてください。
基本的に『無料 × 技術力向上 × ポートフォリオ化』できそうなものだけを紹介します。
目次
✔︎ フロントエンジニア向けのアプリ開発4選
・①【React×TypeScript】で簡単 TODOアプリ(Zenn)
・②【React×TypeScript】Netflixのクローン開発(Zenn)
・③ 【Next.js+TypeScript】でシンプルなニュースサイト(Qiita)
・④ 【React×firebase】入門講座(zenn)
①【React×TypeScript】で簡単 TODOアプリ(Zenn)
まず初めは、『React×TypeScript』の基礎をアプリ開発通して一通り学ぶことができる。
『ToDoアプリ開発講座』です。
こちらの講座ではReactの基礎でもある、以下の項目をTODOアプリの開発を通して学ぶことができます。
・ stateの管理と更新
・ コールバック関数の作成
・ イベントハンドラの実装
・ stateの型定義
・ propsの受け渡し
こちらの講座で、今まで学んできたReactの基礎をアウトプットすることで『使える技術』にすることができます。
サクッと基礎を総まとめすることができる講座なので、かなり有益です。そして『無料』
また、『React×TypeScript』の基礎を学びたいという方は、udemy講座の『Reactが楽しくなるスッテプアップコース』がおすすめなので、ぜひ参考にしてみてください。
こちらの講座の具体的な解説については、『【エンジニア必見】udemyのプログラミング学習おすすめ講座4選』という記事に記載しているので、合わせて参考にしてみてください。
JavaScriptについての学習がまだ足りていないという方は、『JavaScript本格入門』という書籍がおすすめなのでぜひ参考にしてください。
書籍の具体的な学習方法については、『【エンジニア必見】おすすめの技術書籍3選を徹底解説』の記事にて徹底解説しているので、ぜひ参考にしてみてください。
②【React+TypeScript】Netflixのクローン開発(Zenn)
次に紹介するのは、Twitterでも紹介してかなりの反響をいただいた、
『Nextflixのクローンアプリ開発』です。
記事内でも紹介されているのですが、学べる項目は以下のようにReactの実務現場でもほぼ利用するものが使われています。
・React×TypeScript
・Hooksによる状態管理
・外部APIとの非同期通信
・firebaseとの連携
アプリ自体のUIもおしゃれでかつ、実務現場でも必須項目の内容を多く含んでいるので、一通りやることで、かなりの実力アップをすることができます。
フロントエンジニアが序盤に苦戦する、APIとの連携も丁寧に解説しているので、理解しやすい構成となっています。
このクオリティーで『無料』とは恐ろしいですね。
またtypescript学習について、基礎から学びたいという方は、『プログラミングTypeScript 』の講座がかなり読みやすいので、ぜひ参考にしてみてください。
『React×TypeScript』を基礎から学びたいという方は、udemy講座の『Reactが楽しくなるスッテプアップコース』がおすすめなので、ぜひ参考にしてみてください。
こちらの講座の具体的な解説については、『【エンジニア必見】udemyのプログラミング学習おすすめ講座4選』という記事に記載しているので、合わせて参考にしてみてください。
③【Next.js+TypeScript】でシンプルなニュースサイト(Qiita)
次に紹介するのは、『APIとの連携』を中心にアプリの開発をする、
『ニュースサイトアプリ開発』です。
アプリのUIもかなりおしゃれで、Next.jsを使っていることから、かなりスピードが速いです。
こちらの講座では主に以下の内容を学ぶことができます。
・コンポーネントの粒度
・next.js/link
・NewsAPIで記事取得
・getStaticPropの利用
・Vercelでのデプロイ
他多数..
一応代表的な箇所だけをピックアップしました。他にも今ままで学んできたReactの基礎なども改めて学ぶことができます。
こちらの講座をやることで『Next.js×TypeScript』といったモダンフロントのスキルをより向上させることができます。
APIとの連携についても詳しく解説しているので、これを元に他のAPIを叩いてみるなど、色々な応用に繋げることもできます。
④【React×firebase】
最後に、firebaseの機能の網羅的に学ぶことができる、『React×firebase入門講座』を紹介します。
こちらの講座では、firebaseの以下の項目を学ぶことができます。
・FirebaseAuth
・FirebaseStorage
・Firestore
・Realtime Database
・Hosting
・Cloud Functions
認証機能であるAuth機能から、ファイル管理をするStorage機能まで、実務でも必須事項の実装方法を、網羅的に学ぶことができます。
こちらの講座を通してfirebaseとフロント側の連携を一通り習得することができるので、かなりおすすめの講座となっています。
いかがだったでしょうか、最後に再度、今回紹介したアプリをまとめます。
・①【React×TypeScript】で簡単 TODOアプリ(Zenn)
・②【React×TypeScript】Netflixのクローン開発(Zenn)
・③ 【Next.js+TypeScript】でシンプルなニュースサイト(Qiita)
・④ 【React×firebase】入門講座(zenn)
他にも、当ブログでは『web制作者向けのロードマップ』や『WordPressの学習ロードマップ』なども出しているので、ぜひ参考にしてみてください。
