
このコースを受講した後に受講生が得られる未来について解説しています。
プログラミングを勉強する前に持つ3つの疑問を確認できます。
プログラミングとは何かをを知ることができます。
プログラムがどんな製品に使われるのかを知るすることができます。
プログラミングはどうやって作るのかを知ることができます。
受講生がこのコースに対して持つ2つの疑問を確認することができます。
ブラウザアプリ作る理由とJavaScriptを使う理由を知ることができます。
ブラウザアプリに対して感じる不安を解消することができます。
Google Chrome のインストール方法を知ることができます。
Visual Studio Code のインストール方法を知ることができます。
Visual Studio Code を日本語表示にする方法を知ることができます。
本コースの目標を知ることが確認することができます。
本コースの目標を達成するまでの手順を確認することができます。
本コースの講師について知ることができます。
プログラムの基礎が何を理解することができます。
プログラムの命令とは何かを理解することができます。
プログラムの4大命令について理解することができます。
このセクションの内容を再確認することができます。
アプリを開発する手順を知ることができます。
手順1の「設計図の確認」で行う内容を知ることができます。
手順2のUIの作成で行う内容を知ることができます。
手順3の「UIに機能を付ける」で行う内容を知ることができます。
手順4の「デバッグ」で行う内容を知ることができます。
手順5の「リリース」で行う内容を知ることができます。
このセクションの内容を再確認することができます。
検索をする時の4つのコツについて知ることができます。
専門用語を覚える理由とメリットについて知ることができます。
検索トップ10以外も調べた方が良い理由とメリットについて知ることができます。
英語サイトも調べた方が良い理由とメリットについて知ることができます。
完璧な答えを求めてはいけない理由を知ることができます。
このセクションの内容について再確認することができます。
テストプログラムを作成する理由と目的を知ることができます。
ブラウザアプリの新規プロジェクトを作成する方法を知ることができます。
HTMLファイルとJavaScriptのファイルの役割を知ることができます。
HTMLのエレメントが何かを理解することができます。
HTMLのアトリビュートが何かを理解することができます。
HTMLのアトリビュートの1つ、styleの書き方について理解することができます。
プログラムのソースについてとは何かを理解することができます。
プログラムの命令文とは何かを理解することができます。
プログラムがどのように進むのかを理解することができます。
HTMLでボタンを作成する方法を知ることができます。
HTMLのイベントを設定できるようになります。
このセクションで学んだ内容を再確認することができます。
ブラウザアプリで新規プロジェクトを作成する方法を確認することができます。
Visual Studio Code のプラグインのDraw.IOのインストール方法を知ることができます。
本コースで作成する電車アプリの設計図の内容を確認することができます。
HTMLでブランクページを作成する方法を知ることができます。
電車で利用する装飾されたボタンの作り方を知ることができます。
前のレクチャーで作成した装飾されたボタンに設定したstyleの設定値について、なぜその値を設定したかを知ることができます。
HTMLでエレメントを複製するコツを知ることができます。
HTMLでコメントを書く方法を知ることができます。
HTMLでソースコードをキレイにまとめてエレメントを複製する方法を知ることができます。
HTMLでテキストボックスを作成する方法を知ることができます。
テキストボックスに追加するべきアトリビュートを知ることができます。
JavaScriptで制御をするために必要になります。
HTMLでエレメントにイベントを設定する方法を知ることができます。
「UIに機能を付ける」とは何をすることなのかを理解することができます。
JavaScriptの変数作成方法と値を代入する方法を知ることができます。
JavaScriptを使って、HTMLで作成したテキストボックスに値を代入する方法を知ることができます。
JavaScriptの変数のスコープについて知ることができます。
JavaScriptでグローバル変数を作成する方法を知ることができます。
JavaScriptでコメントを書く方法を知ることができます。
JavaScriptで計算をする方法を知ることができます。
JavaScriptで計算元の変数自体を更新する計算の書き方を知ることができます。
インクリメント、デクリメントの言葉の意味と使い方を知ることができます。
前のレクチャーで覚えた計算の仕方を使って電卓の数字入力部分を作成していきます。
JavaScriptで定数を作成する方法を知ることができます。
真理値とは何かということと使うメリットを知ることができます。
JavaScriptで条件文を書く方法を知ることができます。
前のレクチャーで発見した不具合の修正をします。
条件文を使って電卓の計算部分の作成をしていきます。
計算をする時の注意点について知ることができます。
JavaScriptでSwitch文を書く方法を知ることができます。
関数の役割とJavaScriptでの関数の書き方を知ることができます。
JavaScriptの関数で引数を使う方法を知ることができます。
JavaScriptの関数で複数の引数を使う方法を知ることができます。
JavaScriptの関数で戻り値を使う方法を知ることができます。
ここまでのレクチャーで発見した不具合の修正をします。
ここまでのレクチャーで発見した不具合の修正をします。
電卓のイコールボタンの動作を作成します。
電卓のDELETEボタンの動作を作成します。
ライブラリとは何かということと、ライブラリのメリットを知ることができます。
電卓のACボタンの動作を作成します。
デバッグの種類と方法を知ることができます。
今回のアプリ作成で発生したバグを解決します。
今回のアプリ作成で発生したバグを解決します。
今回のアプリ作成で発生したバグを解決します。
作成したアプリを配布する方法を知ることができます。
このセクションで学んだ文法を再確認することができます。
このセクションの概要とブロック崩しを作成する理由を知ることができます。
既存のプロジェクトから新規プロジェクトを複製する方法を知ることができます。
ブロック崩しの設計図を確認することができます。
ブロック崩しのUIを作成します。
UIコンポーネントの1つのキャンバスについて理解することができます。
キャンバスを使って矩形を書く方法を知ることができます。
キャンバスを使って円を書く方法を知ることができます。
円を描画する関数の引数について、なぜその値を設定しているかを理解することができます。
JavaScriptで配列を作成する方法を知ることができます。
繰り返し文とは何かを理解することができます。
JavaScriptで for を使った繰り返し文の書き方を理解することができます。
JavaScriptで while を使った繰り返し文の書き方を理解することができます。
for を使った繰り返しの具体的な使い方を知ることができます。
オブジェクト指向とは何かを理解することができます。
オブジェクト指向を使ってプログラミングをする手順を理解することができます。
JavaScripitでクラスを作成する方法を知ることができます。
new命令を使ってオブジェクトを構築する方法を知ることができます。
インスタンスとは何かを理解することができます。
インスタンスの使い方を理解することができます。
静的変数、静的関数とは何かを理解することができます。
クラスの具体的な利用方法を知ることができます。
クラスの具体的な利用方法を知ることができます。
静的関数の具体的な利用方法を知ることができます。
クラスで利用する this とは何かを理解することができます。
ブラウザアプリでイベント設定する方法を再確認することができます。
JavaScriptでタイマーを作成する方法を知ることができます。
アニメーションの仕組みを理解することができます。
点と矩形の当たり判定の方法を知ることができます。
JavaScriptで複合条件文を書く方法を知ることができます。
マウス操作で図形を動かす方法を知ることができます。
マウス操作で図形を動かす方法を知ることができます。
玉を自動で動かす方法を知ることができます。
矩形と矩形の当たり判定(外に飛び出さない方法)を理解することができます。
矩形と矩形の当たり判定(外に飛び出さない方法)を理解することができます。
矩形と矩形の当たり判定(外に飛び出さない方法)を理解することができます。
矩形と矩形の当たり判定(外から入ってこない方法)を理解することができます。
矩形と矩形の当たり判定(外から入ってこない方法)を理解することができます。
フラグを使ったオブジェクトの状態の操作方法を知ることができます。
ゲームの状態の切り替え方法を知ることができます。
ゲームの状態の切り替え方法を知ることができます。
ソースコードをキレイに保つ必要性を理解することができます。
ソースコードをキレイに保つ必要性を理解することができます。
このセクションで学んだ文法を再確認することができます。
プログラミングを勉強するなら、まずは将来に渡って役に立つことから勉強しませんか?
プログラミング言語には、どんな言語にも共通して存在する基礎的な文法があります。
特に大事なのは、
代入
計算
条件分岐
繰り返し
この4つで、加えて、
配列
関数
オブジェクト指向
この3つも大事になります。
このコースでは、これら7つの文法について、アプリを開発しながら勉強していきます。
プログラミング言語はJavaScriptを利用します。
JavaScriptを使う理由は
簡単に実行できる
他の言語との共通点が多い
など、未経験者が学習をするのにメリットが多いからです。
■一人で開発する力を身に着けたくありませんか?
プログラミングは、文法を覚えただけでは開発をすることはできません。
そのため、このコースでは開発手順や問題解決の方法もお伝えしていきます。
このコースを受講することでプログラミングの基礎と一人で開発をするための力でが身につきます。
この力はこれからプログラマーとして活躍する時に役に立ちます。
プログラミングをしたいけど、何から勉強したら分からない、基礎を身に着けたい、そんな状態であれば、ぜひ受講をしてみてください。
※セクション3の「開発環境の構築」を無料視聴できます。
受講前に開発環境を整えて、動作確認をすることをオススメします。
※本コースはWindowsのパソコンを使って解説をしています。
■ コース内容(※カッコ内は時間)
セクション1 はじめに(00:01:44)
・このコースで得られる3つの未来
セクション2 プログラミングの学習前に持つ疑問(00:11:44)
・プログラミングに関する3つの疑問
・プログラミングって何
・プログラムは何に使われている
・プログラムはどうやって作るのか
・受講前の2つの疑問
・なぜブラウザアプリを作るのか
・【補足】ブラウザアプリに関する疑問
・まとめ
セクション3 開発環境を作る(00:10:09)
・Google Chrome のインストール
・Visual Studio Code のインストール
・Visual Studio Code の日本語化
セクション4 コースの目標と全体像(00:06:33)
・コースの目標
・目標達成までの手順
・講師紹介
セクション5 プログラミングの基礎を理解する(00:09:18)
・プログラムの基礎とは?
・命令とは?
・プログラムの4大命令
・このセクションのまとめ
セクション6 アプリの開発手順を知る(00:13:27)
・アプリの開発手順
・手順1・設計図を作成する
・手順2・UIの作成
・手順3・UIに機能を付ける
・手順4・デバッグ
・手順5・リリース
・このセクションのまとめ
セクション7 検索の仕方を学ぶ(00:13:02)
・検索するときに大事なこととは?
・専門用語を覚える
・検索トップ10以外も調べる
・英語サイトも調べる
・完璧な答えを求めない
・このセクションのまとめ
セクション8 テストプログラムの作成(01:14:13)
・テストプログラムを作る理由とこのセクションの内容
・新規プロジェクトの作成
・HTMLとJavaScriptの役割
・HTMLの基礎・エレメントとは
・【補足】headとbodyの役割について
・HTMLの基礎・アトリビュートとは
・HTMLの基礎・styleの書き方
・ソースコード
・命令文
・プログラムの進み方
・ボタンを作成する
・イベントと関数・イベントについて
・イベントと関数・関数について
・まとめ
セクション9 電卓の作成(04:53:38)
・新規プロジェクトの作成
・Draw IO のインストール
・設計図の確認
・UIの作成・ブランクページの作成
・UIの作成・ボタンの作成
・UIの作成・styleの設定値の確認
・UIの作成・ボタンを1行分作成する
・UIの作成・コメントを書く
・UIの作成・残りのボタンの作成
・UIの作成・テキストボックスの作成
・【補足】テキストボックスにアトリビュートを追加する
・UIの作成・イベントの設定
・UIに機能を付ける
・変数と代入
・テキストボックスに数字を表示する
・変数のスコープ
・グローバル変数を作成する
・コメントを書く
・計算をする
・変数を更新する計算
・インクリメントとデクリメント
・電卓の数字入力の作成
・定数の作成
・真理値(フラグ)
・条件文
・不具合修正 01
・計算に対応する
・計算結果の表示と計算の注意点
・Switch
・関数
・引数を使う
・引数を複数使う
・戻り値を使う
・不具合修正 02
・不具合修正 03
・イコールボタンの実装
・DELETEボタンの実装
・ライブラリとは
・ACボタンの実装
・デバッグ方法の紹介
・デバッグ・バグ修正 01
・デバッグ・バグ修正 02
・デバッグ・バグ修正 03
・リリース
・このセクションのまとめ
セクション10 ブロック崩しの作成(04:21:22)
・なぜブロック崩しを作るのか?
・新規プロジェクトの作成
・設計図の確認
・UIの作成
・キャンバスとは
・自機を配置する
・玉を配置する
・玉を描画する関数の説明
・配列
・繰り返し文
・繰り返し文・for
・繰り返し文・while
・ブロックの表示
・オブジェクト指向
・オブジェクト指向でプログラミングをする手順
・クラスを作る
・newを使う
・インスタンスとは
・インスタンスの使い方
・静的関数、静的変数
・玉のクラスの作成
・ブロックのクラスの作成
・ブロックのプログラムをまとめる
・イベントを設定する
・タイマーを作成する
・描画関数の移動
・マウスポインタとの当たり判定
・複合条件文
・プレイヤーを動かす 01
・プレイヤーを動かす 02
・玉を動かす
・玉を跳ね返す 01
・玉を跳ね返す 02
・玉を跳ね返す 03
・プレイヤーが球を跳ね返す 01
・プレイヤーが球を跳ね返す 02
・ブロックを消す
・ゲームクリアの判定
・ゲームオーバーの判定
・リファクタリング 01
・リファクタリング 02
・このセクションのまとめ
セクション11 効率良く開発する方法(00:12:20)
・はじめに
・なぜ効率よく開発する方法を学ぶのか?
・車輪の再開発をしない
・専門用語で検索をする
・プログラムの構造を真似る
・このセクションのまとめ
セクション12 最後に(00:05:06)
・終わりのあいさつ