サーバーサイドエンジニアが本気で学ぶフロントエンド(React) Part1

今までサーバーサイドメインで開発を行なっていましたが、フルスタックを目指しているので改めてフロントエンドの勉強をしたいと思います！

経緯

会社でフロントエンドチームがReactを使用していて、いつも大変そう。 フロントエンドの経験も欲しいため、お手伝いしたい！！！

また、技術書典でReact x AWS Amplifyの書籍を出版したが、React側はノータッチだった悔しさから。

crazybrothers.booth.pm

参考資料

この記事を記載した日に購入したこちらの技術同人誌を参考としています。

booth.pm

私のスペック

※時期が被っているので、合計すると通算より多くなります

業界歴：2014年~

• C# : 歴5年
• Java : 歴4年
• C/C++,VB.NET : 歴半年
• PHP : 歴１ヶ月
• Python : 趣味レベル
• Ruby : 趣味レベル
• Go : 趣味レベル
• Vue/Nuxt.js : 趣味レベル
• jQuery : 歴5年

と、一応 Vue.jsを触ったことがあるので無からのスタートではないですが、今まで敬遠していたReactを真面目に勉強します。

前準備

フロントエンド開発に必要なツール等を羅列します。

• npm : JavaScript用のパッケージマネージャ
• npx : npmを使わなくてもnpmのパッケージを使用したコマンドが使えるやつ
• yarn : npmのコマンドをさらに使いやすく、そして早くしたやつ →主に一時的に開発環境を整えたりするときに使うやつ？(create-react-appとか)
• Visual Studio Code : C#やってる人からするとおなじみではあるけど、TypeScriptと相性良いらしい
• React : Facebookが開発したSPA(シングルページアプリケーション)のライブラリ　※フレームワークではない
• ES6(ES2015) : JSの標準規格。アロー関数, let/constなどなど、昔からのJSよりかなり進化している

Reactの事始め

実際にReactのコードを書いていきます。 ゴリゴリのCSharperだったことと、TypeScriptの時代が来ているらしいのでTypeScriptで勉強進めます。

# プロジェクト作成
npm create-react-app hello-world --typescript

# 実行
yarn start

お！、ブラウザ勝手に立ち上がった！！！

画面を表示するまで、コードを一切書かずに完了しました。

では、実際に作成されたプロジェクトの中身を覗いてみます。

hello-react
├── node_modules
├── package.json
├── public
├── src
└── yarn.lock

• node_modules : 開発に必要なパッケージが入る
• package.json : 使用しているパッケージや、ビルド用のコマンドを管理するjson
• public : 起点となるhtmlファイルや画像などが入っている
• src : 実際にコードを作成していくフォルダ
• yarn.lock : package.jsonのパッケージに依存するパッケージについて書いてあるとても長いやつ

Reactはライブラリなので、そこいらのフレームワークと違ってcreate-react-appを使わない場合はフォルダ構成の縛りも無いのかな？？

深夜のテンションで記載しているので、一旦ここまでとします！！！ 気力があれば翌日更新します。