- 25
- 267 730
よしぴーのYouTubeプログラミングスクール
Приєднався 18 лис 2016
UA-camでプログラミングスクールをしています。もっと勉強したい方はUdemyへ。www.udemy.com/user/yoshipi/
これ1本でVue.jsで必要な知識が全て手に入る講座です。【超Vue.js完全ガイド 2024】
このコースはこれ1本でVue.jsで必要な知識が全て手に入る、Vue.js完全ガイドとなっています。この講座を修了する頃には、Vue.jsの多くを熟知し、Vue.jsを使ったWebサービスを世界中に公開しているでしょう。
続きはこちらから視聴できます。
www.udemy.com/course/vue-js-complete-guide/?couponCode=DEA237F8EC10F9277C08
Twitterはこちら
__yoshipi__
もくじ
0:00 これがVue.jsだ！
05:36 このコースの流れ
08:44 こうしてVue.jsをはじめる(イントロダクション)
09:11 「単一ファイルコンポーネント」と「Vite」
13:36 こうして開発環境を整える(Node.js, VSCode, create-vue)
20:29 create-vueが作成したプロジェクトはどうなっているのか
31:20 拡張機能はこうセットアップする(Volar, ESLint, Prettier)
39:15 createAppを使ってVueのアプリを作る方法
46:59 .vueファイルはこうなっている！
52:44 JavaScriptのデータを表示する方法
56:09クリックされた時に処理を実行する方法
58:50これがリアクティビティだ！
1:02:38 ref()を使ってリアクティブなデータを作る方法
1:10:29 reactive()を使ってオブジェクトをリアクティブにする方法
1:19:41 reactive()とref()はこうして一緒に使える
1:27:48 普通のオブジェクトとref()はこうして一緒に使う
1:35:58 これがVue.jsの基礎だ！(テンプレート構文, イベントハンドリング, 算出プロパティ, ウォッチャー, クラス/スタイル)(イントロダクション)
1:36:27 これがテンプレート構文だ！
1:39:25 二重波括弧({})を使ってデータを描画する方法
1:41:56 これがv-から始まる特別な属性であるディレクティブだ！
1:43:11 v-htmlを使ってデータをHTMLとして出力する方法
1:46:29 こうしてv-bindを使って属性値を指定する
1:52:00 Boolean属性に対してv-bindを利用する方法
1:55:30 v-bindで１度に複数の属性を指定する方法
1:57:01 v-onを用いてクリックなどのイベント発生時に特定の処理をする方法
2:02:24 イベントオブジェクトを使ってイベントの情報を取得する方法
2:05:01 v-onでハンドラーに引数を渡す方法
2:06:15 イベント修飾子を使って頻繁に行う処理を簡略化する方法 - stop, prevent
2:12:01キー修飾子を使ってキーボードイベントに対して処理をする方法
2:14:00 ディレクティブの構造はこうなっている
2:15:15 角括弧([])を使ってディレクティブの引数にscriptのデータを指定する方法
2:16:44 v-modelを使用してinputを単純に扱えるようにする方法
2:19:25 computedを使って複雑な式を１つにまとめる方法
2:30:18 computedを使う時はここに注意する - ReactiveEffect
2:46:19 watchEffectを使ってリアクティブなデータの変更を監視する方法
2:53:43 watchを使って特定のリアクティブなデータの変更を監視する方法
3:09:18 class属性はこう指定する！
3:17:49 style属性はこう指定する！
続きはこちらから視聴できます。
www.udemy.com/course/vue-js-complete-guide/?couponCode=DEA237F8EC10F9277C08
Twitterはこちら
__yoshipi__
もくじ
0:00 これがVue.jsだ！
05:36 このコースの流れ
08:44 こうしてVue.jsをはじめる(イントロダクション)
09:11 「単一ファイルコンポーネント」と「Vite」
13:36 こうして開発環境を整える(Node.js, VSCode, create-vue)
20:29 create-vueが作成したプロジェクトはどうなっているのか
31:20 拡張機能はこうセットアップする(Volar, ESLint, Prettier)
39:15 createAppを使ってVueのアプリを作る方法
46:59 .vueファイルはこうなっている！
52:44 JavaScriptのデータを表示する方法
56:09クリックされた時に処理を実行する方法
58:50これがリアクティビティだ！
1:02:38 ref()を使ってリアクティブなデータを作る方法
1:10:29 reactive()を使ってオブジェクトをリアクティブにする方法
1:19:41 reactive()とref()はこうして一緒に使える
1:27:48 普通のオブジェクトとref()はこうして一緒に使う
1:35:58 これがVue.jsの基礎だ！(テンプレート構文, イベントハンドリング, 算出プロパティ, ウォッチャー, クラス/スタイル)(イントロダクション)
1:36:27 これがテンプレート構文だ！
1:39:25 二重波括弧({})を使ってデータを描画する方法
1:41:56 これがv-から始まる特別な属性であるディレクティブだ！
1:43:11 v-htmlを使ってデータをHTMLとして出力する方法
1:46:29 こうしてv-bindを使って属性値を指定する
1:52:00 Boolean属性に対してv-bindを利用する方法
1:55:30 v-bindで１度に複数の属性を指定する方法
1:57:01 v-onを用いてクリックなどのイベント発生時に特定の処理をする方法
2:02:24 イベントオブジェクトを使ってイベントの情報を取得する方法
2:05:01 v-onでハンドラーに引数を渡す方法
2:06:15 イベント修飾子を使って頻繁に行う処理を簡略化する方法 - stop, prevent
2:12:01キー修飾子を使ってキーボードイベントに対して処理をする方法
2:14:00 ディレクティブの構造はこうなっている
2:15:15 角括弧([])を使ってディレクティブの引数にscriptのデータを指定する方法
2:16:44 v-modelを使用してinputを単純に扱えるようにする方法
2:19:25 computedを使って複雑な式を１つにまとめる方法
2:30:18 computedを使う時はここに注意する - ReactiveEffect
2:46:19 watchEffectを使ってリアクティブなデータの変更を監視する方法
2:53:43 watchを使って特定のリアクティブなデータの変更を監視する方法
3:09:18 class属性はこう指定する！
3:17:49 style属性はこう指定する！
Переглядів: 45 108
Відео
１つの講座にJavaScriptで必要な知識を全てを詰め込みました【超JavaScript完全パック】
Переглядів 14 тис.2 роки тому
この講座はこれ1本でJavaScriptで必要な知識が全て手に入る、JavaScript完全パックとなっています。この講座を修了する頃には、あなたは自信を持ってJavaScriptを使いこなせているでしょう。 続きはこちらから視聴できます。 www.udemy.com/course/javascript-complete/?couponCode=6456E23AFEBB9468747C Twitterはこちら(ご連絡いただければクーポンをお送りします) yoshipi もくじ 00:00 これがJavaScriptだ！ 07:11 ブラウザでJavaScriptを実行する方法 10:00 JavaScriptの歴史はこうなっている 23:50 このコースの流れ 26:40 VSCodeを使って効率よくJavaScriptを書く方法 36:36 イントロダクシ...
【NestJS入門】基礎からmongoDB、認証までを一気に解説 -Full
Переглядів 19 тис.4 роки тому
TypeScriptを使ったNode.jsフレームワークであるNestJSの、基礎的なCRUDからmongoDBとの連携、認証までを解説しています。 * 57:12で、mongooseの型定義ファイルを別にインストールしていますが、v5.11(2020年12月1日)からデフォルトで型定義ファイルが付くようになったため、v5.11以降のmongooseをお使いの方は特に型定義ファイルをインストールする必要はございません。 0:00 NestJSとは何か、なぜ使うのか 2:27 NestJSをインストールする方法 3:22 私が入れているVSCodeの拡張機能の紹介 3:49 NestJSのフォルダの構造はこうなっている 6:30 main.tsはこうなっている 7:45 moduleはこうして使う 9:11 controllerはこうなっている 12:12「service」と「DI」 ...
超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！
Переглядів 50 тис.4 роки тому
TypeScriptの基礎から、実践的な内容までを学びますので、本気でTypeScriptエンジニアになりたい方はこの講座で学んでください。講座を修了する頃には、TypeScriptの多くを熟知しているでしょう。 続きはこちらから視聴できます。 www.udemy.com/course/typescript-complete/?couponCode=2D7AB0E0BD7E2F8963F3 Twitterはこちら(ご連絡いただければクーポンをお送りします) yoshipi もくじ 0:00 これがTypeScriptだ 6:14 TypeScriptをインストールする方法 7:41 TypeScriptをJavaScriptに変換する方法 12:15 TypeScriptを使うべき３つの理由 12:59 TypeScriptのドキュメントとしての側面を理解す...
Vue3とComposition APIの概要を一気に解説
Переглядів 17 тис.4 роки тому
Vue 3とComposition APIを先取りして解説いたしました。 Vue 2の解説動画もUdemyに出していますので、よければ復習にお使いください！ www.udemy.com/course/vue-js-complete-guide/?couponCode=BBD1A0124A6C8B4903D1 Vue 3のドキュメントはこちら vue-composition-api-rfc.netlify.com/ Composition APIのgithubはこちら github.com/vuejs/composition-api Twitterはこちら yoshipi TypeScriptの講座はこちら www.udemy.com/course/typescript-complete/?couponCode=60FA46CAAE90163820AC
超Vue.js 2 入門 完全パック - Vueでアプリを作りたい方必見！ (Vue Router, Vuex含む)
Переглядів 39 тис.5 років тому
Vue JS の基礎から、Vue CLI、Vue Router、Vuex、Firebaseを使った実践的な内容までを学びますので、本気でVueJSエンジニアになりたい方はこの講座で学んでください。講座を修了する頃には、VueJSの多くを熟知しているでしょう。 続きはこちらから視聴できます。 www.udemy.com/course/vue-js-complete-guide/?couponCode=BBD1A0124A6C8B4903D1 Twitterはこちら yoshipi
2値画像で必要な6つの考え方(連結性、輪郭追跡、ラベリング、収縮、膨張、オープニング、クロージング、ホワイトトップハット、ブラックトップハット、形状特徴パラメータ、距離)
Переглядів 1,5 тис.5 років тому
激おこぷんぷん丸とは、"2013年3月2日にTwitter利用者の一人が「ギャルが怒った時に使う言葉」と題し、「おこ」を怒りの度合いに合わせて6段階に発展させたツイートを投稿したことが流行の発端になったとされる"
3つの2値化の方法(P-タイル法、モード法、判別分析法)
Переглядів 2 тис.5 років тому
"アホ毛（アホげ）とは、美容に関する日本の若者言葉で、まとめた髪の毛の表面からビンビン出てきて（跳ねて）いる短い毛のことを指す。英語では"cowlick"や"frizz"と呼ばれている"
画素の補間を行う３つの方法(ニアレストネイバー、バイリニア補間、バイキュービック補間)
Переглядів 2,9 тис.5 років тому
空間フィルタリングの動画はこちら ua-cam.com/video/-2IyHvG9uS8/v-deo.html
エッジの抽出〜6つの微分フィルタ 後編 (ラプラシアンフィルタ、LOGフィルタ、鮮鋭化フィルタ)
Переглядів 1,3 тис.5 років тому
前編はこちら ua-cam.com/video/428r5ugkB1o/v-deo.htmlsi=a57XiLdOAlg9CYns
エッジの抽出〜6つの微分フィルタ 前編 (プリューウィット(Prewitt)フィルタ、ソーベル(Sobel)フィルタ、2次微分フィルタ)
Переглядів 2,3 тис.5 років тому
エッジの抽出〜6つの微分フィルタ 前編 (プリューウィット(Prewitt)フィルタ、ソーベル(Sobel)フィルタ、2次微分フィルタ)
4つのエッジ保存平滑化フィルタ(エッジ保存スムージング、K最近隣平滑化フィルタ、バイラテラルフィルタ、メディアンフィルタ)
Переглядів 1,1 тис.5 років тому
4つのエッジ保存平滑化フィルタ(エッジ保存スムージング、K最近隣平滑化フィルタ、バイラテラルフィルタ、メディアンフィルタ)
テスト前に見たら単位はOK! 空間フィルタリングを理解する(平滑化フィルタ、重み付き平滑化フィルタ、加重平均化フィルタ、ガウシアンフィルタ)
Переглядів 3,5 тис.5 років тому
テスト前に見たら単位はOK! 空間フィルタリングを理解する(平滑化フィルタ、重み付き平滑化フィルタ、加重平均化フィルタ、ガウシアンフィルタ)
デザイナー必見！7つのトーンカーブ(ヒストグラム、折れ線、指数対数型、 S字、ネガポジ反転処理、ポスタリゼーション、2値化、ソラリゼーション)
Переглядів 7545 років тому
デザイナー必見！7つのトーンカーブ(ヒストグラム、折れ線、指数対数型、 S字、ネガポジ反転処理、ポスタリゼーション、2値化、ソラリゼーション)
定式化された問題を標準形に書き換える方法(数理解析、数理計画問題、線形計画問題)
Переглядів 2,4 тис.5 років тому
定式化された問題を標準形に書き換える方法(数理解析、数理計画問題、線形計画問題)
🇯🇵🇯🇵いいね
🇯🇵🇯🇵🇯🇵いいですね
1:30:30 プロパティは資産という意味だということも説明しろ。
JavaScript作ったやつってほんとバカだと思う。 同じことを複数の書き方でできるようにしてるから覚えるほうが大変すぎる。 チームに一人でもあまり使わない書き方で書いてる奴がいるとトラブルの原因になる。
ecmaの元名前なんて知ってる奴ほとんどいないだろ。 ecma自体知らない人も多いと思う。
「 ref()を使ってリアクティブなデータを作る方法」の段階で"npm run dev"で実行してみると[error: Two output files share the same path but have different contents: node_modules\.vite\deps_temp_956c586e\vue.js]がコンソールに表示され正常にカウントアップが再現されません。 一方"npm run build"を実行し"npm run preview"でブラウザに表示させると正常に動き表示されます。 どうしてこの様な現象が起きるのでしょうか。eslintとprettierの競合などが原因しているのでしょうか？
自己解決しました。最初の環境設定時に"npm run format"を行っていなかった為のようです。 指示された手順通りにしないと、とても面倒なことになると言う結果でした。
めちゃめちゃ分かりやすかったです！jwt周りや各用語も丁寧に説明してくださって助かりました
JavaScriptに関して言えば、検証ツールの1番の使い所はソースタブでデバッグモードで処理を止めながら色々確認出来るところだと思うが...
なんで昔と喋り方違うの笑
どっちが好きですか？😂
@@yoshipi 今です！
@@yoshipi いずれtyscriptも混ぜた動画も出してくれると大変助かります！
@@kk-xw5hn Vue.jsとTypeScriptを一緒に使う方法はUdemyの方で解説していますのでよかったら見てみてください！
どうしてそんなに詳しいのでしょうか？？ よしピーさんはどこから学習をされたのですか？
基本的には公式ドキュメントを参考に講座を作成しています！
UA-camに途中まで上げてくださって本当に有難うございます。 というのも、業務でVueを扱うことになり急遽学習が必要になったため公式のチュートリアルをやろうとしたのですが、 かなりざっくりした説明で物足りず、他の教材を探していたところよしぴーさんのUdemy教材に出会いました。 この三連休で学ぼうと思ったのですが、Udemyのセールが終わった後でしたので、非常に悩ましいなと悩んでいいました。 どうせすぐまだセールがあるだろうけど、この休みを無駄にしたくないし…と思っていたところでこちらの動画を見つけました。 おかげ様で教材の内容を実際に試すことができて助かった上、土日でこちらの動画を元に学習を進められましたし、なんとタイミングよくUdemyのセールが始まったので、待ってましたと言わんばかりに即購入させていただきました。 これからは引き続きUdemyで学習させていただこうと思います。 おかげさまで本当に助かりました。技術のキャッチアップ頑張ろうと思います。
イ↑ンターフェー↓ス→
とても助かります🙇
非常にわかりやすいです！！ありがとうございます😭
面白い かつ 分かりやすい
今まで見た学習教材の中でダントツで1番わかりやすかったです！ vue使ってる現場に入ったばっかりでわからないことだらけでしたが、内容が実際の業務で使われてるようなところを網羅的に教えてくださってるのでめちゃめちゃ助かりました！ TypeScriptの新しい版とReact版もぜひお願いしたいです！
大変分かりやすいです！ありがとうございます🙇 React版動画もUPしていただけたら、もっと嬉しいです🙏
早口だけど慣れればちょうど良い、わかりやすい 助かりました。
まとまった量の講座を無料公開してくださりありがとうございます。 React の勉強にはJSの理解が不可欠とのことで、学ばせていただいています。 丁寧な解説が助かります。
話おもしろすぎてもっと見たくなった
本編はこちらから ua-cam.com/video/HeLnMQ-R86M/v-deo.html
本編はこちらから ua-cam.com/video/HeLnMQ-R86M/v-deo.html
本編はこちらから ua-cam.com/video/HeLnMQ-R86M/v-deo.html
本編はこちらから ua-cam.com/video/HeLnMQ-R86M/v-deo.html
本編はこちらから ua-cam.com/video/HeLnMQ-R86M/v-deo.html
こういうグラフに対するアルゴリズムは文章で理解するよりも圧倒的に時間軸の変化がある解説の方が理解しやすいので助かります
すみません質問なんですか？これって例えば3(G)の下に∞が着いた場合3(G)と書くんですか？それとも∞って書くのですか？
Classobjectやるとめっちゃ簡単にハンバーガーメニューっぽいもの作れました！めっちゃすげぇ
React完全パックも見たいです
ありがとうございます！
こちらこそありがとうざいます！嬉しいです😊
おおざっぱにしか、理解できませんでしたが、キモは常に一次独立となるような変数を表において求めていき、その変数を１の値に単位化し、目的関数Ｚの変数の値が正値になるまで繰り返し計算していくことで、最終的にスラックス変数をゼロとした時の非基底変数の値を求めるということでしょうか？
とても分かりやすかったです。
素晴らしいです、ありがとうございます！ ちなみになんですが、認証のモデルって複数作成可能なんでしょうか？ 例えばECサイトで売り手側と買い手側のモデルを作成して、それぞれサインアップ、サインイン、認証機能を実装できるのでしょうか？
おそらくできると思いますよ！
@@yoshipi ありがとうございます！ 恐らくなんですが、今回のAuthモデルのそのままコピーでAuth2モデルを作れば実現できると思ってますが、認識合ってますかね？
分かりやすいとまでは言えないけど日本語での情報が少ないので助かりました．
Very Good
ほんとによしぴーさんの動画わかりやすくてVue2のコースの時からお世話になってます。 もし可能でしたら実践編とかも出してもらえると嬉しいです！！！
早口なので通常速度で聞くのがオススメです笑 説明も非常に分かりやすくて助かりました！ 熱量が伝わる話し方で好きでした
いままさに欲しい以上だったから 助かった。 ありがとう
7:19のTypeScriptを入れようとしたらpermission deniedというエラーが出たので、最初にsudoをつけるとうまく行きました。Macの方で同じエラーでお困りの方がいらっしゃったらお試しください！
11:36のtsc __.tsを自分のvisual codeで実行してみたところ以下のエラーが出たのですが、どうすれば解決できるかご存知の方いらっしゃいますか？ error TS6504: File 'begin.js' is a JavaScript file. Did you mean to enable the 'allowJs' option? The file is in the program because: Root file specified for compilation
他の方がnpmをつけるといいとおっしゃっていたので試したところ、Unknown command: "tsc"というエラー文が出てうまく行きませんでした泣
@@tomotraveling1146 npm install -g typescript
@@tomotraveling1146 拡張子を.jsではなく.tsにする必要があります！
頭の回転が追いつかないので、スロー再生で聞いたらわかりやすかったです！ありがとうございます！
ドキュメントだけではHelloWorldに抵抗感あったので助かりました！おかげでチャレンジできそうです！
失礼ですが、字の汚さが自分に似ていてとてもわかりやすかったです。
1:02:08
10:46 問題解く時心の中でこーゆーのあるよねって喜びが出てるのわかりみ
日本語の情報が少ないので助かりましたm(__)m 導入の部分で、全体像を簡単にお話ししてくださったお陰で、理解が早まりました。
有難うございました。 考え方を端的に学べて大変助かりました。
とても分かりやすく、勉強になりました、ありがとうございます。「例えばなんですけども」の口癖？が気になってしまいましたが、笑
癖になる
分かりやすい😼