はじめてのWeb開発をやってみよう

Webアプリケーションは、さまざまな技術や知識を組み合わせて作られています。ここではWeb開発の全体像を把握し、今後学んでいくスキルを一緒に見ていきましょう。

画像やリストを使ってWebページに内容を加え、CSSで文字の色や大きさを変えてみましょう。

HTMLとCSSを学びながら、デザインされたWebページを作ります。

Webページの構造を理解し、自由にデザインを変更できるようになりましょう。

基本的なHTMLとCSSのコードを使ってWebページを作成できました。今度はさまざまなWebページを作れるようにスキルの幅を広げていきましょう。

プログラミングの基本的な仕組みや学習の進め方を知り、効率的かつ楽しく学べる土台を作りましょう。 このステップでは、これからの学びをスムーズに進めるための重要なポイントを学習します。

Web開発で必須であるJavaScriptを学んでいきます。条件分岐や繰り返しといった基本の処理を習得しましょう。

複数の値をまとめて扱う「配列」は、プログラミングの効率を高める上で欠かせません。配列を自在に使いこなし、データ操作の達人を目指しましょう！

オブジェクトは、データに名前をつけてまとめて管理する方法です。例えば、キャラクターの名前や年齢などを1つにまとめて管理できます。オブジェクトの仕組みを学び、自分で作れるようになりましょう！

引き続きJavaScriptの基礎を学びます。複数の処理を１つにまとめる「関数」の定義や呼び出しを学習しましょう！

配列にデータを追加したり、データを探したりする方法を学びます。効率的にデータを扱えるようになりましょう。

Web開発で必要なパッケージをインストールしたり、アプリケーションを起動したりするときに使用するCommand Line。

開発をはじめるときに困らないように基本コマンドを学びます。

エディタとブラウザを用意し、ターミナルや検証ツールの使い方を学びます。ここで作るHTMLファイルは、あとのWebページ公開にも使えます。

Progate Pathで環境構築とWebページ制作に挑戦します。ツールを用意してページを公開し、HTMLとCSSを使ってダッシュボードのトップページを作りましょう。

Progate PathのFizzBuzzとmosyaの配列・オブジェクトの問題に取り組みます。条件分岐や繰り返し、配列操作を組み合わせ、自分で処理を考える練習をしましょう。

学んだJavaScriptを自分のPCで動かし、準備レッスンで作ったWebページを公開・更新します。Node.jsの導入は記事内の公式サイトへの案内からも進められます。

1つのファイルでスクリプトを書くだけでなく、クラスやモジュール、パッケージを学び、より管理しやすいコードを書く方法を学びましょう。

DOMの仕組みと、JavaScriptでHTMLの要素を取得する方法を学びましょう。ブラウザ上の演習で、Webページを操作する基礎を身につけます。

Progate Pathで作ったトップページに単位変換機能と暗記カードの表示処理を追加します。DOM操作やAPIからのデータ取得を使って、操作できるWebアプリを作りましょう。

簡単なメモアプリを作りながら、Webアプリケーションの仕組みとWeb開発の基礎を学びましょう。

このステップでは、実際のWebアプリケーション開発を通して、基礎的な知識を身につけていきます。

メモアプリでデータを扱う方法を学びましょう。

このステップでは、Webアプリケーションにデータベースを追加してメモを追加できるようにします。

メモアプリのデータを削除したり、変更したり、データを操作する機能を追加しましょう。

Progate Pathで暗記カード機能のサーバーサイドを実装します。JSONファイルの読み書きとリクエストへの応答を組み合わせて、カードを追加できるようにしましょう。