JavaScript【 応用力が身につく！実践トレーニング 】 動画集
JavaScript【応用力が身につく！実践トレーニング】
自己紹介
ジーズアカデミー学校長（デジタルハリウッドでも教鞭をとる）山崎と申します。
ジーズアカデミーは開校6年目のデジタルハリウッドが運営する「起業家エンジニア養成スクール（卒業生が6年で69社起業し総資金調達額80億5,620万円と卒業生が頑張っている学校）」です。
今回、私の授業（初級者向け）で応用力を鍛えるためのサポート動画でYoutube配信したものをまとめました。
全国のプログラミング初学者・初級者の皆さんの底上げになればと思い公開させていただきます。必ず「基礎を学んだあと」に、以下動画をやり切っていただければ理解が深まります。
応用実践トレーニングの内容
内容は「基礎を学んだ」レベルに合わせています。
JavaScriptの「超基礎」のところはプロゲートなどで見ていただくと良いかと思います。そういった教材で「自分で考えて作れるようにならなかった人」が対象です。
「変数・分岐処理・繰り返し処理・関数・オブジェクト...」を応用できるようにするための教材として作りました。
また「 デジタルハリウッド / ジーズアカデミー / 大学 / 大学院 」で私の講義動画を見たことがある人はその追加講義として見ていただければと思います。
※他の学校、提携校の皆さんもご活用ください！
「学び方・作り方・考え方」全て揃っています！
◆「効率よく学ぶためのポイントを紹介」準備編
 |
 |
| タイトル | 動画🔗 |
|---|---|
| 「効率よく学ぶ３つのポイント！」 | https://youtu.be/-oq87SQZKfg |
| 「正しい時間の使い方」 | https://youtu.be/AdjP8pYa70sg |
| プログラミング初学者「最高の学習法」 | https://youtu.be/8FpFWRatdNc |
| Visual Studio Code おススメ便利機能 | https://youtu.be/XQ8P51rc1Cg |
| New プログラミング特別講座を公開中（チャンネル紹介動画） | https://youtu.be/4-sNi6841Kw |
◆「小さいアプリを沢山作る」トレーニング編
「変数・配列・繰り返し・オブジェクト...」の理解と応用能力を上げるトレーニング
 |
 |
| タイトル | 動画🔗 |
|---|---|
| 「抽選アプリ」を作って楽しく学ぶ！（サンプルあり） | https://youtu.be/V5KCKbBo000 |
| 「Todoアプリ」作って楽しく学ぶ！（サンプルあり） | https://youtu.be/PfV0Cus6jhw |
| 限定公開：「席決めアプリ」作って楽しく学ぶ！（サンプルあり） | https://youtu.be/aDRDRd_BR2s |
| 「アラーム機能を作る」作って楽しく学ぶ！ | https://youtu.be/OgV2cAg3Q8E |
| 「Book検索アプリ」Ajaxと作り方を学ぶ（サンプルあり） | https://youtu.be/Yo0gz7DN2xM |
| 「Chatアプリ（Firebase RDB version9 対応） | https://youtu.be/v2ILwppYXhY |
| 限定公開：「Chatアプリ前編（Firebase Firestore version9 対応） | https://youtu.be/Z6-0CpG619s |
| 限定公開：「Chatアプリ後編（Firebase Firestore version9 対応） | https://youtu.be/40Z9kK8kO60 |
| jQueryわかるなら「JavaScriptも理解できる！」 | https://youtu.be/5ENyHWkClMI |
| JSONが「完璧」に理解できる動画！ | https://youtu.be/67lgE8o-lwA |
| New「パスワード生成アプリ」作って楽しく学ぶ！（サンプルあり） | https://youtu.be/bS3o91vY0Fo |
| Newタイピングソフトを作ろう！（前編） | https://youtu.be/gRde88oundY |
| Newタイピングソフトを作ろう！（後編） | https://youtu.be/Cqu6Zuj24wo |
◆アルゴリズムとは？を理解するトレーニング編
 |
 |
| タイトル | 動画🔗 |
|---|---|
| 「めちゃ解る！アルゴリズム授業１」（サンプルあり） | https://youtu.be/5hApch5oV3E |
| 限定公開：「めちゃ解る！アルゴリズム授業２」（サンプルあり） | https://youtu.be/LqTn957uSb4 |
◆クラスを理解し「ライブラリを作る」思考をトレーニング編（中級）
 |
 |
| タイトル | 動画🔗 |
|---|---|
| 限定公開：『クラス入門』丁寧に解説！（サンプルあり） | https://youtu.be/r6jJpBZkRRc |
| 限定公開：『ライブラリの作り方！』～jQueryを作ってみる～ | https://youtu.be/UPNQRrVTAgo |
◆JSで「File API」を使い画像を操作するトレーニング編
 |
 |
| タイトル | 動画🔗 |
|---|---|
| 基本：画像サイズ取得・画像プレビュー（サンプルあり） | https://youtu.be/Zi1Kvsd_R_g |
| 応用：画像サイズ取得・画像プレビュー（サンプルあり） | https://youtu.be/g3Drrzu6HkQ |
◆ビジュアルプログラミング「p5.js」を知る！トレーニング編
ビジュアルプログラミング「p5.js」を使ってみます。
お題として、すみっコぐらし風の「ネコ」をプログラミング描きならが慣れましょう。
 |
 |
