🐤

Web系プログラミング独学者の時間を無駄にしない参考まとめ 2022年

2022/11/08に公開約15,900字

ネットには色々な情報がありすぎ、良いものも悪いものも新しいのも古いものもごったになっていて、初心者には見分けがつきません。
結局これが参考になった。よかったと思ったものを項目ごと並べていきます。無駄に時間を使わなくてよいようにコツみたいなのもわかる範囲でかきます。

周りに詳しい人がいないけど、独学で勉強されるかたの参考になれば幸いです。
誰かの役にたてば苦労は無駄ではなかった。

ぐぐって記事を探すとき

「+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あたり↓

https://jsfiddle.net/

https://codesandbox.io/

PHPもとなったらAWSのCloud9↓

https://aws.amazon.com/jp/

▶エディタは「VSC」

Windows・Macどちらでも
理由:記事がたくさんある。無料。高機能。
注意点:機能拡張で表示を変える系のものは使わない方が無難(背景を透過させる、フォルダの色を変えるなど。突然終了したりなどする。)

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

https://qiita.com/oruponu/items/ae9c720d4522c1606daf

https://docs.emmet.io/cheat-sheet/

code補完は「tabnine」

だけでよい。

https://note.com/sangmin/n/n074aaa4e2be5

拡張機能は「言語ごとに色々なので有名なのを入れる」

https://qiita.com/KNR109/items/5f933df1292564e6dc70

▶Vimなるものを抜け出したい

「q」「:q」で抜け出せると覚えておけば苦労しません

https://qiita.com/ktoyod/items/0a8491cdb6c0191ab0cc

▶Terminalの管理者モード

「Windowsマークを右クリック」で項目がでてくる

https://qiita.com/190131start/items/569984c2d89ede14a365

▶環境変数の設定ウィンドウを開く

左下の検索窓に「path」と入力

目次にもどる

Portfolioサイト

どこに作ろうかと悩むことがあると思います。
レンタルサーバは何でもできます。
無料でちょちょちょいと作るなら、テンプレートのあるサイトを利用するといいと思います。

▶レンタルサーバ

https://www.value-domain.com/

▶ぽちぽち系

Google site

https://sites.google.com/

AdobePortfolio(creativecloudを契約していると使える)

https://helpx.adobe.com/jp/creative-cloud/how-to/create-portfolio-website.html

HTMLとCSS

まず初めに次の3冊を読む。あとは自分で作ってみる。
「できない」ところや「こうしたい」があったらぐぐって試す。
HTML,CSSは基本だけさらっとやって次にすすむ。ここにあまり時間をかけない。
ReactでUIなどがあるので、基本とレイアウトに関するところだけでよい。
あとは実際にやってみて覚えていく。

altテキスト altテキスト altテキスト
▶レイアウト レスポンシブ

https://dotinstall.com/lessons/basic_responsivewebdesign_v3

https://photoshopvip.net/116792

https://yoksel.github.io/grid-cheatsheet/

https://responsively.app/

▶HTML/CSS スタイルガイド こういう風に書くといいですよfrom Google

https://google.github.io/styleguide/htmlcssguide.html

▶CSSのテンプレート部品集

https://getbootstrap.jp/docs/5.0/getting-started/introduction/

▶こんなのできるんだ凄いって眺めるサイト

https://codepen.io/trending

目次にもどる

JavaScript

学習の流れは、Javascriptの仕組みをざっと流して学習し、わからないところがあるときに個別に調べて他のテキストなどから勉強するのがいい。
Reactを勉強するときにも、結局その前のJavascriptがってなるので順を追って基本ちゃんとしてからフレームワークに進む。急がばほどほどに回れ。

▶基本を一通り学ぶ

https://dotinstall.com/lessons

https://jsprimer.net/

https://youtu.be/E08jeQBa1D0

https://www.udemy.com/course/front-dev-tutorial/

▶コードの書き方 良い例・悪い例

https://mitsuruog.github.io/javascript-style-guide/#translation

▶わかりにくいコールバック関数がすんなりわかる

https://youtu.be/B624WCMhLfA

▶メソッドがよくわかる

https://youtu.be/6L7RmLIlkjs

▶非同期処理

https://techplay.jp/column/581

▶Windowsオブジェクト一覧

https://phpjavascriptroom.com/

目次にもどる

React

Javascriptの基本がわかったら、実際のコードを書いていくところに(すぐ!)進むのが良いと思います。
このあたりで結構、どれを学べばとかで迷って、検索してもどれがいいのかわからない状態ではまってしまうと思いますがReactで大丈夫です。
ここに時間を使ってください。

ReactはJavaScripがHTMLとCSSを取り込んで画面の表示を編集するのが主で、フックスというものと組み合わせないと動的サイトは作れないということのようです。
UIはMantineというのが最近じわじわと来ているらしいとのこと。フックスがいくつか用意されているかららしい。
仕事でやるならメジャーなMUIとか他の物の方がいいかと思います。
サーバーサイドも扱えるのがNEXT.jsらしいですが、この辺りはまだ勉強中でよくわかっていません。

パッケージ管理はnpmとyarnとあるようですが、多分yarnの方がいいのかなと思います。
私はnpmでやっていて(たぶんバージョン不一致関係)わけわからんエラーにまた悩まされるということがありました。
2021年末のアップデートでyarnでcreate-react-appをする場合には、yarnでやりますと指定する必要があるみたいです。
Reactはコンポーネント管理が大事なんだなと思います。そこだけちょっと頭に入れておいてから学習に進むとよいと思います。

