【比較】私が実際に使ってみたWeb開発関連情報サイト4選&オンラインプログラミング学習サービス3選

個人ホームページを(趣味と仕事で)作ったりする際、そのために必要なHTMLやCSSの習得はほぼ100%独学でした

…というのも、当時学校に行こうにも数もそこまでない上に、学費もかなり高額で場所も限られるという問題がありまして…。

そんなわけでWeb開発関連情報サイトが活躍しました(一部は今でも活躍中)

Google先生に聞くか、内容が古くなりうるのを承知で書籍を買うか、という感じでした。
当時はだいたい「とほほのWWW入門」や「HTMLクイックリファレンス」に頼っていました。

それらのサイトは今でも日本語のリファレンスとしては割と使えるかと思います。

特にとほほのWWW入門は相当な老舗サイトだけど、今でもよく使われるライブラリのリファレンスや情報を追加していたりしてびっくり。
とりあえずWeb開発で使うであろう諸々のコマンドを調べたいとき、最初に確認しに行く候補に挙げていいくらい

カテゴリによってばらつきはあるけど、参照用としては十分でしょう。
もっと深く学びたい場合は、別のサイトを検索で探せばいいので。

HTMLクイックリファレンスは、名前通りの使いみちで威力を発揮します。
特に「目的別」のページのお世話になっていました。

しかし、JavaScriptのリファレンスは一部しか掲載されておらず、多用するような重要な機能が載ってなかったりするので、HTML/CSS主体で使うのが良さげです。

また、Web開発で用いられる言語の詳しい仕様やチュートリアル(実践課題付き)ならば、MDNの「Web開発を学ぶ」ページや「W3Schools.com」も個人的にかなりお薦めです。

MDNの場合、クライアントサイド言語(HTML/CSS/JavaScript)の情報が充実している一方で、サーバーサイド言語/フレームワークに関する情報は乏しいです。
実は、atomのパッケージ「autocomplete-html」で使われているタグ等の詳細情報へのリンクは、このサイト(英語版)の内容です。

W3Schools.comは、主要なプログラミング言語以外にもグラフィックデザインや色について、果てはRaspberry Piのような…かなり尖ったものまで網羅

.。oO{しかし、意外と見かけないなラズベリーパイ(※食べ物の方)}

扱ってる事例も豊富W3Schools How Toは一般的なサイトで用いられているパーツについてほぼ網羅してると言っていい)で、練習課題まであったりします。

各機能の基本的構造を学ぶのにも向いています。応用はもう少しアレンジしたほうがいい場合も。

さて、ほぼウェブサイトの情報に頼りがちな状況が変わった(と自分が思う)のは、だいたい2010年代からでしょうか。

オンラインで学習できる環境がかなり整ってきました。
Web開発用のツールもものすごく進化しています。

無料で学習できるサービスが幾つも出てきていますし、英語も対象に含めれば相当な数になるでしょう。
しかし、私自身英語のサービスは今の所試したことがないので、今回は日本語のサービスのみ取り上げます。

ドットインストール

ドットインストール:サイトスクリーンショット

おそらくかなり前からあるはずの有名どころ。
私も2013年に登録していました。

当時はHTMLとCSS学習に使っていましたが、最近でも後述のサービス達が扱っていない分野や別の場所で学習した後の復習で活用しています。

