ビギナー向け、無料で最強の海外独学サイトリスト


お金をかけずに効率よくプログラミングを学ぶには

とりあえず、メモ帳代わりにここのブログでなんか書いてみるかと思いたって、何の考えもなしに書いた一番最初に書いた記事に結構コメントや反響を頂き、意外と英語とプログラミングの話題って気になる人が多いのかなと思ったので、普段使ってメチャ便利やんという学習用のリファレンスをリストアップしてみるよ。
前回も少し書いたのだけど、20年前にウェブデザイナーとして、日本語しか分からない状態で色々コーディングを勉強していた時と、10年ほど外資でプログラミングとか関係ない職種で働いた後に、英語中心でプログラミングを勉強し直した現在の違いを純粋に書いてみたわけだけど、おっさんになり、脳や集中力の衰えを勘案しても、理解の度合いが全然違うので、英語が出来るって、やっぱりプログラムを学ぶ上では大きなメリットだよねという話でした。
まず、今年に入って、もう一度プログラミングを勉強してみようかと思った時に、重要視したのは以下

  • 学習コストは限りなくゼロで
  • コロナの状況下もあり、完全独学で部屋で出来ること
  • 時間は長くても短くても良いから、とにかく毎日続けられる事(出来るだけ勉強してて楽しいソースを見つける)
  • 一通りのゴールとして、就職に有利とかよりも、何か楽しいアプリやサイトを自分で作れるようになる事

で、相談できる人は誰もいない中、色々とウロウロした結果見つけた優良サイトや情報ソースがこちら↓

テキストサイト

MDN : 多分かなり有名なサイト、記事によっては日本語もある。体系的に各トピックについて詳しく優しくまとめられていて、とにかく読みやすい。

GeeksforGeeks : 数あるプログラミング系の情報サイトを見たんだけど、ここは読みやすくておもしろい記事が多い。

Medium : ブログサイトなんだけど、ここのテック系の記事はかなり読みやすくて分かりやすいものが多いので、ブックマーク。

stackoverflow : 多分世界で一番需要のある、プログラミング系掲示板。エラーやバグが出るたびに検索するとほぼ必ず引っかかってくるサイト。大抵上位2−3番目くらいまでの方法を試すと問題が解決する。

CSS-TRICKS : 個人的には世界で一番分かり易いCSSの情報サイト。特にFLEXとGRIDはめちゃ分かり易かった。FLEX BOXのカレンダーやT-SHIRTSを売るほどCSS愛にあふれたサイト。

学習サイト

w3school : ウェブ周りのタグやスクリプトなんかをちょっと調べたり試したりするのには最適なサイト。解説がシンプルで目から鱗。自分でコードを変えて、色々その場で試せるのも良いね。個人的には、最初の1ヶ月でHTML、CSS、JVASCRIPTのセクションを全て読んだ。

Wes Bos : フルスタックガイWESのページ。Javascriptやるなら、ここは必見。ここでも結構有名なのか、やってる人多いね。特にjavascript 30days challengeはフリーなのに内容濃すぎ。結構派手目なAPI、DOM操作のやり方から、配列の操作みたいな地味で必須なトピックまでかなり楽しく教えてくれる。

Udemy : 有名なオンラインスクールのサイト。日本のレッスンを幾つか取ってがっかりだったんだけど、本家の英語のコンテンツはかなり凄い。数千件の良いレビュー付いてるコースは、相当に練って考えられている印象。講師も英語圏以外の生徒に配慮して、比較的簡単な英語で説明してくれている。1コース20−40時間くらいあるので、かなり深くまで学習できる。ほぼ毎月セールをやっていて、プロフェッショナルなコースが1-2千円程度!プログラミング学校に何万円も払う意味無し。

CodePen : 特にフロントエンドをやってる人からしたら、あったら良いな! がほんとにあった というサービス。基本のHTML,CSS,JAVASCRIPTをそれぞれコーディングできる3つのウィンドウがあって、書いたら即その場でページプレビューを表示してくれる。サーバーのセットアップとか、うんたらかんたらとかは不要!思いついたらぱっと書いて、最終アウトプットが即見れるという便利サイト。まさにスケッチやメモする感じでコードの破片を書きつけられる。Bootstrapとか外部のCDNも簡単に読み込んでくれるし、オートセーブまでついてるし、無料だし、非常に捗るサービス。