npm yarn

https://www.webdesignleaves.com/pr/jquery/npm_basic.html

https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8

https://qiita.com/P-man_Brown/items/db1c9f13ab34dcf97993

https://qiita.com/aking/items/41b341add8a9cbefd03a

「npm start」から抜け出すのは、「Ctl + c」

package.jsonに何を書く必要があるか

https://docs.npmjs.com/cli/v8/configuring-npm/package-json

▶はじめに学習する系

https://booth.pm/ja/items/2368045

https://ja.reactjs.org/docs/getting-started.html

https://dev.classmethod.jp/referencecat/lets-start-react/

https://www.udemy.com/course/modern_javascipt_react_beginner/

https://www.udemy.com/course/react-complete-guide/

https://zenn.dev/rgbkids/articles/7bd919464283d0

▶webpack

https://www.udemy.com/course/webpack-config/

▶UI

https://mui.com/

https://www.udemy.com/course/mantine-react-complete-guide-nextjs/

https://mantine.dev/

https://reffect.co.jp/html/headless-ui

▶css

https://youtu.be/5TymbaeyV-0

https://nerdcave.com/tailwind-cheat-sheet

https://tailwindcomponents.com/

https://tailwind.ink/

▶icon

https://react-icons.github.io/react-icons/

https://tabler-icons-react.vercel.app/

▶Next.js

https://nextjs.org/learn/foundations/about-nextjs

目次にもどる

PHP

バックエンドはPHP、Java、Ruby、GOとかになるらしいですが、GOはまだあまり使われておらず(Flutterで使う。ネイティブアプリに強い)、他の3つがメインらしいです。
ただ、WebアプリとなったりするとPHPかRubyが選ばれるって感じかなと思います。
Javaは既存システムで使われていることが多いからという理由と聞きました。

Reactメインで使って、DBのやりとりだけPHP使うとかでWebアプリは作れるらしい。
その時に初心者がやるべきはLaravelではなく、素のPHPでPDOを使う。

https://gray-code.com/php/about-pdo/

https://qiita.com/sanogemaru/items/dd981a5ee4487cedf02f

目次にもどる

サーバと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)が有名ですが、たぶん理数系の人でないと無理げ。数学的なものが必要らしい。

▶スクレイピングするときの

https://qiita.com/ywindish/items/5a992c49387d81df900e

CSSセレクタ確認

https://try.jsoup.org/

Xpath確認

https://scrapinghub.github.io/xpath-playground/

目次にもどる

Git

仕事でやるなら結局これやらないとダメみたい。
慣れるしかない気がする。初心者はマージはやらない試さない。

https://www.udemy.com/course/unscared_git/

https://qiita.com/homhom44/items/9f13c646fa2619ae63d0

▶チートシート

https://training.github.com/downloads/ja/github-git-cheat-sheet.pdf

目次にもどる

フロントエンド技術/バックエンド技術

altテキスト altテキスト altテキスト altテキスト

altテキスト

https://qiita.com/KNR109/items/f3268b311e11d5b821c0

https://youtu.be/5YAH91KxYhg

目次にもどる

デザイン関係

altテキスト altテキスト
▶画面デザインなどを無料で編集できる

https://www.figma.com/ja/

▶4色カラーのコーディネイトはこーでねいとしてくれる

https://colordrop.io/

▶色の組み合わせ

https://color.adobe.com/ja/create/color-wheel

▶色弱の人の見え方を確認できる

https://asada.website/cvsimulator/j/

▶PNG SVG 変換

cloudでやると画像が劣化したりする。Illustrator使えるならそのほうがいい。

https://www.adobe.com/jp/express/feature/image/convert/png-to-svg

目次にもどる

便利ツール

▶サイトマップ・ER図・UML図とか仕様書関連

https://cacoo.com/ja/

▶参考サイトが何で作ってあるのか知りたいとき

https://builtwith.com/

▶写経してるコードと何が違うのかわからないとき

https://difff.jp/

▶データ整形とか作ったりとか

JSON

https://jsonformatter.curiousconcept.com/

htaccess Editor

http://www.htaccesseditor.com/

▶チートシート

https://devhints.io/

目次にもどる

質問サイト

現役のプログラマの方に相談できる

https://menta.work/

変な回答付けてくる人にもんもんとすることもあるけど便利

https://teratail.com/

目次にもどる

用語・辞書

神サイト

https://wa3.i-3-i.info/index.html

目次にもどる

公式ドキュメントの難解日本語の攻略法

1.公式ドキュメントのlanguageから日本語になっているのを一度英語に戻す
2.DeepL(下記リンク)に英語ドキュメントを貼り付けて日本語に訳す
3.公式ドキュメントを日本語表示に戻す
4.2と3を横に並べて公式ドキュメントの難解表現はDeepLで見る
5.ちょっと幸せになれる

https://www.deepl.com/
 
目次にもどる

独学に疲れたら

完全無料のプログラミングスクールらしいです・・・。
利用していないので詳細はわかりませんが、無料相談はしてみてもいいと思う。
20代のみ!

https://programmercollege.jp/

Discussion

ログインするとコメントできます