
このコースの内容、受講対象者、コースの目標について確認することができます。
このコースでBlazorを使う理由について確認することができます。
このコースの内容を確認することができます。
Visual Studio 2022 のインストール方法を知ることができます。
セクション内で学習する内容を確認することができます。
WebサイトとWebページについて学習し、Webサイト、Webページという言葉の意味を理解できるようになります。
Webページを表示する仕組みを学習し、Webアプリ開発の事前知識を得ることができます。
静的ページと動的ページの違いを知り、Webアプリ開発で行うことを知ることができます。
動的ページの仕組みを学習し、Webアプリ開発でやる内容を理解できるようになります。
データベースの仕組みを学習し、Webアプリとデータベースの繋がりが理解できるようになります。
Webサイト、Webアプリ、ホームページという言葉の意味を学習し、Webアプリが何をするものか理解できるようになります。
このセクションの内容を再確認し、Webアプリ開発の作業内容を理解することができます。
セクション内で学習する内容を確認することができます。
フロントエンド開発の内容と必要な技術について学習し、フロントエンド開発について理解することが
バックエンド開発の内容と必要な技術について学習し、バックエンド開発について理解することができます。
フレームワークの意味や使い方について学習し、Webアプリの作成方法の概要を理解することができます。
フロントエンドアプリ、バックエンドアプリの配置場所を学習し、作成後のアプリを実行する方法を理解することができます。
このセクションの内容を再確認し、Webアプリ開発方法を理解することができます。
セクション内で学習する内容を確認することができます。
HTMLファイルについて学習し、HTMLファイルの作成と表示ができるようになります。
HTMLの構造について学習し、ページの部品がどのように配置されるか理解することができます。
h1〜h6タグについて学習し、HTMLで見出しを作成できるようになります。
pタグの使い方を学習し、HTML内で文章を書くことができるようになります。
ulとolタグについて学習し、HTMLで箇条書きを作成できるようになります。
divタグについて学習し、エレメントをグループ化できるようになります。
HTML内でコメントを書く方法を学習し、HTMLでコメントを書くことができるようになります。
bタグとstrongタグの使い方を学習し、HTMLで太文字を書くことができるようになります。
aタグについて学習し、HTMLでリンクを作成できるようになります。
アトリビュートについて学習し、エレメントの構成を理解できるようになります。
アトリビュートのidについて学習し、idを利用できるようになります。
アトリビュートのclassについて学習し、classを利用できるようになります。
アトリビュートのstyleについて学習し、styleを利用できるようになります。
スタイルシートについて学習し、HTML内でスタイルシートを使うことができるようになります。
スタイルシートのセレクタの使い方を学習し、idやclassをセレクタに使えるようになります。
colorとbackground-colorのプロパティの使い方を学習し、スタイルシートを使って背景色や文字色を変更できるようになります。
font-weightのプロパティの使い方を学習し、スタイルシートを使って文字の太さを変更できるようになります。
borderのプロパティの使い方を学習し、スタイルシートを使ってエレメントに境界線を描画できるようになります。
widthとheightのプロパティの使い方を学習し、スタイルシートを使ってエレメントの大きさを変更できるようになります。
marginとpaddingのプロパティの使い方を学習し、スタイルシートを使ってエレメントの隙間の大きさを変更できるようになります。
flexboxプロパティの使い方を学習し、エレメントのレイアウトを変更できるようになります。
text-alignのプロパティの使い方を学習し、文字を左右中央寄せできるようになります。
align-itemsのプロパティの使い方を学習し、エレメントを親要素に対して上下中央寄せできるようになります。
学習したことを使ってh1の要素を装飾し、HTMLで見た目をきれいにする方法を学習します。
ボタンを作成する方法を学習し、HTMLでテキストボックスやボタンを作成できるようになります。
フォームを作成する方法を学習し、HTMLで入力インターフェースを作成できるようになります。
インライン要素とブロック要素について学習し、HTMLの構造について理解を深めることができます。
このセクションのまとめです。
これまでに学んだことを簡単におさらいすることができます。
セクション内で学習する内容を確認することができます。
MySQLのインストール方法を学習し、お使いのPCにMySQLの実行環境を構築できるようになります。
コンソールを使ったMySQLの使い方を学習し、コンソールを使ってMySQLを操作できるようになります。
SQLクライエントのA5のインと方法を学習し、コンソール以外でMySQLを操作する方法を知ることができます。
SQLとクエリの違いについて学習し、2つの言葉の意味に違いを理解することができます。
テーブル、カラム、レコードについて学習し、リレーショナルデータベースな基礎を身につけることができます。
リレーショナルデータベースの仕組みについて学習し、データベースを使ったデータの取得手順を理解することができます。
MySQLにおけるデータベースの作成方法を学習し、CREATE DATABASE句を使ってデータベースを作成できるようになります。
MySQLにおけるテーブルの作成方法を学習し、CREATE TABLE句を使ってテーブルを作成できるようになります。
SQLで使うデータ型について学習し、カラム作成時に適切なデータ型を選べるようになります。
MySQLのテーブルの制約について理解し、主キーや外部キーの制約を設定できるようになります。
SQLでレコードを追加する方法を学習し、INSERT句を使ってレコードを追加できるようになります。
SQLでレコードを更新する方法を学習し、UPDATE句を使ってレコードを更新できるようになります。
SQLでレコードを削除する方法を学習し、DELETE句を使ってレコードを削除できるようになります。
SQLでレコードを取得する方法を学習し、SELECT句を使ってレコードを取得できるようになります。
SQLで使うエイリアスについて学習し、カラムに別名を設定できるようになります。
SQLのMAX関数について学習し、レコードの最大値を取得できるようになります。
SQLのCONCAT関数について学習し、SQLを使って複数の文字列を結合できるようになります。
SQLのCOALESCE関数について学習し、NULL値の対処方法を学習することができます。
SQLのサブクエリについて学習し、複数のクエリを組み合わせたクエリを書くことができるようになります。
SQLのLEFT JOINについて学習し、複数のテーブルを結合してレコードを取得できるようになります。
このセクションの内容を復習し、データベース内のデータ構造とSQLについて理解を深めることができます。
セクション内で学習する内容を確認することができます。
Visual Studioのプロジェクト作成の方法を学習します。C#学習用のプロジェクトを作成できるようになります。
C#の変数について学習し、変数を作成できるようになります。
C#の命令文と代入の書き方について学習し、簡単な命令を書くことができうようになります。
C#の代入について学習し、数字以外の値を代入することができるようになります。
変数の有効範囲とフィールドについて学習し、適切な場所で変数を宣言できるようになります。
変数の初期化について学習し、変数の初期化の必要性について理解することができます。
C#の四則演算について学習し、簡単な計算をすることができるようになります。
C#の応用的な計算方法を学習し、変数を上書きする計算ができるようになります。
インクリメント、デクリメントについて学習し、C#で+1、ー1をするプログラムを書くことができうようになります。
Visual Studio 2022を使ったデバッグ方法を学習し、ブレークポイントとステップ実行を使えるようになります。
Visual Studio 2022を使ったデバッグ方法を学習し、デバッグ中に変数の値を確認できるようになります。
C#の複合条件文について学習し、&&と||を使って複合条件文を書くことができるようになります。
C#のメソッドについて学習し、メソッドを作成できるようになります。
メソッドの引数について学習し、メソッドに引数を設定できるようになります。
メソッドの戻り値について学習し、メソッドに戻り値を設定できるようになります。
C#のプロパティについて学習し、プロパティを作成して使えるようになります。
ライブラリについて学習し、C#でライブラリを利用する設定をすることができるようになります。
C#で暗黙の型指定をする方法を学習し、autoを使って変数を作成できるようになります。
メモリを動的に割り当てる方法を学習し、newを使ってメモリ割り当てができるようになります。
C#の変数の種類について学習し、値型と参照型の違いを理解することができます。
C#のキャストについて学習し、キャストを使ったデータ変換ができるようになります。
配列の作成方法を学習し、配列を作成できるようになります。
C#の繰り返し文の書き方を学習し、forを使った繰り返しができるようになります。
C#の繰り返し文の書き方を学習し、foreachを使った繰り返しができるようになります。
メソッドのオーバーロードについて学習し、メソッドをオーバーロードできるようになります。
オブジェクト指向について学習し、オブジェクト指向のプログラミング手法を理解することができます。
オブジェクト指向の「オブジェクト」について理解することができます。
オブジェクト指向で使うclassについて学習し、classを作成できるようになります。
インスタンスについて学習し、オブジェクトとインスタンスの違いを理解することができます。
インスタンスの使い方を学習し、インスタンスを操作できるようになります。
静的フィールドと静的メソッドについて学習し、静的フィールドと静的メソッドのルールと使い方を知ることができます。
静的フィールドと静的メソッドについての補足の説明です。
ジェネリックスについて学習し、C#でジェネリックスを設定する方法を知ることができます。
リストについて学習し、C#で可変長配列を操作できるようになります。
クラスの継承について理解し、C#でクラスの継承を使うことができるようになります。
フィールドとメソッドのアクセス制限について学習し、アクセス制限の設定ができるようになります。
プロパティについて学習し、応用的なプロパティの使い方を理解することができます。
自動実装プロパティについて学習し、自動実装プロパティを作成できるようになります。
オーバーライドについて学習し、基底クラスのメソッドをオーバーライドできるようになります。
C#のobject型について学習し、object型の役割とメリットを理解することができます。
null許容型について学習し、C#でnull許容型の変数を作成できるようになります。
ラムダ式について学習し、C#でラムダ式を書くことができるようになります
ラムダ式で引数を設定する方法を学習し、ラムダ式に引数を設定できるようになります。
マルチスレッドについて学習し、C#でマルチスレッドを実現できるようになります。
非同期処理について学習し、C#で非同期処理を実行できるようになります。
例外処理について学習し、C#で例外処理を書くことができるようになります。
辞書型について学習し、Dictionaryを使って辞書型の変数を作製できるようになります。
定数について学習し、constとreadonlyの違いを理解することができます。
このセクションのまとめです。
セクション内で学習する内容を確認することができます。
Blazorのプロジェクトの種類について学習し、Blazorの新規プロジェクトを作製できるようになります。
サンプルプログラムを見ながらBlazorの構成について学習し、Blazorの開発方法を理解することができます。
Blazorで利用する@を使った文法の種類を学習します。@を使った記載を見分けることができるようになります。
@codeについて学習し、.razorファイルの中に@codeのブロックを作成できるようになります。
Blazorの単方向バインディングについて学習し、C#の変数をHTMLにバインディングできるようになります。
Blazorの双方向バインディングについて学習し、入力内容をC#の変数に反映できるようになります。
Blazorのイベントハンドラについて学習し、イベントハンドラを作成できるようになります。
Blazorの@if、@forについて学習し、HTMLの中で条件文や繰り返し文を書くことができるようになります。
Blazorのコードブロックについて学習し、HTML内でコードブロックを作製できるようになります。
Blazorのルーティングについて学習し、.razorファイルに対してURLを設定できるようになります。
ルーティングのパラメーターついて学習し、URLに可変の値を設定できるようになります。
Blazorのフォームについて学習し、Blazorのフォームを作成できるようになります。
Blazorのフォームのバインディングについて学習し、適切なバインディング方法を選択できるようになります。
Blazorのフォームでsubmitを使う方法を学習し、フォームのデータを送信することができるようになります。
バリデーションについて学習し、バリデーションを使ったエラーチェックの方法を理解できるようになります。
色々なバリデーションの書き方を学習し、バリデーションを使ったエラーチェックができるようになります。
バリデーションのエラーメッセージの書き方を学習し、エラー時に任意のエラーメッセージを表示できるようになります。
コンポーネントの作成方法を学習し、Webページのコンテンツを部品化することができるようになります。
イベントコールバックについて学習し、コンポーネントを跨いでメソッドを実行できるようになりませ。
サービスと依存性の注入について学習し、コンポーネントを跨いだデータ操作ができるようになります。
localhostとポート番号について学習し、WebサイトのURLの意味を理解できるようになります。
このセクションのまとめです。
セクション内で学習したBlazorの機能を再確認することができます。
セクション内で学習する内容を確認することができます。
Blazor WebAssemblyのプロジェクトの作成方法を理解することができます。
Bootstrapのサンプルからナビーゲーションバーを追加する方法を学習することができます。
未装飾のログイン画面のフォームを作成します。
ボタンを押した時に画面遷移する方法を学習します。
未装飾の新規TODO作成のフォームを作成します。
未装飾のTODO一覧表示をします。
未装飾のアカウント設定ページを作成します。
未装飾のパスワード編集フォームを作成します。
各ページにナビゲーションバーを追加します。
バックエンド開発についての説明
MySQLに当アプリ用のユーザーを追加します。
MySQLのユーザー作成、権限設定ができるようになります。
前のレクチャーで作成したユーザーを使って、今回のアプリ用のデータベースを作成します。
Visual Studio のソリューションに複数のプロジェクトを追加する方法を学習します。
バックエンドで利用するAPIについて学習します。
APIについて理解することができます。
APIの実行方法を学習します。
簡単なAPIを作成してバックエンドのプログラムをテストできるようになります。
C#のプログラムからMySQLに接続する方法を学習します。
プログラムからMySQLに接続する方法を理解することができます。
前回の続きです。
MySQLに接続する便利なクラスを作成します。
前回の続きです。
MySQLに接続する便利なクラスを作成します。
前回までに作成したMySQLを利用するクラスを整理して汎用性が高いものに変更します。
データベースとフォームを使った
ログインの認証方法を学習します。
Visual Studioを使って、2つのプロジェクトを同時に実行する方法を学習します。
CORSについて学習します。
バックエンドとフロントエンドを連携できるようになります。
バックエンドとフロントエンドを連携してログインできるようになります。
Webサイトへの攻撃であるSQLインジェクションについて学習し、対策方法を理解することができます。
MySQLのクエリパラメーターの設定方法を学習します。
プログラムでSQLインジェクションの対策することができるようになります。
暗号化技術のハッシュについて学習することができます。
パスワードをハッシュ化するBCryptのインストール方法を理解することができます。
BCryptを使ってパスワードをハッシュ化できるようになります。
ハッシュを使ったパスワード認証ができるようになります。
バックエンドから送られたデータを読み込む方法を学習します。
バックエンドからJSON形式でデータを受け取れるようになります。
APIのURLを簡単に管理する方法を学習します。
簡易的なログアウト機能を搭載します。
アカウント情報を更新するためのプログラムを作成します。
アカウント情報を更新するためのプログラムを作成します。
Webアプリ内で状態変更を検知する方法を学習します。
作成したプログラムの不具合修正をします。
パスワードを変更するプログラムを作成します。
前回の続きです。
パスワードを変更するプログラムを作成します。
前回の続きです。
パスワードを変更するプログラムを作成します。
TODOを追加するプログラムを作成します。
前回の続きです。
TODOを追加するプログラムを作成します。
前回の続きです。
TODOを追加するプログラムを作成します。
前回の続きです。
TODOを追加するプログラムを作成します。
TODO一覧を表示するプログラムを作成します。
前回の続きです。
TODO一覧を表示するプログラムを作成します。
前回の続きです。
TODO一覧を表示するプログラムを作成します。
TODOを削除するプログラムを作成します。
前回の続きです。
TODOを削除するプログラムを作成します。
TODOを更新するプログラムを作成します。
前回の続きです。
TODOを更新するプログラムを作成します。
前回の続きです。
TODOを更新するプログラムを作成します。
前回の続きです。
TODOを更新するプログラムを作成します。
TODOを完了状態にするプログラムを作成します。
完了済みのTODOを一覧から消すプログラムを作成します。
TODOの詳細を選択時のみ表示するようにします。
ログインフォームにバリデーションを追加します。
アカウント設定フォームにバリデーションを追加します。
パスワード変更フォームにバリデーションを追加します。
TODOの新規作成フォームにバリデーションを追加します。
作成したWebアプリの画面構成を調整をします。
FontAwesomeについて学習します。
FontAwesomeの利用設定ができるようになります。
ログインページの整形をします。
Bootstrapのグリッドシステムについて学習します。
グリッドシステムを使ってWebページを整形できるようになります。
Bootstrapを使ってエレメントを小さく表示する方法を学習します。
Bootstrapの色の設定方法を学習します。
テキストボックスのパスワードを非表示にする方法を学習します。
MyPageを編集します。
編集したMyPageをさらに修正します。
アカウント設定ページを編集します。
前回の続きです。
アカウント設定ページを編集します。
前回の続きです。
アカウント設定ページを編集します。
前回の続きです。
アカウント設定ページを編集します。
パスワード変更フォームを編集します。
前回の続きです。
パスワード変更フォームを編集します。
前回の続きです。
パスワード変更フォームを編集します。
TODOの新規作成ページを編集します。
前回の続きです。
TODOの新規作成ページを編集します。
前回の続きです。
TODOの新規作成ページを編集します。
前回の続きです。
TODOの新規作成ページを編集します。
TODO一覧ページを編集します。
前回の続きです。
TODO一覧ページを編集します。
前回の続きです。
TODO一覧ページを編集します。
前回の続きです。
TODO一覧ページを編集します。
前回の続きです。
TODO一覧ページを編集します。
Webアプリ開発の終わりの挨拶です。
セクション内で学習する内容を確認することができます。
Webアプリのデプロイ手順を確認することができます。
サーバーの種類について学習します。
Webアプリをデプロイする時に適切なサーバーを選択できるようになります。
Conoha VPSを使ってVPSサーバーをレンタルします。
Conoha VPSを使ってVPSサーバーの利用方法を解説します。
SSH通信について学習します。
VPSのセキュリティとファイアウォールについて理解することができます。
SSHを使ってWindowsからVPS通信をする方法を学習します。
前のレクチャーで作成したプログラムを本番用にビルドする方法を学習します。
VPSを使ってHTTP通信する方法を学習します。
Webサーバーをインストールして、VPSとHTTP通信できるようにします。
Webサーバーの設定を変更して、自分で作成したHTMLファイルを表示できるようにします。
フロントエンドのプログラムをVPSにアップロードして、フロントエンドプログラムを実行できるようにします。
VPSにMySQLをインストールします。
VPSにインストールしたMySQLを使ってデータベースを作成し、テーブルとレコードを追加します。
バックエンドのプログラムを動かすために、VPSに.NET9をインストールします。
バックエンドのプログラムをアップロードしてブラウザから実行します。
リバースプロキシについて学習します。バックエンドのプログラムを動かすための設定を理解することができます。
Nginxの設定ファイルにリバースプロキシの設定を追加する方法を学習します。
Blazorのプログラム修正してVPSからログインできるようにします。
ドメインについて学習をし、外部サービスを利用してドメインを取得します。
ドメインを使ってWebアプリを動かせるようサーバーとプログラムを修正します。
HTTPSについて学習をします。
Lets Encryptを使ってHTTPSの設定を行います。
バックエンドのプログラムをVPS起動と連動して動くように設定します。
セクション終了の挨拶です。今回学習した内容を確認します。
このコースはWebアプリ開発の基礎知識と基礎的な技術を学習して、独学しながらもWebアプリ開発をできるようになることを目指すコースです。
【受講対象者】
・プログラミングの初心者
・Webアプリ開発の初心者
・Webアプリ開発で挫折をしている
※Webアプリ開発の経験者、一人で開発できる方は受講対象外です。
初心者向けに解説をしており、内容が簡単すぎる可能性が高いです。
カリキュラムをご確認の上、ご自身のレベルに合わない場合は受講を避けてください。
【コース内容】
・Webアプリの仕組み
・HTMLとCSS
・データベース
・C#
・Blazor
・Webアプリのデプロイ
※Webアプリのデプロイについては、デプロイするところを見るだけの座学形式になっています。
※デプロイは、Conoha VPSとムームードメインを利用します。
【開発環境について】
■プログラミング言語:C#
このコースはプログラミング言語としてC#を学習します。
C#はWebアプリ開発だけでなく、Windowsアプリ、ゲーム開発など幅広く利用されている汎用性の高い言語です。
C#を習得することで幅広く役に立つプログラミングの基礎を身につけることができます。
■フレームワーク:ASP .NET Core Blazor
コース内ではASP .NET CoreとBlazorを利用してWebアプリの開発をします。
ASP .NET CoreとBlazorは、C#でWebアプリを作成できるWebアプリ開発のフレームワークです。
Visual Studio 2022だけで開発ができるため、開発環境の構築が簡単です。
■データベース:MySQL
一般的によく使われるデータベースです。
Webアプリ開発ではよく利用されます。
【説明】
Webアプリの開発、難しいですよね。
Webアプリは複数の技術を組み合せて作るため、一つの技術を習得するだけでは作れるようになりません。
プログラミング言語と開発ツールの使い方を覚えただけでは開発できないのです。
これがWebアプリ開発で挫折をする大きな原因になっています。
このコースでは、そんな挫折の原因を取り除くために、Webアプリ開発に必要な各技術の最低限必要な知識、つまり、基礎を網羅的に学習していきます。
基礎を学ぶとWebアプリを作る時に挫折しにくくなります。
理由としては、分からないことを参考書、Webサイト、AIなどで調べた時、そこに書かれている内容が理解できるようになり、独学できるようになるからです。
このコースでは、このように各技術の基礎を学習して、独学しながらも一人でアプリを作れる状態になることを目指していきます。
このコースはC#、ASP .NET Core Blazor、MySQLを使って、Webアプリ開発に必要な技術を広く浅く学習します。
(※コースの目標や全体像については無料レクチャーでも確認することができます)
【最後に】
このコースは18時間を超える長時間のコースになりますが、このコースを受講するだけでは本格的なアプリは作れるようにはなりません。
しかし、これからプログラマーとして活躍するための基礎を身につけることができます。
・プログラミングの初心者
・Webアプリ開発の初心者
・Webアプリ開発で挫折をしている
そういう方にとっては役に立つ情報がたくさん入っていると思うので、ぜひ受講をしてみてください。
【注意点】
・コース内では、Conoha VPSとムームードメインのサービスを利用しますが、これらのサービスと本コースは一切無関係です。
アフィリエイト等で報酬は受けてはおらず、使い方の説明も公式とは関係ありません。
・サービスの使い方に関しては、収録当時の状態を元に説明をしています。
予めご了承ください。