おっさんがフロントエンド技術者にチャレンジ

# はじめに
おっさん派遣技術者です。
訳あって、フロントエンド技術者（Reactアプリ）にチャレンジする事になりました。
職場が変わってもWEBを再検索しなくて良い仕組みを作るのが目的です。
いつもお世話になっているQiitaさんに、備忘録として記事を残します。

Reactアプリは個人的に良いと思います（かなり良い意味でショックを受けました）。
だって、使用するプログラミング言語がJavaScriptのみだから（Html、CSSはどの言語でも使うので除外）。
SpringBootは、Java／JavaScript／テンプレートエンジン（Thymeleaf）と色々覚えることがあったので面倒でした。TERASOLUNAは、もっと面倒でした。

## 学習の流れ

この書籍のアウトラインにそって学ぶと良いことが分かりました。
公式リファレンスだけだと、迷子になりやすいです（実際、迷子になりました）。
私はこの書籍を購入して再入門しています。
- [React.js&Next.js超入門 第２版](https://www.shuwasystem.co.jp/smp/book/9784798063980.html)

入門用の書籍は数種類あるので、自分が携わるシステムにマッチした書籍を選択しましょう。
最初にこの入門用の書籍を買えばよかったと後悔しました。

学習の流れは...
1. 開発予定のシステムにマッチングした入門書を購入し、書籍の内容をマスターする。
1. Reactのドキュメントを読みながら、コーディングする。
1. JSXの公式ドキュメントを読みながら、コーディングする。
1. NEXT.JSの公式ドキュメントを読みながら、コーディングする。

## つまづいたところ

* TypeScriptとJSXを見分けることができない
* JavaScriptとTypeScriptを見分けることができない
* Reactの基本を理解しない状態で、Reactアプリを作り始めた（Reactのja.react.dev/learnのクイックスタートを理解してから、Reactアプリを作ったほうが良い）
* 配列のuseState()に大分時間を取られた
* CSSのセンスの無さに絶望した

## 必要なスキル
HTML/CSS/JavaScript/TypeScriptをある程度コーディングできるスキルがないと、Reactアプリの基本を学ぶことは難しいです。
少し遠回りして、HTML/CSS/JavaScript/TypeScriptの基本を覚えたほうがよさそうです。
Reactアプリを作るために必要になるスキルは以下の通りです。
* Visual Studio Code（略して VSCode）の操作スキル
* HTML
* CSS
* JavaScript
* パッケージマネージャ（npm/yarn）
* TypeScript
* Next.js
* React、JSX

## フロントエンドって何？
フロントエンドとバックエンドを理解してなかったので、その違いをWEBで調べました。
初心者だとまず言葉の意味が分かりません。
- フロントエンドとは、ユーザーから目に見えている機能
- バックエンドとは、ユーザーから目に見えない機能
- 参考URL
  - [フロントエンド開発とバックエンド開発の違いとは？](https://jp.indeed.com/career-advice/career-development/front-end-vs-back-end)
  - [フロントエンドウェブ開発者](https://developer.mozilla.org/ja/docs/Learn/Front-end_web_developer)

## Visual Studio Code（略してVSCode）
* [インストール](https://azure.microsoft.com/ja-jp/products/visual-studio-code)
* [docs](https://code.visualstudio.com/docs#vscode)  

<details><summary>【編集中】拡張機能の一覧</summary>

|項目|内容|
|---|---|
|Bootstrap 4, Font awesome 4, Font Awe|Bootstrap4用のsnippets|
|change-case||
|Code Spell Checker||
|code-eol|改行コードを表示|
|CSS Peek||
|Draw.io Integration|お絵かき用のTool|
|ESLint||
|Excel to Markdown table|ExcelのクリップボードをMarkdownのテーブル形式に変換|
|Git Graph||
|Git History||
|GitLens||
|Graphviz(dot)language support for Visual Studio Code||
|HTML CSS Support||
|indent-rainbow|インデントをカラフルに色付け|
|IntelliSense for CSS class names in HTML||
|Jest||
|Jest Runner||
|Json Editor|JSONのエディター|
|JSON to TS|JSONをTypeScriptに変換|
|Live Server||
|Markdown All in One|Markdwonに必要な拡張機能をひとまとめ|
|Markdown PDF||
|markdownlint||
|Marp for VS Code|Markdown形式でスライドを作成|
|npm Litellisense||
|Partial Diff|エディタ上の文字列を比較|
|Paste JSON as Code||
|Path Intellisense||
|PlantUML|UMLを書くためのTool|
|Prettier - Code formatter|ソースコード等のフォーマッター|
|Projects+ Todo+||
|Rainbow CSV|CSVをカラフルに表示し、絞り込みもできる|
|Regex Previewer|正規表現のビューワー|
|REST Client|REST用のクライアント|
|Simple React Snippets|ReactのSnippets|
|Sort JSON objects|JSONオブジェクトをソート|
|TODO Highlight|todoコメントをハイライト表示|
|Todo Tree|todoコメントをtree表示|
|Todo+||
|Vim|キーバインドをvimライクにする|
|vscode-icons||
|zenkaku||
|テキスト校正くん||
</details>

## HTML/CSS/JavaScript
HTML/CSS/JavaScriptは、下記URLで一通り学べる。
* [ウェブ入門](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web)
* [HTML 学習](https://developer.mozilla.org/ja/docs/Learn/HTML)
* [CSS 学習エリア](https://developer.mozilla.org/ja/docs/Learn/CSS)
* [JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript)

## パッケージマネージャ（npm、yarn）
パッケージマネージャとは、ライブラリ/フレームワークなどの追加・削除・更新を行う際、いい感じで依存関係の解決を行ってくれるソフトウェアです。
Webのコマンドをコピペして使うことが多い。
システムを構築する際は、使用するパッケージマネージャの知識が必要になります。
* [パッケージマネージャとは](https://e-words.jp/w/%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0.html)
* [npmとは](https://www.tohoho-web.com/ex/npm.html)　※詳細は[公式のドキュメント](https://www.npmjs.com/)を参照
* [yarnとは](https://qiita.com/akitaaa/items/c97ff951ca31298f3f24)　※詳細は[公式のドキュメント](https://yarnpkg.com/)を参照

## TypeScript
* tsファイル
    * 純粋なTypeScriptファイル
    * JSX要素の追加をサポートしない
* tsxファイル
    * JSXを含むTypeScriptファイル
* 拡張子を使い分ける理由
    * 拡張子でUIコンポーネントとロジックを分ける

## React
Reactとは、Web とネイティブユーザインターフェースのためのJavaScriptのライブラリ。
[公式ドキュメント](https://ja.react.dev/learn)を一通り読むことをお勧めする。

## JSX
JSXとは、JavaScript の構文の拡張。
JavaScriptをシンプルに記載するために使用する。
Reactと一緒に使う感じ。

## Next.js
Next.jsは、Reactベースのフロントエンドフレームワーク。
公式ドキュメントは、概要のみ確認した。
* [docs](https://nextjs.org/)