Web開発の世界に飛び込もう！
Webアプリケーションは、さまざまな技術や知識を組み合わせて作られています。ここではWeb開発の全体像を把握し、今後学んでいくスキルを一緒に見ていきましょう。
- はじめてのHTML
- Webページ公開
Webページをつくろう プラス
Web開発の基礎はWebページです。まずはWebページを作るためのHTMLに触れてみましょう。 そしてWebページを作成し、インターネットに公開します！
- 基本タグ
- 文字の装飾
学習内容をみる （6演習）
Webページの構造を学ぼう プラス
HTMLとCSSを学びながら、デザインされたWebページを作ります。
Webページの構造を理解し、自由にデザインを変更できるようになりましょう。
- ページ構造
- 余白の調整
レイアウトの幅を広げよう プラス
基本的なHTMLとCSSのコードを使ってWebページを作成できました。今度はさまざまなWebページを作れるようにスキルの幅を広げていきましょう。
- Flexbox
- グリッドレイアウト
- ポジション
Webページを更新しよう
以前公開したWebページを更新して、これから作るWebアプリケーションのトップページにしましょう。
- ページの更新
- 検証ツール
JavaScriptを始めよう プラス
プログラミングの基本的な仕組みや学習の進め方を知り、効率的かつ楽しく学べる土台を作りましょう。 このステップでは、これからの学びをスムーズに進めるための重要なポイントを学習します。
- 変数
- 文字列の連結
JavaScriptの基本を学ぼう プラス
Web開発で必須であるJavaScriptを学んでいきます。条件分岐や繰り返しといった基本の処理を習得しましょう。
- 条件分岐
- 繰り返し処理
配列を学ぼう プラス
複数の値をまとめて扱う「配列」は、プログラミングの効率を高める上で欠かせません。配列を自在に使いこなし、データ操作の達人を目指しましょう！
- 配列
学習内容をみる （5演習）
オブジェクトを学ぼう プラス
オブジェクトは、データに名前をつけてまとめて管理する方法です。例えば、キャラクターの名前や年齢などを1つにまとめて管理できます。オブジェクトの仕組みを学び、自分で作れるようになりましょう！
- オブジェクト
- undefined
関数を学ぼう プラス
引き続きJavaScriptの基礎を学びます。複数の処理を１つにまとめる「関数」の定義や呼び出しを学習しましょう！
- 関数
- アロー関数
- スコープ
学習内容をみる （9演習）
配列を操作しよう プラス
配列にデータを追加したり、データを探したりする方法を学びます。効率的にデータを扱えるようになりましょう。
- 配列メソッド
- filter・map
クラスとモジュールを学ぼう プラス
1つのファイルでスクリプトを書くだけでなく、クラスやモジュール、パッケージを学び、より管理しやすいコードを書く方法を学びましょう。
- クラス
- 継承
- モジュール
Webページを動かそう
JavaScriptを使ってHTMLとCSSを操作し、Webページに動きをつけてみましょう。
- DOM操作
- はじめてのWebアプリ
外部データとWebアプリケーションを連携しよう
外部データとWebアプリケーションを連携して、取得したデータをWebアプリケーションに表示しましょう。 DOM操作を使えば動的に要素を追加することができます。
- fetch API
- 外部データ連携
学習内容をみる （1演習）
コマンドラインを学ぼう プラス
Web開発で必要なパッケージをインストールしたり、アプリケーションを起動したりするときに使用するCommand Line。
開発をはじめるときに困らないように基本コマンドを学びます。
- コマンドライン
- ディレクトリ操作
Webアプリケーションを作ってみよう プラス
簡単なメモアプリを作りながら、Webアプリケーションの仕組みとWeb開発の基礎を学びましょう。
このステップでは、実際のWebアプリケーション開発を通して、基礎的な知識を身につけていきます。
- Express
- EJS
Webアプリケーションでデータを扱おう プラス
メモアプリでデータを扱う方法を学びましょう。
このステップでは、Webアプリケーションにデータベースを追加してメモを追加できるようにします。
- データベース連携
- フォーム
Webアプリケーションでデータの更新と削除をしよう プラス
メモアプリのデータを削除したり、変更したり、データを操作する機能を追加しましょう。
- データ更新
- データ削除
JSON の読み書きをする API を実装しよう
これまで学んだことを応用してAPIを実装してみましょう！ APIの処理ではJSONファイル使ったデータの取得と保存、そしてリクエストへのレスポンスを行います。
- JSON API
よくある質問
- HTML、CSS、JavaScriptとは何ですか？
- Webページを作るための3つの技術です。HTMLはページの構造、CSSは見た目のデザイン、JavaScriptは動きや機能を担当します。この3つを組み合わせてWebサイトやWebアプリを作ります。
- プログラミング未経験でも受講できますか？
- はい、プログラミング未経験の方を対象にしたコースです。基本的なパソコン操作ができれば、どなたでも受講できます。
- どんなアプリが作れるようになりますか？
- このコースでは、ブラウザ上で動作する基本的なWebアプリケーションを作ります。ボタンをクリックして動作するような、シンプルなアプリから始めます。
- Webアプリとスマホアプリの違いは何ですか？
- WebアプリはブラウザでアクセスするアプリでURLがあればどの端末からも利用できます。スマホアプリはApp StoreやGoogle Playからインストールするアプリです。本コースではWebアプリの作り方を学びます。
- このコースを終えると何ができるようになりますか？
- HTML、CSS、JavaScriptの基礎を使って、自分のパソコンで動作するWebアプリケーションが作れるようになります。また、ReactやVue.jsなどのフレームワーク学習への土台ができます。
- Node.jsやRailsのWeb開発コースとの違いは何ですか？
- 本コースもNode.jsを中心に学びますが、mosyaやProgate Pathのコンテンツも含むため、より実践的な内容まで学ぶことができます。