JavaScript初学者【 応用力が身につく！実践トレーニング 】 動画リスト2024年


:::note info

JavaScript/jQueryを使っていますが「コードを学習」することではなく
 「 応用力 」「 創り上げる力 」  を学べるようにしてるのがポイントです。

:::


### 応用実践トレーニングの内容( 必ず読んで進んでください )
内容は **「基礎を学んだ」レベル**に合わせています。
JavaScriptの「超基礎」のところはプロゲートなどで見ていただくと良いかと思います。
**そういった教材で「自分で考えて作れるようにならなかった人」が対象です。**
「変数・分岐処理・繰り返し処理・関数・オブジェクト...」を応用できるようにするための教材として作りました。

他の学校、提携校の皆さんもご活用ください！
「学び方・作り方・考え方」全て揃っています！



 
-----

## ◆JavaScript初学者「効率よく学ぶためのポイントを紹介」準備編

| サムネ１| サムネ２ | 
| ---- | ---- | 
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/f2840006-202c-2e79-f93f-a9d2f2d5fa89.jpeg" width="300"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/e12c6cc4-9b74-310a-7139-eedc72402d50.jpeg" width="300"> |


| タイトル | 動画🔗 | 
| ---- | ---- | 
| 「プログラミング 究極の学習法」 | https://youtu.be/8FpFWRatdNc |
| 「効率よく学ぶ３つのポイント！」 | https://youtu.be/-oq87SQZKfg |
| 「正しい時間の使い方」 | https://youtu.be/AdjP8pYa70sg |


-----

## ◆JavaScript初学者「小さいアプリを沢山作る」トレーニング編

「変数・配列・繰り返し・オブジェクト...」の理解と応用能力を上げるトレーニング

| サムネ１| サムネ２ | 
| ---- | ---- | 
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/7a839e5a-cb72-d8f3-c0ec-10290a52c1fa.jpeg" width="300"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/107e7a04-aee8-f0c6-782d-1155762cc719.jpeg" width="300"> |


| タイトル | 動画🔗 | 
| ---- | ---- | 
| 「抽選アプリ」を作って楽しく学ぶ！（サンプルあり） | https://youtu.be/V5KCKbBo000 | 
| 「Todoアプリ」作って楽しく学ぶ！（サンプルあり） | https://youtu.be/PfV0Cus6jhw |
| 「アラーム機能を作る」作って楽しく学ぶ！ | https://youtu.be/OgV2cAg3Q8E |
| タイピングソフトを作ろう！（前編） | https://youtu.be/gRde88oundY |
| タイピングソフトを作ろう！（後編） | https://youtu.be/Cqu6Zuj24wo |
| メモ帳アプリ作りたい人「30分」で完成 | https://youtu.be/Bq80O4hix4s |
|「パスワード生成アプリ」 作って楽しく学ぶ！| https://youtu.be/bS3o91vY0Fo | 
| 「席決めアプリ」作って楽しく学ぶ！（サンプルあり） | https://youtu.be/aDRDRd_BR2s |
| 「40分で天気アプリを作る」Ajaxと作り方を学ぶ（OpenWeatherApi）| https://youtu.be/4m1vXYwfRJI |
| 「Book検索アプリ」Ajaxと作り方を学ぶ（サンプルあり） | https://youtu.be/Yo0gz7DN2xM |
| 「Chatアプリ（Firebase RDB version9 対応） | https://youtu.be/v2ILwppYXhY |
| 40分でFirebase/Google認証を解説（Firebase RDB version9 対応） | https://youtu.be/D47A-t_Ng5s |
| JSONが「完璧」に理解できる動画！ | https://youtu.be/67lgE8o-lwA |
| 「めちゃ解る！アルゴリズム授業１」（サンプルあり） | https://youtu.be/5hApch5oV3E |
| MAP API 使うならこのライブラリが最強！！ | https://youtu.be/CZG2ynZrbzg |

-----
## ◆JSで「File API」を使い画像を操作するトレーニング編

| サムネ１| サムネ２ | 
| ---- | ---- | 
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/51f0d973-8df8-ddc4-cac9-4483ed5a0210.jpeg" width="300"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/e338ddce-1852-416c-8c0c-8b19d4141153.jpeg" width="300"> |

| タイトル | 動画🔗 | 
| ---- | ---- | 
| 基本：画像サイズ取得・画像プレビュー（サンプルあり） | https://youtu.be/Zi1Kvsd_R_g |
| 応用：画像サイズ取得・画像プレビュー（サンプルあり） | https://youtu.be/g3Drrzu6HkQ |

-----

## ◆【限定公開】クラスを理解し「ライブラリを作る」思考をトレーニング編（中級）

:::note info
限定公開中ですが、一応 紹介しておきます。
:::

| サムネ１| サムネ２ | 
| ---- | ---- | 
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/2b561684-9cfc-4e77-a187-2e6174475517.jpeg" width="300"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/3c8db634-a82f-1cb8-32a1-cca54c553ede.jpeg" width="300"> |

| タイトル | 動画🔗 | 
| ---- | ---- | 
| 『クラス入門』丁寧に解説！（サンプルあり） | https://youtu.be/r6jJpBZkRRc |
| 限定公開：『ライブラリの作り方！』jsライブラリを作りながら仕組みを知る | https://youtu.be/UPNQRrVTAgo |

-----






## ◆「Chromeデベロッパーツール・全て学べる」トレーニング編
HTML/CSS/JavaScripを使った制作には「Chromeデベロッパーツール」は必須スキルです！
デザインの調整、他サイトの構造見たり、エラーの確認、デバッグ等で良く使います。

| サムネ１| サムネ２ | 
| ---- | ---- | 
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/d1a2687c-2d40-c530-3bea-f70765087d26.jpeg" width="300"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/9582c1de-606a-2f46-6da8-2efcd9299d5c.jpeg" width="300"> |

:::note info
デベロッパーツールは奥が深いので、最初は「#1,#2」だけをおススメします
:::

 
| タイトル | 動画🔗 | 
| ---- | ---- | 
| #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 |
| #7「 新機能"Recorder"を使って操作記録を残せ 」 | https://youtu.be/4iH16Qj0j80 |
| #8「 CSSチェックに最適＆その方法 」 | https://youtu.be/-bFnYXquDjU |
| #9「 Chrome最新情報のキャッチアップ方法 」 | https://youtu.be/SsVeZdwzbzk |
※この段階で100％理解はいりません。50％くらいの理解で「そんな機能あるのか」でOKです。
　必要になれば自然と使いだします。その時に覚えていけばOKです。
 
-----------


## おススメ動画
##### [TailwindCSS入門～学習動画リスト～](https://qiita.com/daisu_yamazaki/items/c1122260f82541438b8e)
##### [PHP【クラス入門】フレームワーク学ぶ前に～学習動画リスト～](https://qiita.com/daisu_yamazaki/items/ac63317224157c5dff58)


## 役立ちましたか？
チャンネル登録・フォロー・SNSでの拡散も是非お願いいたします。

**Twitter :**　 https://twitter.com/daisu_yamazaki
**Youtube：**   https://www.youtube.com/@osozaki


今後も講義動画増えたら、こちらを更新していきます。


以上

-----