前提
・開発経験1年半程度のエンジニアです
・普段はPHP（laravel）のバックエンド開発がメインです
・javaScript(jQuery)も実務で使います（たまに）
・vue（next）も少し学習したことはあります
・なのでフロントエンドに関しては未経験に毛が生えた程度の知識です
・フロントエンドフレームワークの勉強しようと思い、React, TypeScriptで簡単なアプリを作りました
この記事では作成したアプリと使用技術、その技術の勉強方法を紹介しますが、各技術の詳細、ソースコードの記述は割愛しておりますのでご了承ください。
成果物
https://news-app-ruby.vercel.app
*css等が整えられていないですが、「done is better than perfect」の精神で公開してます笑
おいおい直していこうかと思います
機能
・主要ニュースサイトの記事タイトル、記事URLをまとめたアプリ
・NewYorkTimes、The GuardianはAPIを提供しているのでAPIでニュースデータを取得
・上記以外のニュースサイトはAPIを提供していないので、各サイトのTOPページからスクレイピングでTOP記事データ（記事タイトル、記事URL）を取得
・NewYorkTimes、The Guardian、BBC NEWSの原文が英語のニュースはタイトルをマウスオーバーすると日本語翻訳される（GoogleAppsScript使用）
・どのニュースページも構造は同じなので、Reactのコンポーネントを使いまわしています（開発がすごい楽でした）
・UI/UXはまるでなっていませんが、割と便利なアプリで自分で日常的な情報収集用途として使っています
使用技術とその目的
1.React(Next.js) + TypeScript
APIデータの取得、SSG（static site generation）でページ描画
2.Python
ニュースデータを各サイトからscrapingで取得。JSONデータに変換してReact側に渡す
3.Azure Functions
上記pythonファイルのAPIサーバーとして使用
4.GoogleAppsScript（GAS）
英語→日本語に翻訳する際使用。JSONデータに変換してReact側に渡す
5.Vercel
上記アプリのデプロイ先
勉強方法と所感
1. TypeScript
・【世界で7万人が受講】Understanding TypeScript - 2020年最新版というUdemyの教材をメインに学習しました。かなりボリュームがありますが、包括的にTypeScriptを学べるのでおすすめです。
・javascriptに関しても、今までは実務で必要にかられたときにググりながら局所的に使用していたのみなので、今回包括的に学べてすごくためになりました。またES2015についても学べたのでこれもためになりました
・javascript知らない人でも問題なく理解できる教材かと思います。
2.React
・これも下記のUdemy教材をメインで学習しました。
1:【はむ式】フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
2:最短・最速で作る Youtube クローンアプリ React・React Hooks編
・２つとも完走はしておりません。１の前半でReactの概要を学習しつつ、２のアプリ制作の過程で知識の定着を図りました。
・1のReduxの箇所は難しかったので今回は飛ばしました（笑）。（おいおい学び直します。多分。。。）
・代わりにHooksを、公式サイトで少し学習しました。Hooksの方がとっつきやすかったです
・reduxが「Reactは難しい」という考えの一つの遠因のような気が個人的にします
3.Next.js, Vercel
・公式サイトのチュートリアルがわかりやすかったです。半日もあれば1
周できると思います。（next.jsを使って簡単なブログアプリを作る）
・vercelへのデプロイ方法も上記のチュートリアルで学べます
・複雑な設定なしでgithubにpushするだけで自動的にvercelにデプロイできるので、革命的に便利に感じました
・個人利用の場合は費用等はかからないそうです
・TypeScriptの導入方法も公式のドキュメント通りにやれば簡単にできました
4.Python
・実はPythonもほぼ初めて触りましたが、BeautifulSoupの公式ドキュメントみながらスクレイピング実装しただけなので、腰を据えて学習はしてないです
・PHPより簡潔にかけるなと少し感動しました。人気言語であるのは頷けます
・ただPythonは公式ドキュメントが読みづらいと思いました
5.Azure Functions
・スクレイピングをサーバレスで動かしたかったので利用しました
・AWS lamdaでもよかったかもしれませんが、Azureは無料枠があったのと、VSCODEとの連携が楽と聞いていたので今回はAzure Functionsを利用しました
・Azure Functions の Python 開発者向けガイドという公式のチュートリアルで学習しました
・VSCODEにextencion入れればVSCODE内で開発、テスト、デプロイが簡単にできるので、便利でした。このやり方も公式ドキュメントがわかりやすかったです
最後に
以上、簡単なアプリ開発を通して、React,TypeScript,next.js,Azureの触りの部分を学習しました。
React,Next.jsは公式ドキュメントが充実していたので初心者でも学習しやすかったです。
ちなみに上記技術スタックの学習に約2〜3週間（仕事終わりの1、2時間、休日2,3時間）費やし、アプリ自体は概ね3日間程で作成しました。
Reactは触っていて単純に楽しかったです。
下記の記事にもあるように、HTML側で、JS/TSを制御するより、JSXでJS/TSでHTML側を制御する方が自分にはとっつきやすかったです。
参照:JSXが実はベターな解だったのではないか？
現に今の職場では巨大なHTML文の中に所狭しとjqueryの制御が埋め込まれているのでかなりコードの可読性が悪くなっております。
スタートアップ等を中心にバックエンド、フロントエンドの垣根が低くなってきているようなので（ベンチャー、スタートアップの面接で実際に何度か聞いたことがあります）、折に触れてフロントエンドの学習もしていきたいと思います。
ただ、次の開発のアイディアが浮かびません。。。