JavaScriptの動画リスト
この再生リストでは、JavaScriptを学び、ウェブアプリケーションの動的な機能を実現するためのスキルを身につけることができます。JavaScriptの基本概念から始め、変数・関数・オブジェクトなどの基本機能を簡潔に解説します。
実践的なプロジェクトを通じて、DOM操作やイベントハンドリング、非同期処理といったJavaScriptの応用技術も学びます。これにより、実践的なJavaScriptプロジェクトに取り組み、プロフェッショナルなウェブアプリケーションを追求できるようになります。
再生リストを活用して、JavaScriptを使いこなし、動的で効率的なウェブアプリケーションを実現しましょう。スキルが向上し、見事なウェブアプリケーションを作成できるようになることで、ウェブ開発の世界で活躍できることでしょう。
-
25:52
JavaScript(ジャバスクリプト)を最速で学ぶには?初心者向けロードマップを解説!
動画内で紹介していたメモはこちらhttps://hackmd.io/8YQZtmnmQWm81CJ74LyzWQこの動画では、JavaScriptの学習に関する初心者向けのロードマップについて解説し…
-
10:51
【JavaScript 初めの一歩!超初心者向け】ファイルの読み込みと、よく使うconsole.logやalertについて
JavaScriptの初歩的な部分、特にファイルの読み込みやよく使われる機能について紹介していきます。JavaScriptのコードはHTMLが読み込まれた後に読み込むことで、エラーを防ぐことができま…
-
16:44
初心者向け!フォルダやファイルの階層構造と指定の方法まとめ!
この動画では初心者向けにフォルダやファイルの階層構造と指定方法を説明しています。ファイルのパスが正しくないと、画像などが表示されないため、パスの基本的な考え方を説明します。具体的にはHTMLでの画像…
-
16:41
JavaScriptで変数宣言を活用していきましょう!letやconst、実例なども紹介!
JS(JavaScript)で変数を宣言する方法や、そもそも変数を活用するにはどのようにすれば良いのかを解説していきます。この動画では、今ではあまり使われなくなってきているvarについては解説してい…
-
13:08
JavaScriptで「クリック(click)したら、◯◯する」を書いてみましょう!とても良く使うaddEventListener(イベントリスナー)を解説!
JavaScriptを利用して特定のイベント(この場合は「クリック」)が発生した際の動作を定義する方法を解説しています。主に「addEventListener」(イベントリスナー、イベントを監視する…
-
11:36
JavaScriptで配列を扱ってみましょう!配列の追加方法や実例とともに紹介!
プログラミングで必須となる配列(array)を学びましょう!なぜ、配列が必要なのかなどの考え方から実際に配列からデータを取り出してみる方法を学びます。また、天気を定義して取り出すことによる実践的な形…
-
07:09
初心者向け!JavaScriptの配列を追加・削除してみましょう!
JavaScript(ジェバスクリプト)で、配列を扱うと追加や削除をしなければならない場面があります。この動画では、・push・unshift・pop・shiftメソッドそれぞれの紹介と実例を紹介し…
-
20:38
for文(繰り返し処理)を使ってみましょう!JavaScriptで同じような処理を効率化する方法を紹介
JavaScript(ジャバスクリプト)の基本的な機能の一つ、for文について学びます。このfor文(for loop)は、指定された条件下で同じ処理を繰り返し実行するための仕組みです。配列との組み…
-
12:39
JavaScriptでHTMLのクラスの切り替えをやってみましょう!classListについて解説しています。
JS(JavaScript)コーディングでよく使う、クラスの切り替えについて説明しています。classListのadd, remove, toggleを使い分けて、様々な処理ができるようになりましょ…
-
14:54
初心者向け!JavaScript(ジャバスクリプト)で要素を取得する基本的な方法を紹介!
JSでクラスを追加・削除したり、スタイルを変更したりする際には、要素を取得する必要があります。今回は、よく使う基本的なものを解説しています。この動画では、特に・getElementById・quer…
-
09:29
JavaScriptで子要素・兄弟要素・親要素を取得する方法!
この動画では特定の要素の子要素・兄弟要素・親要素を取得する方法を解説しています。・子要素 children・最初の子要素 firstElementChild・最後の子要素 lastElementCh…
-
11:19
JavaScriptでランダムな数字を出す方法と、配列と組み合わせて簡単なアプリ(おみくじ)を作る方法!
JS(JavaScript)で乱数(ランダムな数値)を出す方法と、それを活用した実例を紹介しています。配列と組み合わせて、簡単なおみくじアプリまで作るところまでを解説しています。JSの配列についての…
-
12:27
JavaScriptで条件分岐「if, else if, else」を使ってみましょう!実践的な例までを紹介
JS(JavaScript)で条件分岐をおこなってみましょう!ifなどの使い方や、比較演算子(===, >, <, >=, <=)などの違いも紹介しています。
-
19:49
JavaScriptの比較演算子の意味解説!if文などでよく見る<、>、<=、===などについてと&&と||について
JavaScriptコーディングで必須の比較演算子、等価演算子、関係演算子などについて解説しています!>、<、>=、<=、==、!=、===、!==、&&、||など見たことはあるけどよくわからないも…
-
15:15
JavaScriptにおけるSwitch(スイッチ)文の書き方解説!case, default, breakの意味。
JSでのswitch文の書き方を解説しています。case(ケース)、default(デフォルト)、break(ブレイク)のそれぞれの意味と実際のコーディング例も紹介しています。if, else if…
-
15:58
JavaScriptで使う代入演算子について解説!++ や += がどんな意味なのか?どうやって使うのか?
JavaScriptでコーディングをしているとよく見かける、++, --, +=, -=について解説しています。初心者があまり気にしないで使っていることが多い、この辺の演算子をきちんと理解することに…
-
10:42
JavaScriptで切り捨て・切り上げ・四捨五入・絶対値・べき乗をする方法
JavaScriptで様々な数値の処理を学んでいきましょう!・切り捨て Math.floor / Math.trunc・切り上げ Math.ceil・四捨五入 Math.round・絶対値 Math…
-
08:55
JavaScriptで繰り返し文!while(ホワイル)文について解説!for文との違いと活用方法
プログラミング言語でよく使われる、while文について説明しています。for文と比較すると、シンプルですが書き方や活用の方法はどのように違うのでしょうか?基本的な書き方から実例までを簡単に説明します…
-
16:23
JavaScriptでCSSを直接、変更・削除・取得する方法!様々な方法で、JSでデザインを変更しましょう!
他の動画では、JavaScriptでクラスを切り替えることによって要素を表示・非表示したり、デザインを変更することを紹介してきましたが、今回の動画ではstyleメソッドやcssTextメソッドを使っ…
-
17:04
JavaScriptで関数(function)を使う方法と活用方法を紹介!実際の例を見ながら関数について理解しましょう!
JS(JavaScript)で関数(function)を使う方法と、関数を使って税込み価格を簡単に計算できるアプリケーションを作ってみましょう。returnとは何か?そして引数(ひきすう)とは何か?…
-
11:24
プログラミングにおける変数や関数、クラス名などの命名規則について
この動画では、変数名、関数名、CSSのクラス名、オブジェクト指向のクラス名など、プログラミングでよく使われる命名規則について解説しています。・スネークケース。これは単語間をアンダースコア(_)で繋ぐ…
-
14:44
JavaScriptの変数のスコープ(範囲)について解説!グローバルスコープとローカルスコープってなに?
プログラミング言語において、変数の影響範囲について知ることは、とても重要です。この動画では・グローバルスコープとローカルスコープについて・ローカルスコープの種類。関数スコープ(引数も含む)とブロック…
-
20:35
JavaScriptでオブジェクト(連想配列)を扱ってみましょう!初心者向けに実際のコーディング例までを紹介
プログラミングにおいてよく使われる連想配列について説明しています。キー(key)と値(value)とは何か?どう使うのか?また、値に定義できる「文字列・数値・真偽値・配列」などの使い方と実際の呼び出…
-
15:36
型(type)とは?JavaScriptにおける型の紹介と扱い方、型変換の方法について紹介!
本やWeb上のドキュメントなどを読んでいると、「型」という言葉が出てくると思います。この型について初心者の方から多く質問をいただくので、今回基礎的な部分を紹介するための動画を作りました。他のプログラ…
-
22:31
よくあるJavaScriptのエラーと解決法・対処法について!初心者やJSの学び始めの人へ!
よくJSを学び始めた人から質問を受けることについて、まとめてみました。変数・関数名のエラー、スコープ、型などについてと、その対策や普段から気をつけることなどについて説明しています。動画内で紹介してい…
-
32:51
JavaScriptで日付を取得・表示などをするための方法とある日付までのカウントダウンをする方法
JavaScript(ジャバスクリプト)のDateオブジェクトを使って、今日の日時や曜日などを取得・表示してみましょう!基本が分かったら、明日の今の日時を表示したり、ある日付までのカウントダウン日を…
-
13:59
JavaScriptで属性(attribute)を設定(setAttribute)・取得(getAttribute)・確認(hasAttribute)する方法と活用例!
今回はHTMLタグに設定する属性を、新たに追加したり取得したり存在を確認するための方法を紹介しています。活用例としては、外部サイトへのリンクに別タブで開くtarget="_blank&qu…
-
12:44
JSでscrollしたら◯◯する!スクロールに紐づかせて処理をしましょう!
JavaScriptでスクロールしたら何か処理をするのを実装してみましょう!これを学ぶことによって、よくあるスクロールしたら何か要素を出すことや、スクロールしたらアニメーションさせるなどのことが出来…
-
11:39
setTimeoutを解説!JavaScriptで◯◯秒後に処理をする、タイマーの実装をしてみましょう!
◯◯秒後に何かを処理をしたい!という時に使うのが、setTimeoutです。今回は基本的な書き方と、実際のコーディング例を交えながら紹介していきます。
-
12:42
JavaScriptで定期的に処理をする!setIntervalとclearIntervalの使い方とそのコーディング事例
JavaScriptでタイマーやカウントダウンなど定期的に処理をする方法を紹介しています。動画では実際にカウントダウンタイマーを作っているところを説明しながらsetIntervalとclearInt…
-
10:58
if, else文を1行で書ける!三項演算子について解説!JavaScriptをもっと効率的に書く方法。
この動画では、if文を短縮して書くことができる、三項演算子(条件演算子)について説明しています!他のプログラミング言語でも採用されているこの書き方を学んで、簡単なif文を今後はもっと効率よく書いてい…
-
08:51
文字列と配列を変換するsplitとjoinメソッドを紹介!
文字列を特定の文字で区切って配列にする、「split」(スプリット)と配列を特定の文字列で連結して文字列にする、「join」(ジョイン)について紹介しています!これを知らないと、自力で面倒な処理をし…
-
19:37
アロー(arrow)関数について解説!ES6(ES2015)で追加された新しい書き方を学びましょう!
今回はJavaScriptのアロー関数について説明しています。よく質問をいただくfunction()との書き方の違いや、thisの挙動の違い、また使い所やメリットなどについてお話していきます。動画内…
-
17:24
配列を効率よく処理する!JavaScriptのforEach(フォーイーチ)解説!
for文をもっと書きやすくするJavaScriptのforEach文の紹介動画です。3つの引数(ひきすう)を取ることができるforEach文ですが、それぞれの意味や特徴、使い方などについて解説してい…
-
12:52
テンプレートリテラル(テンプレート文字列)とは?ES2015(ES6)で追加された、文字列を扱う便利な構文を学びましょう!
今回はES2015で追加された、テンプレートリテラルについて説明しています。今までは文字列の中に変数を組み合わせる時に+(プラス)記号をたくさん使っていましたが、この書き方を学ぶと、文字列連結する際…
-
08:55
JavaScriptのfor of 文について解説!そもそもfor ofって何?という説明から実例まで!
※動画内で、forEachとの比較をしていませんが、forofのメリットとしてはbreakやcontinueが使える点です。普段配列などを順番に処理する際は、for文を使うと思いますが、この動画では…
-
14:12
JavaScriptで配列内のデータを順番に足していく reduce, reduceRightメソッドについて解説!
配列内の数値や文字列を足していく(連結していく)ために便利なreduce(リデュース)とreduceRight(リデュースライト)の紹介です!数値であれば、総数を計算させることができますが、文字列だ…
-
18:57
filter関数について徹底解説!JSで効率よく配列データをフィルタリングして、目的の配列に作り替えましょう!
今回は、JavaScriptで配列をフィルタリングできるfilter関数について説明しています!ある配列から特定の条件で別の配列を作ることができるとても便利なものなので、是非この動画で学んでいきまし…
-
16:33
JSのsome(サム)とevery(エブリー)メソッドについて解説!配列をもっと効率的に扱ってみましょう!
今回の動画では、配列を効率的に扱うことができる、someとeveryメソッドについて解説しています。配列内のデータがある条件に1つでも一致しているかを判定するsomeと、配列内のデータがある条件に全…
-
20:46
JSで配列をシャッフル(shuffle)する(ランダムに並べ替える)方法!フィッシャー・イェーツのアルゴリズム(Fisher–Yates shuffle)
JavaScriptで配列内の要素をランダムに並べ替える際、ライブラリを使うことでも実現できますが、意外と数行のコードで実現できてしまいます。今回はフィッシャーイェーツのアルゴリズムと呼ばれるものを…
-
15:29
find, findIndexの使い方解説!JavaScriptで配列から条件に合うデータやindex(位置)を簡単に取得
【追記】以下の2つも使えるようになりました!- findLast() 条件に合う最後のものを取得- findLastIndex() 条件に合う最後のindexを取得今回は、配列から条件に応じて目…
-
07:41
JSのオブジェクト(連想配列)のキー(key)とバリュー(value)をそれぞれ配列で取得する、Object.keys, Object.values, Object.entries について解説!
JavaScriptでオブジェクトを扱っていると、keyやvalueのみのデータを取得したい場合があります。そういった時に使えるのが、・Object.keys()・Object.values()・O…
-
09:08
JSONについて解説!特徴や注意点・JavaScriptでの読み込みまで!
動画内で説明していたfetchの動画はこちらhttps://factory-programming-mv.com/video/pzIxzegWVu8/この動画では、JSON(ジェイソン、JavaSc…
-
09:31
オブジェクト(連想配列)を繰り返し処理することができる、for...in 文を紹介!
オブジェクト(連想配列)を反復処理させるには、Object.keysとforEach文などを使う方法もありますが、今回はもう少し短く書くことのできる for in文について説明しています。様々な繰り…
-
10:16
for文の中で処理を飛ばしたり、処理を止める、continueとbreakについて解説!
for分や、for..of、for..in 文で使える・continue・breakについて説明しています。これらの処理を覚えると、より様々な処理を行えるようになりますので、是非覚えて活用していきま…
-
23:42
JavaScriptで配列の中身をソート(並び替え)させる sort メソッドを学びましょう!
今回は配列の内容をsortさせるメソッドについて紹介しています。降順・昇順に並べ替える方法の他、任意の順に配列内を並び替える方法までを実践的に紹介しています。配列についての動画はこちらhttps:/…
-
17:00
JavaScriptで文字列を切り取ることができる、slice, substring, substr メソッドの解説!
文字列を切り取って、処理を返すメソッドは大きく・slice(スライス)・substring・substrがありますが、これらの処理の違いや挙動の違いなどをこの動画で説明していきます!
-
13:31
JavaScriptで、ある配列を元に編集された別の配列を生成する mapメソッドについて解説!
今回は、違う配列データに手を加え他の配列を作ることがmap(マップ)メソッドについて解説しています。実践的なデータを元に、mapを使用するとどういった結果を得ることができるのか?を一緒に見ていきまし…
-
17:57
JavaScriptで配列内のデータを削除・挿入・差し替えることができる splice メソッドについて解説!
JSで配列のデータを追加・削除できるメソッドは他にもありますが、spliceを使用することで、さらに効率的にこういったことができるようになります。この動画では、実践的なデータを編集しながら、処理の流…
-
21:04
JSではなくて、HTML側にデータを定義できる!カスタムデータ属性(data-◯◯)の活用方法と実践的な活用法について
サイトを制作していると、JavaScriptではなくHTML側にデータを定義した方が管理が楽な場合があります。そういった時に使えるのが、このカスタム属性です!この動画では実際の設定方法や活用方法など…
-
10:49
JavaScriptで特定のaタグのみtarget="_blank"をつける方法!(特定の属性値を持つタグに属性を付与する方法)
サイト制作をしていると、特定の条件下においてタグに特定の処理をしたいことがあります。この動画では、aタグのhref属性がhttpから始まる場合にのみ、別のタブで開くtarget属性を指定する方法を紹…
-
07:54
簡単にタグを挿入できる insertAdjacentHTML メソッドの紹介!
createElementメソッドでタグを生成し、appendChildなどでタグを挿入する方法がありますが、insertAdjacentHTML(インサートアジェーソン)はもっと簡単にタグを挿入す…
-
11:02
タグ・要素の挿入をすることができる、3つのメソッドappendChild, before, afterを紹介
JSにおいてタグを挿入する際によく使う、・appendChild・before・afterメソッドについて、それぞれ実践的に解説していきます。
-
19:28
ローディング画面を実装する方法!ページの読み込み中にローディングアニメーションを表示させてみましょう!
読み込みが遅いページに対してローディングアニメーション(loading animation)などを実装しないといけない場面があると思いますが、今回はユーザーに待たせているのを感じさせにくいローディン…
-
18:17
最新版!初心者向け!JavaScriptの有名なスライダーライブラリ「Swiper(スワイパー)」を使って、簡単にスライダーアニメーションを実装してみましょう!
ウェブサイトの制作においてスライダーアニメーション(slider animation)は必要不可欠なものになってきました。ただ、自力で1から実装するのは困難を極めるので、今回紹介するようなJSのスラ…
-
06:44
Swiperでスライドさせる画像サイズカスタマイズ!上手い具合にスライダー上に画像を表示させるには?
※機材や設定の関係で若干音量が小さくなっております。イヤホンをしていただいた上で音量の調整をお願い致します。前回の動画(下記URL参照)に引き続き、今回はSwiperで画像を表示させた際のサイズの調…
-
08:38
少しずつ画像が変化する、スライダーの作り方解説!JavaScriptの有名プラグイン「スワイパー(Swiper)」と簡単なオプション変更で、よくあるアニメーションを実装してみましょう!
今回は、少しずつ画像や要素が変わっていく、Swiper(スワイパー)のfadeオプションについて解説しています。スライダープラグインで少しずつ変化するアニメーションが組めることを知らない方も多いよう…
-
14:33
スライダーの上に文字を固定で表示させる方法!Swiperで各スライダーの上と、スライダー全体の上に固定でコンテンツを置いておく方法を紹介します!
今回の動画では、Swiper(スワイパー)でスライダー上に固定のコンテンツを常に表示させておく方法を紹介しています。各スライダーと、スライダー全体の上に固定で表示することで、ユーザーへの訴求コンテン…
-
17:37
奥行きのある、オシャレなスライダー実装!Swiper(スワイパー)で左右のスライドを回転させるオプションと考え方を紹介します!
今回はSwiperで奥行きのあるスライダーの実装方法を紹介しています。メイン表示しているスライダーの左右のスライダーを少し回転させることで立体感を出すことができ、まるでアルバムアートワークの選択UI…
-
09:26
立体的な箱が回っているように見えるスライダーの実装方法紹介!Swiper(スワイパー)で奥行きのある印象的なアニメーションを実装してみましょう!
今回はかなり印象的になる、奥行きのあるスライダーの実装方法を紹介しています。この動画で紹介しているような3D表現はCSSやJavaScriptの実装だとなかなか手間ですが、Swiperのオプションな…
-
11:29
ゆっくりと流れ続ける、スライダーを実装する方法!Swiperを使って、永遠に横に流れ続けるスライダー
この動画では、よくある画像がゆっくりと永遠に流れ続けるスライダーを実装する方法を紹介しています。Swiperは通常一定速度でスライドする機能はありませんが、transitionのCSSなどを上書きす…
-
15:28
ハンバーガーメニュー・ドロワーメニューの作り方1(全5回)
第2回目https://factory-programming-mv.com/video/qxr9bmn8SUI/第3回目https://factory-programming-mv.com/vid…
-
11:53
ハンバーガーメニュー・ドロワーメニューの作り方2(全5回)
レスポンシブ対応(スマホやタブレットなどへの対応)が必須となった現在では、ハンバーガーメニュー・ドロワーメニュー(いわゆるスマホ用のメニュー)の実装が不可欠になっていると思います。全5回に渡りHTM…
-
12:43
ハンバーガーメニュー・ドロワーメニューの作り方3(全5回)
※アニメーションのカクつきに関して。コメントでいただいていますが、動画内のコードで実装した場合、三本線からバツになる際にカクつく現象が起こる場合があります。その場合は、「transform-orig…
-
14:39
ハンバーガーメニュー・ドロワーメニューの作り方4!アイコンの色々なアニメーションパターンと実装方法を紹介!(全5回)
リクエストにより、ハンバーガーメニュー・ドロワーメニュー動画の続編を配信しました。今回はハンバーガーメニュー・ドロワーメニューのアイコン自体のアニメーションのパターンや考え方・実装方法について解説し…
-
29:04
ハンバーガーメニュー・ドロワーメニューの作り方5!メニューコンテンツ自体のアニメーションについてパターンを紹介!(全5回)
ハンバーガーメニュー・ドロワーメニューの作り方動画シリーズの最終回です。(またご要望により続編を作る可能性もあります)今回は、前回のアイコン自体のアニメーションパターンの紹介に引き続き、メニューコン…
-
17:43
モーダルウィンドウ・ダイアログウィンドウの作り方1(HTML、CSS、JavaScriptで作る)
HTML、CSS、JavaScriptだけで、プラグインなどを使わずに簡単にモーダルウインドウ(modal window)やダイアログボックス(dialog box)やポップアップウィンドウ(pop…
-
18:24
モーダルウィンドウ・ダイアログウィンドウの作り方2(HTML、CSS、JavaScriptで作る)
HTML、CSS、JavaScriptだけで、プラグインなどを使わずに簡単にモーダルウインドウ(modal window)やダイアログボックス(dialog box)やポップアップウィンドウ(pop…
-
19:18
ドロップダウンメニュー・アコーディオンメニューの作り方!HTML / CSS / JavaScriptでシンプルに作る方法
この動画では、HTML、CSS、JavaScriptを用いて、ドロップダウンメニューの作成方法について解説しています。親メニューと子供のメニュー(サブメニュー)を含むドロップダウンメニューのHTML…
-
18:02
モーダルウィンドウを実装する最新のタグ、「dialog(ダイアログ)タグ」を活用した実装!全2回 前編
後半の動画はこちらhttps://factory-programming-mv.com/video/viThCBnja9U/この動画チュートリアルでは、新しいダイアログタグの使い方に焦点を当て、初心…
-
23:17
モーダルウィンドウを実装する最新のタグ、「dialog(ダイアログ)タグ」を活用した実装!全2回 後編
前編の動画はこちらhttps://factory-programming-mv.com/video//前回の動画に続き、モーダル画面を作成しています。モバイルウィンドウの開閉とアニメーションに焦点を…
ダウンロード有 -
23:59
タブの切り替え!JavaScriptを使って、タブ(tab)が複数あっても対応可能なコードを書きましょう。HTML/CSSの書き方から紹介!
HTML, CSS, JSを使ってタブ切り替えを行う方法を紹介しています。for文を上手く活用することによって、タブやコンテンツが増えても対応できるようにします。また、CSSの指定による見た目の変更…
-
52:24
文字を1文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介!かっこいいCSSアニメーションを実装できるようになりましょう!
transformについての動画はこちらhttps://factory-programming-mv.com/video/今回は、文字を1文字ずつアニメーションで動かす方法を紹介します。最近はアニメ…
-
52:47
スクロールしたら要素をフワっとアニメーションして、表示させる方法を紹介!
動画内で紹介していた私のプロフィールサイトURLはこちらです。https://kazuma-takeda.com/Webページがスクロールされた際に、特定の要素がフワっと表示されるアニメーションの実…
ダウンロード有 -
16:04
ヘッダーが固定されているページで、スクロールしたらヘッダーを表示・非表示する方法!
ファーストビューを効果的に表示したい際に、ヘッダーの表示・非表示をする方法を学んでいきましょう!JavaScriptとCSSを使えば簡単に実装することができます。動画内で紹介していた、ファイルのサン…
-
45:16
スクロールアニメーション!CSSとJSでカーテンが開くように要素を表示!
モダンなサイトで見かける、カーテンが開いていくような要素の表示アニメーションについて解説しています。CSSとJavaScriptをうまく組み合わせることによって実現できますが、少々難しい部分もあるの…
-
45:47
パララックス(視差効果)について解説!Rellax.jsでスクロールエフェクト(効果)をかけて、奥行きのある演出をしてみましょう!
今回は、最近のサイトでよく見かけるパララックス(parallax)・視差効果の実装方法について解説しています。自前で実装するのは難しいため、Rellax.js(リラックス)というjQuery(ジェイ…
-
15:36
どのブラウザでどのCSS・JavaScriptg使えるのか調べる方法!Can I Useの紹介と見方を解説
どのブラウザでどのCSS・JavaScriptが使えるのか知りたいことはありませんか?そういった時、Can I Useというサイトがあります。ただし、英語なのでなかなか抵抗がある人も多いと思いますの…
-
10:42
古いブラウザやIEに、新しいJavaScriptやCSSを対応させる方法!polyfill(ポリフィル)やBabel(バベル)とは?
JavaScriptはECMAScript2015やES6と呼ばれる新しいものがどんどん追加されています。CSSも同様にIEなどでは使えないものの、便利なプロパティが追加されています。こういったもの…
-
05:05
onclickとaddEventListener clickの違いについて解説!この2つは微妙に意味が違います。
on◯◯とaddEventListenerで定義されたイベントの違いについて説明しています。意外と知らずにいる方も多いので、この機会に知っておきましょう!
-
20:42
なぜ意図せずデータが同期する!?JavaScriptにおける値渡しと参照渡しについて解説!
JSで配列やオブジェクトを扱っていると、意図せず別の変数に格納したデータが同じものになってしまうことがあります。この動画では、なぜこういったことが起こるのか?そしてどうやって解決すれば良いのか?を解…
-
47:37
JavaScriptでプラグインを使わずに(画像を切り替える)スライダーを作ってみましょう!
簡単に画像を切り替えるくらいのスライダーは、プラグインの使い方を学習するよりも自作したほうが早く作れることがあります。この動画ではHTML, CSS, JavaScriptを使って1からギャラリーの…
-
27:42
コンテンツに応じた目次とページ内リンクを自動生成する方法と、CSS変数を使った効率的な開発!
今回は、コンテンツの見出しをJSで読み取り、自動で目次を生成する方法を紹介します。また、ページ内スムーススクロールの実装とCSSのカスタムプロパティを活用した、修正などに強いコードを書いていきます。…
-
09:24
JSでお知らせなどの日付が、◯日以内のものに自動でNEWをつける方法! 前編
この動画では、time属性のdatetimeから日付のテキストを取得し、それをJS側で処理することによって、指定した日付以内の日付かどうかを判断する処理を実装していきます。実際に指定した日数以内であ…
-
12:16
JSでお知らせなどの日付が、◯日以内のものに自動でNEWをつける方法! 後編
この動画では、time属性のdatetimeから日付のテキストを取得し、それをJS側で処理することによって、指定した日付以内の日付かどうかを判断する処理を実装していきます。実際に指定した日数以内であ…
-
57:24
ページ内スムーススクロールと、モーダルメニューをクリックした後の自動メニュー閉じについて!
今回はJavaScriptのwindow.scrollToメソッドを使って、シンプルなページ内スムーススクロールを実装する方法を紹介しています。単にヘッダーのメニューにページ内リンクを設定する方法と…
-
07:09
下にスクロールでヘッダーを隠し、上にスクロールでヘッダー表示させる機能を実装してみましょう!全2回(第1回目)
この動画では、JavaScriptとCSSを使ってページの途中でスクロールを上下にした際に、ヘッダーの表示を切り替えるアニメーションを実装していきます。第2回目の動画はこちらhttps://fact…
-
06:29
下にスクロールでヘッダーを隠し、上にスクロールでヘッダー表示させる機能を実装してみましょう!全2回(第2回目)
この動画では、JavaScriptとCSSを使ってページの途中でスクロールを上下にした際に、ヘッダーの表示を切り替えるアニメーションを実装していきます。
-
27:51
fetch(フェッチ) API を使って、外部サイトやローカルファイルを読み込んで、HTMLに出力してみましょう!
今回は、fetchの基本的な流れや仕組みを解説した上で、外部サイトや、ローカルファイル(テキストファイルやjsonファイル)を読み込んで、HTMLなどに出力する流れまでを見ていきます。今回呼び出す外…
-
18:29
よくある、郵便番号から住所自動入力を実装する方法を紹介 1/2
コンタクトフォームや会員登録の画面などでよく見かける、住所の自動登録の実装をしていきます!第1回目のこの動画では、簡単な見た目とJSを書いていきます。2つ目の動画は会員専用です。登録は以下から出来ま…
-
07:22
郵便番号から住所自動入力を実装する方法を紹介 2/2
前回に引き続き、郵便番号から住所を自動入力する実装をしていきます。JSでフォーム周りの実装はなかなかとっつきにくいと思いますが、この動画で是非やってみていただければと思います。今後他の外部APIなど…
-
24:30
データベースなしで、データが保存できる!Webストレージ(セッションストレージ・ローカルストレージ)について解説!
今までもCookie(クッキー)という技術で、Webにデータを保存することはできましたが、新しく出てきたWebストレージを使えば、さらに大きなデータを長期間保存可能となりました。この動画では・Ses…
-
04:50
JavaScriptの再帰関数についてと、その注意事項を解説!
JavaScriptの勉強をしていると、「再帰関数」という言葉が出てくると思います。今回はこの用語と実際の記述例を書いていきます。この関数は使い所によってはとても便利ですが、スタックオーバーフローを…
-
14:58
マウスの座標をJavaScriptで取得する方法と、マウスを変更・編集する方法 1/2
JavaScriptでマウス座標を取得する方法はいくつかありますが、今回はその中でも・offset (X/Y)・client (X/Y)・page (X/Y)とそれぞれの特徴について、説明していきた…
-
12:25
マウスの座標をJavaScriptで取得する方法と、マウスを変更・編集する方法 2/2
JavaScriptでマウス座標を取得する方法はいくつかありますが、今回はその中でも・offset (X/Y)・client (X/Y)・page (X/Y)とそれぞれの特徴について、説明していきた…
-
26:13
【JavaScriptで戦闘ゲーム制作 #1】 まずは簡単なUIを整えて、ゲーム作りの土台作りから作っていきましょう!
HTMl, CSS, JavaScriptでゲーム作りをしてみましょう!本格的なゲームはUnityなどで作っていくことが多いですが、今回はJSの理解を深める為にあえてJSで制作していきます!初回はゲ…
-
12:00
【JavaScriptで戦闘ゲーム制作 #2】勝敗の判定を実装して、ゲームに終わりを設定しましょう!
第2回目はHPのダメージ計算とゲームの勝敗判定を実装しましょう!このシリーズの動画再生リストは以下です。活用してください!https://factory-programming-mv.com/pla…
-
23:07
【JavaScriptで戦闘ゲーム制作 #3】 攻撃力と防御力を加味した計算と、指定した範囲数値で乱数を出してゲーム性を出す!
第3回目の動画では、今まで敵と味方のダメージが一定だったところを見直し、ダメージをある範囲でランダムに出してゲーム性を高めてみることをやってみます。さらに敵と味方に攻撃力と防御力を設定することによっ…
-
22:52
【JavaScriptで戦闘ゲーム制作 #4】 敵と味方のHPゲージを実装する!効果的なアニメーション処理(transition)まで
第4回目の動画では、HPの表示をテキストベースだったところをさらに視覚的なゲージを追加してみます。HPがどんな数値だとしてもJSで計算させ、上手く割合に応じたゲージにしていきましょう。このシリーズの…
-
11:22
【JavaScriptで戦闘ゲーム制作 #5】 配列と連想配列を上手く使って、敵をランダムに表示する方法
第5回目の動画では、単一の敵しか出なかったところを複数の敵を定義して、ランダムに出すようにします。このシリーズの動画再生リストは以下です。活用してください!https://factory-progr…
-
47:36
【JavaScriptで戦闘ゲーム制作 #6】 攻撃のログを分かりやすく加工して出してみよう!
第6回目の動画では、攻撃などの内容をログ画面に動的に生成する処理を書くことによって、処理の内容を分かりやすくし、デバッグなどを楽にします。このシリーズの動画再生リストは以下です。活用してください!h…
-
14:21
【JavaScriptで戦闘ゲーム制作 #7】 クリティカルヒットを実装してみましょう!
第7回目の動画では、クリティカルヒットという概念を作ります。クリティカルヒット率を設定し、敵も見方もランダムにクリティカルヒットが入るようにし、ダメージを操作します。このシリーズの動画再生リストは以…
-
01:01:03
【JavaScriptで戦闘ゲーム制作 #8】討伐数を実装して、より複雑なゲームを作っていきましょう!
第8回目の動画では、敵の討伐数を実装してさらにゲームを複雑化していきます。今どのくらい敵を倒したのか?どのくらい敵を倒せばクリアするのか?を数値として出していきましょう!また、次の敵とエンカウントす…
-
33:34
【JavaScriptでパスワード生成ツールを作る!】パスワードジェネレーターを1から作ってみましょう! まずはファイルの作成や簡単なパスワード生成から #1
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。ライブコーディングをおこないながら、実際にアプリケーションを作っていきます。実践的なツールを作ることでJavaScri…
-
18:26
【JavaScriptでパスワード生成ツールを作る!】英語の小文字と大文字を含めたパスワードを生成できるようにJavaScriptを書き換えてみましょう! #2
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第二弾で、前回までパスワードが数字のみだったものに加えて英字を追加してみます。英字を追加すること自体は簡…
-
33:47
【JavaScriptでパスワード生成ツールを作る!】間違われやすい文字列を除外する欄を生成して、さらにユーザーが追記・編集できるようにしましょう!! #3
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第三弾で、ユーザーがよく見間違えやすいような文字列を除外する為の機能を実装します。配列と文字列を変換する…
-
22:55
【JavaScriptでパスワード生成ツールを作る!】 どんな文字列でパスワードを生成するか、ユーザーに選択してもらう為の機能を追加しましょう! #4
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第四弾で、ユーザーにパスワードの文字列の生成のされ方を選択してもらう機能を実装します。数値のみなのか、数…
-
20:13
【JavaScriptでパスワード生成ツールを作る!】生成するパスワードの文字数をユーザーが選択できるような機能を追加しましょう! #5
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第五弾で、ユーザーが、生成されるパスワードの文字数を選択できる機能を追加していきます。選択肢としてよく使…
-
23:39
【JavaScriptでパスワード生成ツールを作る!】生成するパスワードの個数をユーザーが選択できるような機能を追加しましょう! #6
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第六弾で、ユーザーが、生成されるパスワードの個数を選択できる機能を追加していきます。選択肢としてデフォル…
-
44:42
【JavaScriptでパスワード生成ツールを作る!】生成したパスワードを気軽にコピーできるような機能を付けましょう! #7(最終回)
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第七弾で最終回です。生成したパスワードそれぞれに「コピーする」ボタンを設定し、気軽にユーザーがコピーでき…
-
13:38
JavaScriptのアニメーションライブラリ「GSAP」を紹介!まずは機能とできることを見ていきます GSAP #1
様々なサイトでよく使われている、GSAP(GreenSock Animation Platform。読み方はジーサップ)について紹介します!CSSやSASSだけでは難しいアニメーションの制御ができる…
-
18:33
GSAPでよく使う基本の4つのメソッド(to, from, fromTo, set)について紹介! GSAP #2
JSのアニメーションライブラリ「GSAP」の基本的な4つのメソッドについて紹介しています。特に4つ目のsetについては使い方が分からない方も多いので、是非動画で覚えていきましょう!transform…
-
07:45
GSAPで一番基本的なduration(アニメーション時間)とdelay(アニメーション開始時間の遅れ)について解説! GSAP #3
CSSで言うと、・transition-duration・transition-delay・animation-duration・animation-delayにあたる、duraitonとdelay…
-
29:40
GSAPでよく使うアニメーションの動きと、実際の指定方法を解説!transformやopacityなど GSAP #4
この動画では、ちょっとわかりにくいtransformの・translate(移動)・scale(伸縮)・rotation(回転)・skew(歪み)それぞれのGSAPにおける指定方法と動き方の解説を主…
-
14:06
GSAPで、簡単に複数の要素をズラしてアニメーションさせる方法を学びましょう!全2回(第1回目) GSAP #5
今回はGSAPのstaggerというものを使って、delayを少しずつズラしていく処理を簡単に書く方法を説明していきます。第1回目のこちらの動画では、まず基本的なHTMLとCSSを組んでGSAPのt…
-
08:30
GSAPで、簡単に複数の要素をズラしてアニメーションさせる方法を学びましょう!全2回(第2回目) GSAP #5
こちらは会員専用の動画です!登録は以下から出来ます。https://factory-programming-mv.com/subscription/registerSubscription/今回はG…
-
37:58
GSAPのイージング(easing)について解説!アニメーションのしかたを制御して、様々な動きを表現できるようにしましょう! GSAP #6
※この動画は内容を修正したものを再掲載したものです。この動画ではアニメーションの始まりから終わりまでの変化のしかたを制御できる「イージング」について説明しています。・in, out, inOut・p…
-
11:21
GSAPでアニメーションを繰り返す方法と、その際のオプションについて解説! GSAP #7
CSSのアニメーションプロパティでは繰り返しなどを簡単に指定することができましたが、GSAPではどのように指定するのでしょうか?また、オプションはどのようなものがあるのかを見ていきます。具体的には・…
-
15:30
GSAP keyframes(キーフレーム)の使い方を紹介!複数の状態をアニメーションする方法 GSAP #8
今回はCSSにも存在するkeyframesの使い方を見ていきます。toメソッドやfromメソッドのみだとなかなかアニメーションの順序などを制御しづらいですが、keyframesを知っていると、より複…
-
26:29
GSAPのより高度なメソッドを扱えるようにしましょう!停止・逆再生・再生速度など GSAP #10
GSAPのアニメーションをインタラクティブに制御することが出来るようになる、メソッドについて説明しています。この動画では・play(再生)・pause(一時停止)・restart(最初から再生)・r…
-
16:17
GSAPの label (ラベル)について解説!デバッグなどに便利な seek(シーク)との使い方も GSAP #11
この動画では、GSAPのラベルという概念について説明しています。タイムライン上でラベルという目印のようなものをつけて、アニメーションを再生する際に活用することができます。また、長くなってしまったタイ…
-
25:38
GSAPのアニメーションの開始位置を制御する様々な方法を紹介! GSAP #12
GSAPのdelay以外にもアニメーションの開始位置を指定することができるオプションは色々とあります。この動画では・'数値'・'+=数値'・'-=数…
-
13:52
GSAPのコールバック(callback)関数を理解しましょう! GSAP #13
GSAPにはいくつかのコールバック関数が用意されています。この動画では- onStart- onComplete- onUpdate- onRepeat- onReverseCompleteについて…
-
09:59
GSAPのTimline(タイムライン)を連結したり、ネスト・グルーピングしてみましょう! #14
GSAPではTimelineをつなげたり、1つの大きなTimelineに入れ子にしたりすることができます。この動画はその方法と、実際の動きやメリットについて説明しています。
-
11:51
クリックした所から広がるようにGSAPでアニメーションしてみましょう! 全2回(第1回目) GSAP #15
この動画では、staggerの機能を使ったインタラクティブなアニメーションの実装を紹介しています。staggerの・grid・axis・from・amount・yoyoEaseなどを使って、より高度…
-
09:58
クリックした所から広がるようにGSAPでアニメーションしてみましょう! 全2回(第2回目) GSAP #15
この動画は全2回の動画の2回目です。第1回目で実装した基本的な要素の配置と、tweenの設定に、さらにずらしてアニメーションさせる実装をしていきます。こちらの動画は会員専用です。以下から登録すること…
-
11:14
GSAPでよく使うアニメーションを管理できるEffects(エフェクト)解説 GSAP #16
GSAPにはアニメーションを管理することができる、registerEffectメソッドがあります。この動画では基本的な使い方と、Timeline内での使い方や- name- effect- defa…
-
05:12
数値を変化させるアニメーションをGSAPで簡単に実装する方法!
たまにサイトで見かける、グラフなどと共に変化していく数値のアニメーションのやり方を紹介しています。
-
19:22
丸をJSで生成して、テキストと一緒にアニメーションさせてみましょう! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!JavaScriptとCSSを組み合わせて、図形とテキストを組み合わせたアニメーションを実装してみましょう!…
-
15:38
丸をJSで生成して、テキストと一緒にアニメーションさせてみましょう! 全2回(第2回目)
前半の動画に引き続き、GSAPでアニメーションを実装していきます。第1回目の動画はこちらhttps://factory-programming-mv.com/video/CY2boZqUzdU/
ダウンロード有 -
11:15
テキストアニメーション実装!GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!この動画では、一文字ずつ色や位置や角度をランダムに設定したものを段々と整列させ、その後文字列の両端から非表示…
-
14:59
テキストアニメーション実装!GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする! 全2回(第2回目)
この動画では第1回目に引き続き、一文字ずつアニメーションさせる実装をしていきます。特にeaseにこだわって、それぞれのアニメーションをブラッシュアップしていきます。1回目の動画はこちらhttps:/…
ダウンロード有 -
24:12
自動で円形にメニューを並べて、順番にアニメーションさせる方法! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します…
-
35:33
自動で円形にメニューを並べて、順番にアニメーションさせる方法! 全2回(第2回目)
この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します。sin(サイン)やcos(コサイン)を使って、円周上にアイコンを並べて、それをGSAPの…
ダウンロード有 -
14:02
クリックしたら、星が散りばめられる「クリックエフェクト」をGSAPで実装してみましょう!全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!この動画では、クリックした座標をJSで取得し、そこを中心にアイコンを外側に広がるように表示させてみます。動画…
-
22:14
クリックしたら、星が散りばめられる「クリックエフェクト」をGSAPで実装してみましょう!全2回(第2回目)
この動画では、クリックした座標をJSで取得し、そこを中心にアイコンを外側に広がるように表示させてみます。第1回目の動画はこちらhttps://factory-programming-mv.com/v…
ダウンロード有 -
31:14
クリックすると、たくさんの箱が集まってできていくようなグローバルメニューをGSAPで作ってみましょう! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!今回の動画では、画面のサイズに応じてJavaScriptで箱を作り、それをメニューを開く際にランダムに表示さ…
-
25:47
クリックすると、たくさんの箱が集まってできていくようなグローバルメニューをGSAPで作ってみましょう! 全2回(第2回目)
今回の動画では、画面のサイズに応じてJavaScriptで箱を作り、それをメニューを開く際にランダムに表示させることで面白い動きをしたアニメーションを作ってみます。さらに、今回はメニュー内の文字も下…
ダウンロード有 -
16:38
サイトに雪を降らせるアニメーションをGSAPを使って実装してみましょう! 全2回(第2回目)
今回は、GSAP(アニメーションライブラリ)を使って、雪を降らせるアニメーションを作ってみます。画像を使わずに、背景と雪をそれぞれCSSで生成し、GSAPを使ってより自然な動きになるようにしてみまし…
ダウンロード有 -
23:03
サイトに雪を降らせるアニメーションをGSAPを使って実装してみましょう! 全2回(第1回目)
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!今回は、GSAP(アニメーションライブラリ)を使って、雪を降らせるアニメーションを作ってみます。画像を使わず…
-
18:02
GSAPで、丸とテキストを効果的にアニメーションさせて、簡単なモーショングラフィックスを作ってみましょう!前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!今回は全2回の動画で、GSAPを用いたアニメーションの作例を紹介しています。縁取りやストライプの円をランダム…
-
18:21
GSAPで、丸とテキストを効果的にアニメーションさせて、簡単なモーショングラフィックスを作ってみましょう!後編
今回は全2回の動画で、GSAPを用いたアニメーションの作例を紹介しています。縁取りやストライプの円をランダムに配置し、イージングを工夫することで効果的なモーショングラフィックスを展開します。前半の動…
ダウンロード有 -
16:55
無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう!前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!GSAPを使ったアニメーション作品のシリーズです。最初、テキストを1文字ずつアニメーションさせながら表示させ…
-
17:31
無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう!後編
GSAPを使ったアニメーション作品のシリーズです。最初、テキストを1文字ずつアニメーションさせながら表示させた後、円をぼかした状態と透明な状態から、通常の円の状態に戻します。それから、CSSを使って…
ダウンロード有 -
04:44
パララックスや、スクロールと紐づいてアニメーションできるGSAPのScrollTrigger(スクロールトリガー)の機能や実例を紹介!GSAP ScrollTrigger #1
この動画から、ScrollTriggerについての解説をいくつかの動画に分けて配信していきます。初回の動画では、実例や公式サイトのコンテンツなどの紹介をしています。JavaScript(JS)を基礎…
-
16:49
GSAPのScrollTriggerを読み込んで、基本的な使い方を覚えていきましょう! GSAP ScrollTrigger #2
まずははじめの一歩。GSAPとScrollTrigger(スクロールトリガー)を読み込み、基礎的な考え方や記述方法などを学んでいきましょう!動画内で説明していた、GSAPの各URLはこちらhttps…
-
09:48
スクロールとアニメーションの進行度を同期!GSAPのScrollTriggerでscrub, end の使い方を紹介! GSAP ScrollTrigger #3
GSAPのスクロールトリガーでスクロールとアニメーションの同期ができる、scrubなどについて学んでいきましょう!この技術を学ぶことで、パララックスなどの演出もできるようになります。
-
14:18
アニメーションが終わるまで、要素を固定し続ける pin(ピン) について解説! GSAP Scroll Trigger #4
今回は、スクロールトリガーで指定したアニメーションが終わるまで、要素を自動で固定表示にしてくれる、「pin」について説明しています。このオプションを使う時には、要素が自動で追加されるので、そちらの注…
-
12:39
スクロールに紐づいたアニメーション実践編!GSAP ScrollTriggerのscrubとTimelineを使ってみましょう! 全2回(第1回目)GSAP ScrollTrigger #5
この動画では、GSAPのスクロールトリガーの技術である、scrubとTimelineを使った実践的なコーディング方法を学んでいきます。今回は、ファーストビューで通常のGSAPのアニメーションをおこな…
-
06:33
スクロールに紐づいたアニメーション実践編!GSAP ScrollTriggerのscrubとTimelineを使ってみましょう! 全2回(第2回目)GSAP ScrollTrigger #5
2022/10/15追記視聴者の方からのご指摘で、mainコンテンツ部分のCSSが抜けていることに気づきました。すみません。つきましては、コメント欄に該当コードを記載しておきますので、そちらを参照し…
-
23:50
任意のスクロール位置にユーザーを誘導することができる snap(スナップ) について解説! GSAP ScrollTrigger #6
この動画では、GSAPのScrollTriggerのオプションである、snap(スナップ)について解説しています。任意のスクロール位置にユーザーを移動させることができます。snapには様々なオプショ…
-
08:25
スクロール量に応じて要素のクラスを切り替える toggleClass(トグルクラス) 解説! GSAP ScrollTrigger #7
ScrollTriggerでおこなう制御以外で、クラスの付け外しをすることで何か要素の状態を変更したい場合があります。このtoggleClassはそういった時に対応できるオプションです。
-
12:45
GSAP ScrollTriggerの コールバック(callback)関数を解説! GSAP ScrollTrigger #8
この動画では、スクロールトリガーの以下のコールバック関数について紹介しています。・onEnter・onLeave・onEnterBack・onLeaveBack・onRefresh・onToggle…
-
11:10
ScrollTriggerで様々なタイミングでアニメーションさせることができる toggleActions(トグルアクション)解説! GSAP ScrollTrigger #9
ScrollTrigger(スクロールトリガー)の各コールバックであるonEnter, onLeave, onEnterBack, onLeaveBack時にアニメーションを操作することができるto…
-
10:16
Scrolltriggerで、レスポンシブ対応できる matchMedia(マッチメディア)を紹介!GSAP ScrollTrigger #10
アニメーションの処理を書いていると、画面幅によってアニメーションの内容を変えなくてはならないことがあります。通常のJSでも処理することができますが、GSAPのScrollTriggerにはあらかじめ…
-
22:09
GSAP ScrollTrigger(スクロールトリガー)実践編!様々な要素を同時に動かして、より印象的なアニメーションを作る。第1回目(全2回)
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!GSAPやScrollTriggerの動画をこれまで配信していますが、今回は多くの機能を取り入れて、より実践…
-
34:25
GSAP ScrollTrigger(スクロールトリガー)実践編!様々な要素を同時に動かして、より印象的なアニメーションを作る。第2回目(全2回)
GSAPやScrollTriggerの動画をこれまで配信していますが、今回は多くの機能を取り入れて、より実践的な実装をしていきます。第1回目の動画はこちらhttps://factory-progra…
ダウンロード有 -
14:35
requestAnimationFrame 解説!画面のリフレッシュレート(切り替わり速度)に応じた処理をおこないましょう!
この動画では、requestAnimationFrame(リクエストアニメーションフレーム)について説明しています。JSでアニメーションやパフォーマンスチューニングをおこなうときに必須のメソッドです…
-
13:10
【JavaScriptで数を当てるゲーム #1】まずは完成版の確認と、基本的なUIから!
今回のシリーズから、JavaScriptとSassを使って、JSの練習のためのアプリケーション作成をおこなっていきます!1回目は、完成系の確認と、基本的なHTMLなどを組んでいくところから始めていき…
-
25:12
【JavaScriptで数を当てるゲーム #2】スタートボタンを押したら、ランダムな数値を並べてみる。
前回の実装に引き続き、機能を追加していきます。今回はスタートボタンを押したらランダムに数を生成し、それをパネル上に並べていきます。この動画シリーズの再生リストはこちらhttps://factory-…
-
16:46
【JavaScriptで数を当てるゲーム #3】パネル上の数値をクリックしたら、一番大きな数値を当てられたか判定してみましょう!
前回に引き続きゲームの実装を進めていきます。今回は、色々な数値が並んでいるパネルをクリックして、あたりかハズレかを判定してみます。この動画シリーズの再生リストはこちらhttps://factory-…
-
23:35
【JavaScriptで数を当てるゲーム #4】タイマーを設定して、秒数と残り時間のゲージを実装してみる。
前回に引き続き、ゲームの実装を進めていきます。今回は残り時間の秒数と時間のゲージをrequestAnimationFrameというメソッドと、Dateオブジェクトを使ってやってみます。この動画シリー…
-
16:17
【JavaScriptで数を当てるゲーム #5】自動的に問題を次に移行して、最後に正答数と回答数を表示してみましょう!
引き続きゲームの実装を進めていきます。今回は、一番大きいと思われるパネルをクリックした際に、きちんと次の問題が自動表示され、さらには最後までゲームを進めた時に正答数と回答数を表示するようにします。こ…
-
14:41
【JavaScriptで数を当てるゲーム #6】ゲームの難易度を設定して、最後にゲームを完成させましょう!
このシリーズ最後の動画です!easy / normal / hard を選択して、その際にゲームの難易度が設定できるように実装して、ゲームを完成させましょう!最後までお疲れ様でした!この動画シリーズ…
-
12:44
Vue jsとは?その特徴とメリットについて解説!最新Vue.js3対応
この動画から、Vue.jsのバージョン3の動画シリーズを公開していきます。まずは、特徴やメリット、jQueryではなくVue.jsが使われるようになってきた理由や、特徴の1つである「リアクティブ」の…
-
21:30
階層が深い、ドロップダウン「多階層ドロップダウンメニュー」を実装する方法!WordPress(ワードプレス)のカスタムメニューにも対応!前編
後編の動画はこちらhttps://factory-programming-mv.com/video/yM-uZIKpB3s/SassをCSSにコンパイルする方法はこちらhttps://factory…
-
27:37
階層が深い、ドロップダウン「多階層ドロップダウンメニュー」を実装する方法!WordPress(ワードプレス)のカスタムメニューにも対応!後編
前編の動画はこちらhttps://factory-programming-mv.com/video/bma-7TabXCc/JSのfindメソッドについてはこちらhttps://factory-pr…
ダウンロード有 -
08:29
GSAPを使って、途中のコンテンツを横スクロールにする方法!前編
後編の動画はこちらhttps://factory-programming-mv.com/video/S-YkozogQQU/GSAPの動画リストはこちらhttps://factory-program…
-
09:01
GSAPを使って、途中のコンテンツを横スクロールにする方法!後編
前編の動画はこちらhttps://factory-programming-mv.com/video/-6d0mTnhcLE/この動画では、GSAP(GreenSock Animation Platf…
ダウンロード有 -
10:23
本格的なフロントエンド開発に必須のNode.js(ノード)解説!Node.jsとは?どんなものなのか?
個別で講義もおこなっています!詳細は以下のページからご覧いただけます。https://personal-lesson-programming.com/独自の動画サービスを公開しました!内容はYout…