ネットには色々な情報がありすぎ、良いものも悪いものも新しいのも古いものもごったになっていて、初心者には見分けがつきません。
結局これが参考になった。よかったと思ったものを項目ごと並べていきます。無駄に時間を使わなくてよいようにコツみたいなのもわかる範囲でかきます。
周りに詳しい人がいないけど、独学で勉強されるかたの参考になれば幸いです。
誰かの役にたてば苦労は無駄ではなかった。
ぐぐって記事を探すとき
「+2022」を入れ今年以降の記事を検索する
結構無駄な時間が省けます。
理由：フロントエンド技術は半年前の情報があてにならない。
目次
1. エディタとPC
2. Portfolioサイト
2. HTMLとCSS
3. JavaScript
4. React
5. PHP
6. Python
7. Git
8. サーバとDB
9. フロントエンドとバックエンド技術
10. デザイン関係
11. 便利ツール
12. 質問サイト
13. 用語・辞書(神)
14. 公式ドキュメントの難解日本語の攻略法
15. 独学に疲れたら
（※項目に羅列方式なので、足掛かり的に使用してください。）
これわからんというのがあったらそれを自分で調べてみて理解してください。
結局のところ「理解」するためには自分で調べる必要があります。
(※本文中の本の画像はアフィリエイトリンクになります)
PCとエディタ
▶Windows or Mac?
お金があって環境構築でめんどくさくなりたくないなら＞Mac
お金ない人は＞Windows
Windowsで環境構築する人は、
（メモリ16G以上、Windows10proでないと厳しい、11はわからない）
「Dockerに最初から手を出すのはやめたほうがいい」
Windowsで環境構築する際に、Dockerからやりましょうっていう動画とかサイト多いけど、ここでほとんどの人が脱落していく。
Dockerは必要になった時でいいので最初からやらないほうがいい。
環境構築が全然できなかったらOSを確認したほうがいい。（Windows10Homeは仮想の環境構築はエラー頻発で初心者はやめた方がいい。これもできるっていう人がいるけど本気で勧めない。私はこれでどれだけ時間潰したかわからない。どうしてもやるんならWindows10proにする。10proだったらちょっとめんどいなくらいですむ。）
「環境構築を自PCにしなくてもcloudでコードは書ける」
cloudサービス利用するほうが簡単だけど、無料の範囲内で収まるか有料になるかという問題はある。
html,css,Javascript,Typescriptあたり↓
PHPもとなったらAWSのCloud9↓
▶エディタは「VSC」
Windows・Macどちらでも
理由：記事がたくさんある。無料。高機能。
注意点：機能拡張で表示を変える系のものは使わない方が無難（背景を透過させる、フォルダの色を変えるなど。突然終了したりなどする。）
code補完は「tabnine」
だけでよい。
拡張機能は「言語ごとに色々なので有名なのを入れる」
Vimなるものを抜け出したい
「q」「:q」で抜け出せると覚えておけば苦労しません
Terminalの管理者モード
「Windowsマークを右クリック」で項目がでてくる
環境変数の設定ウィンドウを開く
左下の検索窓に「path」と入力
Portfolioサイト
どこに作ろうかと悩むことがあると思います。
レンタルサーバは何でもできます。
無料でちょちょちょいと作るなら、テンプレートのあるサイトを利用するといいと思います。
▶レンタルサーバ
▶ぽちぽち系
Google site
AdobePortfolio（creativecloudを契約していると使える）
HTMLとCSS
まず初めに次の3冊を読む。あとは自分で作ってみる。
「できない」ところや「こうしたい」があったらぐぐって試す。
HTML,CSSは基本だけさらっとやって次にすすむ。ここにあまり時間をかけない。
ReactでUIなどがあるので、基本とレイアウトに関するところだけでよい。
あとは実際にやってみて覚えていく。
▶レイアウト レスポンシブ
レイアウトは、「z-index（レイヤーの順番）」「display（並ばせ方）」「position（細かい位置）」を組み合わせて作っていく。
値が様々で複雑になりやすい。順に理解すれば大丈夫。
▶HTML/CSS スタイルガイド こういう風に書くといいですよfrom Google
▶HTML/CSS（公式）
▶CSSのテンプレート部品集
▶こんなのできるんだ凄いって眺めるサイト
JavaScript
Javascriptは、基本的にHTML/CSSで整形したブラウザの表示部分を、思いのままに操作するための言語。ブラウザにあらかじめ設定してあるデフォルトオブジェクトなどを駆使して表示を追加削除したり、DBサーバとデータのやり取りをしたりなどをし、自動でいろいろできるように設定する関数を書いたりなどする。
学習の流れは、Javascriptの仕組みをざっと流して学習し、わからないところがあるときに個別に調べて他のテキストなどから勉強するのがいい。
Reactを勉強するときにも、結局その前のJavascriptがってなるので順を追って基本ちゃんとしてからフレームワークに進むのがよい。ただ、ReactではJavascriptを完全に理解しておく必要はない模様。急がばほどほどに回れ。
▶基本を一通り学ぶ
▶コードの書き方 良い例・悪い例
▶わかりにくいコールバック関数がすんなりわかる
▶メソッドがよくわかる
▶非同期処理
▶連想配列
▶Windowsオブジェクト一覧
React
Javascriptの基本がわかったら、実際のコードを書いていくところに（すぐ！）進むのが良いと思います。
このあたりで結構、どれを学べばとかで迷って、検索してもどれがいいのかわからない状態ではまってしまうと思いますがReactで大丈夫です。
ここに時間を使ってください。
Reactは、JavaScripやTypescriptなどでHTMLとCSSを取り込んで画面の表示を編集するのが主で、フックスというものと組み合わせないと動的サイトは作れない模様。
UIはMantineというのが最近じわじわと来ているらしいとのこと。フックスがいくつか用意されているかららしい。
仕事でやるならメジャーなMUIとか他の物の方がいいかと思います。
サーバーサイドも扱えるのがNEXT.jsらしいですが、この辺りはまだ勉強中でよくわかっていません。
パッケージ管理は、npmとyarnとあるようですが、yarnの方がいいのかなと思います。
私はnpmでやっていて（たぶんバージョン不一致関係）わけわからんエラーにまた悩まされるということがありました。
2021年末のアップデートでyarnでcreate-react-appをする場合には、yarnでやりますと指定する必要があるみたいです。
Reactはコンポーネント管理（これはこのバージョンでないとなどの依存関係があるらしい）が大事なんだなと思います。そこだけちょっと頭に入れておいてから学習に進むとよいと思います。
エラーまみれになると思うんですが、Windowsの場合で色々コンポーネントを追加していくと全く使えない状態になることが出てくるかと思います。（私がそうだったのですが）使用に耐えないくらいまみれちゃうときは素直にMacに買い替えることを検討するのがいいと思います。
推察ですがWindowsの文字数制限などもあったりするようで、依存関係が複雑になった時にファイル名が長くなってしまってとかでひっかかったりするのではないかー？と思います。
「パスが長すぎてエラー」とかのワードでググると解除方法の記事が出てきます。（自己責任で！お願いします。）
さらに、日本ではvueが（世界的にはReact）選ばれて使われてきたため、日本語の記事が不確かだったり少ないかなと思ったりします。
この辺りから、完全な独学をするよりはメンターを誰かにお願いしたり、オンラインサロンなどに入るのが時間を無駄にせずにすむかと思います。
▶npm yarn
「npm start」から抜け出すのは、「Ctl + c」
package.jsonに何を書く必要があるか
▶はじめに学習する系
▶webpack
▶UI
▶css
▶icon
▶Next.js
▶README.mdはマークダウン記法で書いてある
PHP
バックエンドはPHP、Java、Ruby、GOとかになるらしいですが、GOはまだあまり使われておらず（Flutterで使う。ネイティブアプリに強い）、他の3つがメインらしいです。
ただ、WebアプリとなったりするとPHPかRubyが選ばれるって感じかなと思います。
Javaは既存システムで使われていることが多いからという理由と聞きました。
Reactメインで使って、DBのやりとりだけPHP使うとかでWebアプリは作れるらしい。
その時に初心者がやるべきはLaravelではなく、素のPHPでPDOを使う。
サーバとDB
AWS、GCP、Firebaseなどがよく使われているらしい。
他にもFirebaseの後継でPostgreSQLが使えるSupabaseとかいうのも。
NoSQL（Firebase）はつかいづらいらしい。
MySQLとPostgreSQLどっちがいいんだい？って結構悩みましたが、PostgreSQLを推す人が多いように思う。
サーバー上でDB作るときは、ぽちぽちっとボタン押して作るようなのが普通に使われているようです。
MySQLは「phpMyAdmin」、PostgreSQLは「phpPgAdmin」を使う。
Python
スクレイピングはPythonがやはりよさそうだなと思います。
他の言語でもできるそうですが、よくわかりません。
スクレイピングで使用するなら、ほぼseleniumになるみたいです。
他の方法は静的サイトしかとってこれないので、今のところselenium一択でこれを覚えればいいです。
迷ったり調べてたら時間だけ経つ。seleniumで大丈夫。むしろseleniumでよい。
他にPythonは機械学習（AI）が有名ですが、たぶん理数系の人でないと無理げ。数学的なものが必要らしい。
▶スクレイピングするときの
CSSセレクタ確認
Xpath確認
Git
仕事でやるなら結局これやらないとダメみたい。
慣れるしかない気がする。初心者はマージはやらない試さない。
▶チートシート
フロントエンド技術/バックエンド技術
デザイン関係
▶画面デザインなどを無料で編集できる
▶4色カラーのコーディネイトはこーでねいとしてくれる
▶色の組み合わせ
▶色弱の人の見え方を確認できる
▶PNG SVG 変換
cloudでやると画像が劣化したりする。Illustrator使えるならそのほうがいい。
便利ツール
▶サイトマップ・ER図・UML図とか仕様書関連
▶参考サイトが何で作ってあるのか知りたいとき
▶写経してるコードと何が違うのかわからないとき
▶データ整形とか作ったりとか
JSON
htaccess Editor
▶チートシート
質問サイト
現役のプログラマの方に相談できる
変な回答付けてくる人にもんもんとすることもあるけど便利
用語・辞書
神サイト
公式ドキュメントの難解日本語の攻略法
1.公式ドキュメントのlanguageから日本語になっているのを一度英語に戻す
2.DeepL（下記リンク）に英語ドキュメントを貼り付けて日本語に訳す
3.公式ドキュメントを日本語表示に戻す
4.2と3を横に並べて公式ドキュメントの難解表現はDeepLで見る
5.ちょっと幸せになれる
独学に疲れたら
完全無料のプログラミングスクールらしいです・・・。
利用していないので詳細はわかりませんが、無料相談はしてみてもいいと思う。
https://programmercollege.jp/
あなたの時間を無駄に使わずにすんだなら・・・
私にコーヒー一杯おごってください。
PCがもうぶっ壊れそうです。('ω')人