| タイトル | 動画🔗 |
|---|---|
| 前編：すみっコぐらし風プログラミング「ネコを描く」 | https://youtu.be/Mo9Y1-Q_D2w |
| 後編：すみっコぐらし風プログラミング「ネコを描く」 | https://youtu.be/gOBWomSWaxA |
◆ Webデザイナーが絶対に挫折しない【JavaScript学習法】
| タイトル | 動画🔗 |
|---|---|
| 1. 【JavaScript学習法】document, querySelector, innerHTML | https://youtu.be/0rPZNAnxQMI |
| 2. 【JavaScript学習法】style/CSS | https://youtu.be/7HOv_3BspbU |
| 3. 【JavaScript学習法】イベント/click | https://youtu.be/PsZboNpkojw |
| 4. 【JavaScript学習法】jQuery Vol.1 | https://youtu.be/GBVI7_HdM68 |
◆「Chromeデベロッパーツール・全て学べる」トレーニング編
HTML/CSS/JavaScripを使った制作には「Chromeデベロッパーツール」は必須スキルです！
デザインの調整、他サイトの構造見たり、エラーの確認、デバッグ等で良く使います。
 |
 |
| タイトル | 動画🔗 |
|---|---|
| #1「 Elements/Console 」 | https://youtu.be/PjZyPfXdJFA |
| #2「 デバッガ― 」 | https://youtu.be/TXi5g4J17ds |
| #3「 ブラウザ機能 （中級レベル）」 | https://youtu.be/DsHhKs9V03o |
| #4「 Lighthouse（中級レベル） 」 | https://youtu.be/srayKfhg5Ho |
| #5「 セキュリティ＆ネットワーク機能（中級レベル） 」 | https://youtu.be/Sn1oaEJwt0k |
| #6「 CSSアニメーション検証機能（中級レベル） 」 | https://youtu.be/zICHhUf6-Nw |
| ※この段階で100％理解はいりません。50％くらいの理解で「そんな機能あるのか」でOKです。 | |
| 必要になれば自然と使いだします。その時に覚えていけばOKです。 |
◆アプリを作る上での考え方編
最初「こんなの作ろうかな～」「あんなの作りたい！」とあると思いますが、
最初にどうやって初めていいか分からないのではないでしょうか？
作り始める前の頭を整理し、どのように作っていくかを解説している動画になります。
| タイトル | 動画🔗 |
|---|---|
| 限定公開：初めてアプリを作る時どう進めればいいの？（授業内の切り抜き） | https://youtu.be/DYRdF7KNyqM |
| 新規事業あるある～プロトタイプは最大の武器～ | https://youtu.be/GziwBqUHRuc |
| ライブラリの調べ方＆使い方 | https://youtu.be/ShQJTcxXDmY |
◆プログラミング初学者「絶対やるエラー10選」エラー対策に
 |
 |
| タイトル | 動画🔗 |
|---|---|
| プログラミング初心者『 エラー 10選 (前編)』これで解決 | https://youtu.be/Iy1uvBrPCIY |
| プログラミング初心者『 エラー 10選 (後編)』これで解決 | https://youtu.be/CnODCflPMgY |
◆ 別のおススメ動画
| タイトル | 動画🔗 |
|---|---|
| 限定公開：クラウド＆レンタルサーバーの「違い・仕組み・用語」12分で学ぶ | https://youtu.be/GFr6eeY8V7M |
| Linuxコマンド 超入門「ブラウザだけで学べます」 | https://youtu.be/-7ZDeEYgrh8 |
| データベース？「 基本から解説」（プログラミング必須スキル） | https://youtu.be/Er4JbQXyTxM |
| パソコンを知らない私が「エンジニア」になれたポイントお話します | https://youtu.be/Hh15HcpKtYM |
| ハーバード大、プログラミング講座を見て驚いた！ | https://youtu.be/7Qs84P0EoB8 |
| 個人開発したWebサービス「 1年運営してみた 」 | https://youtu.be/NbganVQJgmU |
◆ ログミーに載ったので
| タイトル | 動画🔗 |
|---|---|
| 前編：28歳で初めてパソコンに触れた“遅咲きエンジニア” | https://logmi.jp/tech/articles/325841 |
| 後編：「点を頑張らないと、線につながらない」 | https://logmi.jp/tech/articles/325851 |
【山崎メソッドの動画、役立ちましたか？】
山崎メソッドは「楽しく、作りながら学び、小さな成功体験を積む」を重視しています！
- SNSでの拡散
- 学校で「使わせてもらってます」
- 応援メッセージ
など、お願いできればと思います!!
※必須ではありませんが今後のやる気につながります(#^^#)
学校等での講義依頼も受けてますので気軽にお声がけください
また、基礎から私たちから学びたいと言う人がいれば、ぜひ学校へ来てください。
今後も講義動画増えたら、こちらを更新していきます。
ブックマークしていただければ幸いです。
以上
Discussion