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

はじめに

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

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

学習の流れ

この書籍のアウトラインにそって学ぶと良いことが分かりました。
公式リファレンスだけだと、迷子になりやすいです（実際、迷子になりました）。
私はこの書籍を購入して再入門しています。

• React.js&Next.js超入門 第２版

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

学習の流れは...

1. 開発予定のシステムにマッチングした入門書を購入し、書籍の内容をマスターする。
2. Reactのドキュメントを読みながら、コーディングする。
3. JSXの公式ドキュメントを読みながら、コーディングする。
4. 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）

• インストール
• docs

【編集中】拡張機能の一覧

項目	内容
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で一通り学べる。

• ウェブ入門
• HTML 学習
• CSS 学習エリア
• JavaScript

パッケージマネージャ（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ベースのフロントエンドフレームワーク。
公式ドキュメントは、概要のみ確認した。

• docs