Youtubeコンテンツ

Traversy Media : 本当にただで良いんですか?っていうくらいのコンテンツの充実ぶり。Udemyコースを少しコンパクトにした感じ。実際にコードを書きながら解説してくれて、リズムもよくて分かり易い。この人は声も良いよね。

freeCodeCamp.org : 上記Traversyと似た感じの内容。Travesyは近所の兄ぃちゃんが教えてくれてる感じだけど、こっちはもう少しフォーマル。ここもただで良いんですか?という充実ぶり。

Coding Passive Income : 上記2つみたいに、例えばPythonまるまる学ぶとかでは無く、部分的に使える色々なテクニックを分かりやすく解説してくれている。

Layout Land : ウェブレイアウトといえば、この人のチャンネル。結構穴にハマりがちになったり、わかったつもりで何となくやっている作業の意味がよくわかる。因みに彼女はMozillaのデベロッパー。

The Coding Train : 最近見つけて、なかなかハマったチャンネル。とにかく楽しそうにコードの解説してる。ビギナーフレンドリーで、流し見してるだけでも楽しいね。でも、内容はしっかり詰まっていて、プログラミングは難しいっていう思い込みを吹き飛ばしてくれる超優良コンテンツ。日本のプログラミング学習に欠けてるものが詰まってる。とりあえず、動画一本見てみよう。

Zach Gollwitzer : 多分結構新しいチャンネル。無料なのに、グラフィック素材も作りこんであって、コード解説の流れや要点もかなり事前に作り込まれている印象。めちゃ本格的で実用的。コード画面と解説だけの凄くシンプルなコンテンツだけど、かなり分かりやすい。声のトーンとかも聞いていて疲れないし、話すスピードも適切で快適。地味な感じだけど、素晴らしいポテンシャル。Nodeのオーセンティケイションは彼から学んだ。

Dev Ed : 最近REACTを勉強するのにお気に入りのチャンネル。本当に理解していないと、人には教えられないをよく表しているスタイル。ニートなエドがマイペースでコードを書いて、解説してくれる。ちゃんと初心者視点に立った解説で、なぜこれを使うのか、なぜ必要なのかをちゃんと説明してくれていて、置いてけぼりにならない。

Web Dev Simplified : Hi! I’m Kyle, my job is to simplify the web for you.でお馴染みのカイルのチャンネル。 殆どの動画は15−30分ながら、内容は超濃厚。シンプルなブログやリスティングアプリなど、ほぼ一つのプロジェクトを最短距離でその時間内に作っていく様子はマジックを見てるみたいな感動を覚えます。個人的に1日1プロジェクトっていう目標をたてているので、コードを真似ながら追っていくと、1時間位で1アプリ出来てしまい、やってても充実感満点のコンテンツ。難点は、彼の英語は早口なので、最初はスロー再生すると聞き取りやすいかも。


ここに上げたのは、一部だけど、コンテンツまるまるお世話になっている所ばかり。
勿論、各アプリやモジュールの公式サイトは必読。
何か言語を一つマスターしたければ、Udemyで関連のコースを2つ位とって、Youtubeで補習しつつ、公式のリファや掲示板を頼れば、数千円で十分身につくと思うよ。やる気あれば。

あと、最初の記事に上げたように、今回は英語での学習っていう所でピックアップ。
英語で書かれたプログラムは絶対英語で学んだ方が良い。いちいちよく分からない日本語に脳内翻訳して学習コストを何倍にも上げる意味無し。
英語のソースとか敷居高いって思うかも知れないけど、英語ニュースとか映画の方が全然聞き取り難しい。コツとしては再生スピードをx0.75くらいにして、字幕をオンにして集中して、2−3回みていれば、不思議とわかるよ。
で、馴れればあんまり疲れなくなってくる。
英語にも慣れることが出来て、プログラムも学べて一石二鳥。
高い学費払ってプログラミングの学校に行ける余裕のある人や、周りにメンターみたいなのがいる人は良いんだけど、お金の余裕も無くて、手探りの状態で始める自分のような人の役に立てばいいかなと思いたって、書いてみた。