はじめに
おっさん派遣技術者です。
訳あって、フロントエンド技術者（Reactアプリ）にチャレンジする事になりました。
職場が変わってもWEBを再検索しなくて良い仕組みを作るのが目的です。
いつもお世話になっているQiitaさんに、備忘録として記事を残します。
Reactアプリは個人的に良いと思います（かなり良い意味でショックを受けました）。
だって、使用するプログラミング言語がJavaScriptのみだから（Html、CSSはどの言語でも使うので除外）。
SpringBootは、Java／JavaScript／テンプレートエンジン（Thymeleaf）と色々覚えることがあったので面倒でした。TERASOLUNAは、もっと面倒でした。
学習の流れ
この書籍のアウトラインにそって学ぶと良いことが分かりました。
公式リファレンスだけだと、迷子になりやすいです（実際、迷子になりました）。
私はこの書籍を購入して再入門しています。
入門用の書籍は数種類あるので、自分が携わるシステムにマッチした書籍を選択しましょう。
最初にこの入門用の書籍を買えばよかったと後悔しました。
学習の流れは...
- 開発予定のシステムにマッチングした入門書を購入し、書籍の内容をマスターする。
- Reactのドキュメントを読みながら、コーディングする。
- JSXの公式ドキュメントを読みながら、コーディングする。
- 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
Visual Studio Code（略してVSCode）
【編集中】拡張機能の一覧
| 項目 | 内容 |
|---|---|
| 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 | |
| テキスト校正くん |
HTML/CSS/JavaScript
HTML/CSS/JavaScriptは、下記URLで一通り学べる。
パッケージマネージャ（npm、yarn）
パッケージマネージャとは、ライブラリ/フレームワークなどの追加・削除・更新を行う際、いい感じで依存関係の解決を行ってくれるソフトウェアです。
Webのコマンドをコピペして使うことが多い。
システムを構築する際は、使用するパッケージマネージャの知識が必要になります。
- パッケージマネージャとは
- npmとは ※詳細は公式のドキュメントを参照
- yarnとは ※詳細は公式のドキュメントを参照
TypeScript
- tsファイル
- 純粋なTypeScriptファイル
- JSX要素の追加をサポートしない
- tsxファイル
- JSXを含むTypeScriptファイル
- 拡張子を使い分ける理由
- 拡張子でUIコンポーネントとロジックを分ける
React
Reactとは、Web とネイティブユーザインターフェースのためのJavaScriptのライブラリ。
公式ドキュメントを一通り読むことをお勧めする。
JSX
JSXとは、JavaScript の構文の拡張。
JavaScriptをシンプルに記載するために使用する。
Reactと一緒に使う感じ。
Next.js
Next.jsは、Reactベースのフロントエンドフレームワーク。
公式ドキュメントは、概要のみ確認した。