一本の動画は3分かそれ以内
しかし、最近の動画講座は少なくとも今回取り上げたところはみんなそれくらい(あるいは動画がない)なので、もはや特筆に値しないかも…(´・ω・`)

そもそも、1本30分の動画を視聴しながら学習するなんて、特にプログラミングの場合、コードを書く作業をするので途中で止めながら再生するという事実を考えると、なかなか進まない気がして気が重くなっていきますね。

そんなわけで、やはり3分前後が妥当なのでしょう。

※講座動画の再生速度を上げる作戦は、プレミアム会員限定です。

さて、講座自体特に分かりづらいわけではないのですが、講座数が多いなどの理由から「自分がどの段階にいるのかよくわからない」「何から学べばいいのかよくわからない」初心者の方には分かりづらいかも、と思うことがあります。

後もう一つ。
実際に使われるであろうサイトやアプリケーション制作を想定した講座も多数あり、コードを書きながら学習を進めるのは他の学習サービスと変わらないものの、他と違ってリアルタイムでコードの間違いを確認できるシステム(=サービス内で完結するプログラム実行環境)がありません

よって、コードを書く環境それ自体も自力で用意しなければなりません
プログラミング言語によっては環境構築それ自体が初心者にとって難しいこともあるので、これは結構きついかもしれません。

逆に考えて、これ自体必ず超えなければならない壁と割り切って、環境構築それ自体も自力で進めて行くという手もあります。

※ドットインストール内に「環境構築」講座そのものはあります。しかし、なにかトラブルがあって講師に質問をしたい場合はプレミアム会員になる必要があります。あるいはGoogle先生に聞くか(←重要)。

以上の欠点を差し引いても、扱っている分野が「えっこんな言語/ライブラリ聞いたことないよ!」というものもあるくらいに多いので、他の「初心者の方でも学びやすいサービス」で学んで基本が身についた後、特定の分野を学びたいという場合は非常に助かります

または、多数ある実践課題的な講座をこなしていく方法もありです。
※プレミアム会員限定(月980円)のものも少なくないので注意。

まあ物によっては、Google先生がYoutubeか何かであっさり見つけてきてしまうケースもあるわけですが…。
あるいは、冒頭で言及したサイト達で事足りる場合も。

正規表現、node.js、gulpあたり気になったけど、対応してるnode.jsやgulpのバージョンがちょっと古すぎる…😢
そういえば、JavaScriptもつい最近まではES6未対応だったよね…。

内容が豊富である一方で、前述のような感じで古いものもあるので、講座の詳細を見て確認したほうがいいです。

あまりに内容が古すぎると実際に使い物にならない場合も出てきますからね…。

例えば、gulpのタスクコマンドを調べたところ、Google先生が出してきた結果に記されていた情報が古いものばかりで、それを参考にコードを書いてもエラーが出て全然使えなかった…なんてことがありました。
(それを検索した当時、かなり最近にタスク関連で仕様変更があったため)

ところで、プレミアム会員限定の機能に「動画音声を女性のものに変える」というのがあるんですが…。

敢えてプレミアム会員限定であることにツッコミをしたくて仕方がありません。

paizaラーニング

paizaラーニング:スクリーンショット

こちらはサービス内に「プログラム実行環境」があるタイプの学習サービスです。

最大の特徴は大量にある「プログラミングスキルチェック」という実践課題です。
これらの課題は、一般的に使われているプログラミング言語はほぼ網羅しています(正確には対応している言語ならどれでも解答可能となっています)。

しかも毎週課題が追加されています。
それこそ「こんなにたくさんあってもこなしきれないわ!」ってくらいにあります。

早速、私も挑戦してみました。

問題の例を出すのは規約違反行為となってしまうため、ここに書くことはできません。
登録無料、スキルチェックも無料で可能なので、ご自身の目で確かめてください、としか言えません。

さて…肝心なスキルチェックの難易度ですが。
ランクCまでは私のような初心者でも割とあっさり解けました。
ランクBはそこまで甘くなかったです。

ランクBからは、明らかにプログラミング言語の文法は知ってるよ」レベル以上の知識・技術が必要です。

例えば、要求されている機能を実装するために必要な諸々の要素(関数・クラスなど)の組み合わせ方。
それらを時間制限内に組み立てていき、コードに書かなくてはなりません。

そういうものは、何度も実践的なプログラムを書いていくうちに覚えられるのかな…とは思います。
道のり長そうですが…ね…。

そしてもう一つ注意点。
標準出力」という仕組みに対応したコードを書く必要があります。
そこを踏まえないと、本来なら正しい書き方であっても正解にならないのでご注意を。
スキルチェックで扱う「標準出力」については、paizaラーニングの講座内で解説されています

そうそう、どうしてこうなったんだよw
…と突っ込みたくなるコンテンツ「コードガールこれくしょん」というのもあります。

UIとシステムが、どう見ても見覚えがあるようなスマホゲーですが気にしたら負けだ。

ちなみに「ゲームの内容」は、各プログラミング言語の指定されたコマンドを時間制限内に正しく入力する…というもの。
当然ながら、間違え過ぎたらペナルティ付きます。

ゲームなのでペナルティ軽減やボーナス増加のアイテムが普通にあります。

ガチャもあるよ!

なお、肝心の(?)講座内容ですが…。

需要の高いものは問題なく揃っています。

就活関連、AI関連は間違いなく需要が高いでしょうし、Webアプリ関連講座も気になります。
あと、Webデザイン講座なんかはありがたいのですが……。

有料会員にならないと学習できない講座がいくつもありまして…(´・ω・`)
これはこの手のサービス全般で言えますね、はい。

あと、人によっては講座で使われている動画に「アニメorゲーム風キャラ」が出てくることに抵抗を感じるかもしれません。
好きな人は好きなんですけどね(個人的には全く問題なし)。

Progate

progate:スクリーンショット

にんじゃわんこ

残念ながら、にゃんこ…じゃなかった。

こちらは同じ学習サービスでも「動画」ではなく「スライド」を見ながら学習を進めていきます。
動画だと見落としがちでなぁ…という人にはかなりありがたいです。

しかも、 サービス内に「プログラム実行環境」があるため、環境構築なしで学習を進められます。

ちなみに、私が参考にした幾つかのブログ、TwitterのTweetでここを薦めている人が目立ったのですが、実際に講座を進めてみて納得できました。

なぜならProgateが一番分かりやすい教え方をしているからです。

学習で用いられているスライド達も、気になったものをブックマークして後から確認するなんてこともできます。

そして、実践課題も揃っており、リアルタイムで成否を確認しながら進められます。

おかげさまで、改めてHTML&CSS、JavaScript(ES6の方)の復習がはかどっております。

注意点としては、無料会員ではごく一部の講座(概ね初級レベル相当)しか受講できないこと、他2つのサービスと比べて講座数自体が少ないことでしょうか。

それでも、フロントエンドエンジニアやWebサービス開発者を目指すのに必要な基本中の基本を習得するのに、今回紹介した中ではProgateが一番使いやすいと思います。

.。oO{個人的には動画じゃなくてスライドなのが大きいと思う}

極論、1ヶ月だけ有料会員になって一気に必要な分野の学習を進める…という手もありますね。

実はiOSやAndroid向けのアプリを使って学習することもできます。
ただし、Web版の学習進捗と共有することができません。残念😢