Web開発を学ぶ — HTMLからReactまで、ライブプレビュー付きでフロントエンド開発を学べます

フロントエンド開発とは、WebサイトやWebアプリのうち、ブラウザ上で動く部分を構築することです。HTMLによる構造、CSSによる見た目、JavaScriptによる動作に加え、それらを基盤とするフレームワークやツールも含まれます。Web開発を学ぶでは、この技術スタックをその順番で学び、ライブプレビューですべての変更をすぐに確認できます。

HTML、CSS、JavaScriptは短い時間でも編集できるほどコンパクトで、プレビューですぐに結果を確認できるため、概念や最初のページはスマートフォンで十分に学べます。アプリでは、3つのペインとライブプレビューを画面上で確認できます。多くのファイルからなる大規模なプロジェクトを管理する段階ではノートパソコンのほうが快適になりますが、始めるのにノートパソコンは必要ありません。

完全な初心者、デザインしたものを自分で作りたいデザイナー、HTMLとCSSを少し知っている開発者、初めてのフロントエンド職に向けて準備しているキャリアチェンジ希望者に適しています。まずWebの仕組みと基本的なHTMLから始め、次にCSS、そしてJavaScriptへ進みます。Web開発を学ぶもこの順番に沿っており、無料の「フロントエンド開発入門」コースから始まります。

はい。HTML、CSS、JavaScript、TypeScriptの後に、Reactの基礎、useEffectとデータ取得、高度なHooksとパターンのコース、さらにVue 3の基礎、Composition API、高度なパターンのコースがあります。Next.jsとNuxt 3を使った状態管理とサーバーサイドレンダリングも扱います。

最初のページを作るのに必須ではありませんが、プロフェッショナルなReactとVueのコードベースの多くで使われているため、JavaScriptの基礎を学んだ後に身につける価値があります。アプリでは、型の基礎を学ぶ最初のコース、型とインターフェースを深く学ぶコース、フロントエンドのパターン向けの高度なコースを通してTypeScriptを学べます。

15個のデバッグミッションでは、それぞれ実際のフロントエンドの問題を再現した、壊れたページやコンポーネントが出題され、それを修正します。375ピクセルでレイアウトが崩れる、キーボードでフォームを操作できない、コンポーネントでメモリリークが発生する、CIでのみ失敗するテストなどの問題に取り組みます。2つのミッションは無料です。

知識面の準備に役立ちます。Web開発を学ぶには、回答付きの面接質問が50問、構文とパターンをまとめた83項目のチートシート、テスト、パフォーマンス、アクセシビリティ、アーキテクチャのコースがあります。これらは、面接で基礎の次に扱われやすいトピックです。ただし、自分でプロジェクトを作ってポートフォリオを構築する代わりにはなりません。

毎日少しずつ練習すれば、初心者でも通常は数週間でシンプルなレスポンシブページを作れるようになります。一方、自信を持ってJavaScriptを使い、フレームワークまで扱えるようになるには数か月かかります。アプリでは、学習パスを数分で終えられるレッスンに分け、連続学習記録やリマインダーも用意しています。そのため、長時間まとめて学ぶのではなく、短時間の学習を定期的に続けることで上達できます。

App StoreとGoogle Playから無料でダウンロードできます。最初のコース、最初のガイド付きプロジェクト、2つのデバッグミッション、コードエディターは無料で、1日3回までAIメンターに質問できます。無料版には広告が表示されます。Proでは、すべてのコース、全プロジェクトとミッション、認定試験、無制限のAIが利用でき、広告も表示されなくなります。

Web開発を学ぶは、App Storeを通じてiOSで、Google Playを通じてAndroidで利用できます。22言語に対応し、対象年齢レーティングは4+です。App Storeの掲載タイトルはLearn Frontend Development、Google Playの掲載タイトルはWeb開発を学ぶですが、同じアプリです。最終試験に合格すると修了証が発行されます。