JavaScriptの動画リスト
この再生リストでは、JavaScriptを学び、ウェブアプリケーションの動的な機能を実現するためのスキルを身につけることができます。JavaScriptの基本概念から始め、変数・関数・オブジェクトなどの基本機能を簡潔に解説します。
実践的なプロジェクトを通じて、DOM操作やイベントハンドリング、非同期処理といったJavaScriptの応用技術も学びます。これにより、実践的なJavaScriptプロジェクトに取り組み、プロフェッショナルなウェブアプリケーションを追求できるようになります。
再生リストを活用して、JavaScriptを使いこなし、動的で効率的なウェブアプリケーションを実現しましょう。スキルが向上し、見事なウェブアプリケーションを作成できるようになることで、ウェブ開発の世界で活躍できることでしょう。
-
25:52
JavaScript(ジャバスクリプト)を最速で学ぶには?初心者向けロードマップを解説!
動画内で紹介していたメモはこちらhttps://factory-programming-mv.com/posts/js-loadmap/この動画では、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
アロー関数について解説!ES6(ES2015)で追加された新しい書き方を学びましょう!
今回はJavaScriptのアロー(arrow)関数について説明しています。よく質問をいただく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での読み込みまで!
動画内で説明していた記事の内容はこちらhttps://factory-programming-mv.com/posts/about-json/動画内で説明していたfetchの動画はこちらhttps:…
-
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)とそれぞれの特徴について、説明していきた…
-
13:38
JavaScriptのアニメーションライブラリ「GSAP」を紹介!まずは機能とできることを見ていきます GSAP #1
様々なサイトでよく使われている、GSAP(GreenSock Animation Platform。読み方はジーサップ)について紹介します!CSSやSASSだけでは難しいアニメーションの制御ができる…
-
26:13
【JavaScriptで戦闘ゲーム制作 #1】 まずは簡単なUIを整えて、ゲーム作りの土台作りから作っていきましょう!
※内容が若干古いので、意識できる方は以下のように書いてみてください。・アロー関数を使えるところはアロー関数で書きましょう。・オブジェクトからデータを取得するときは、ドットを使って書いてください。//…
-
33:34
【JavaScriptでパスワード生成ツールを作る!】パスワードジェネレーターを1から作ってみましょう! まずはファイルの作成や簡単なパスワード生成から #1
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。ライブコーディングをおこないながら、実際にアプリケーションを作っていきます。実践的なツールを作ることでJavaScri…
-
13:10
【JavaScriptで数を当てるゲーム #1】まずは完成版の確認と、基本的なUIから!
今回のシリーズから、JavaScriptとSassを使って、JSの練習のためのアプリケーション作成をおこなっていきます!1回目は、完成系の確認と、基本的なHTMLなどを組んでいくところから始めていき…
-
14:35
requestAnimationFrame 解説!画面のリフレッシュレート(切り替わり速度)に応じた処理をおこないましょう!
この動画では、requestAnimationFrame(リクエストアニメーションフレーム)について説明しています。JSでアニメーションやパフォーマンスチューニングをおこなうときに必須のメソッドです…
-
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…
-
14:19
JavaScriptでよく使われる、callback関数(コールバック関数)について
よくコールバック関数について聞かれるので、今回の動画で説明してみました。実はaddEventListenerなどで使われていますが、どこで使われているのか?や自作の関数で設定する場合の例を詳しく解説…
-
05:01
JSの同期処理と非同期処理(非同期通信)について解説!
JSを勉強しているとよく出てくる、同期処理(Synchronous Processing)・非同期処理(Asynchronous Processing)について解説しています!あまり意識しない場面も…
-
06:40
JSのスプレッド演算子について解説!
JavaScriptのスプレッド演算子について解説しています。3つのドット「...」から始まるこの演算子は、配列やオブジェクトを展開させることができます。ただ、少し分かりづらく、質問も多いので今回紹…
-
08:38
JSの分割代入について解説!
分割代入 (Destructuring assignment) 構文は配列やオブジェクトから別のそれぞれの変数に代入することができる代入方法です。知らなくても実装はできますが、場合によってはかなり効…
-
19:15
JSのイベントフェーズについて解説!キャプチャリングフェーズとバブリングフェーズとは?
今回は、JavaScriptを勉強しているとぶつかる問題である、・キャプチャリングフェーズ(Capturing Phase)・バブリングフェーズ(Bubbling Phase)について説明しています…
-
14:24
定義と実行を同時に行える関数「即時関数」について解説!
この動画では、JavaScriptでよく使用される「即時関数」(Immediately-Invoked Function Expression, IIFE)について説明しています。即時関数は、その定…
-
14:16
Location API(ロケーション) とそれを使ってページごとにJavaScriptの処理を分ける方法!WordPressでページごとに処理を分ける方法も
動画内で説明していたLocation APIのドキュメントはこちらhttps://developer.mozilla.org/ja/docs/Web/API/Location動画内で説明していたワー…
-
17:42
API(エーピーアイ)とは?インターフェース・リクエスト・レスポンスについても解説!
講義内で使用していた資料のURLは以下です。https://factory-programming-mv.com/posts/whats-api/この動画では、API(アプリケーション・プログラミン…
-
10:23
本格的なフロントエンド開発に必須のNode.js(ノード)解説!Node.jsとは?どんなものなのか?
個別で講義もおこなっています!詳細は以下のページからご覧いただけます。https://personal-lesson-programming.com/独自の動画サービスを公開しました!内容はYout…
-
15:21
移動後のページにデータを渡せる、URL「パラメーター」について解説!前編
この動画では、検索システムなどでよく使われる、WebサイトのURLに含まれる「パラメーター(parameter)」について説明しています。そもそもパラメーターとは何か?どのような構造になっているのか…
-
14:53
移動後のページにデータを渡せる、URL「パラメーター」について解説!後編
前編の動画はこちらhttps://factory-programming-mv.com/video/p9lwT_0oHo4/この動画では、検索システムなどでよく使われる、WebサイトのURLに含まれ…
-
08:59
配列の何番目に対象の文字列があるか確認する、indexOf, lastIndexOfメソッドについて紹介!
この動画では、JavaScript (ジャバスクリプト) で頻繁に使用される indexOf と lastIndexOf メソッドについて説明しています。これらのメソッドは、特定の文字列が配列や他の…
-
14:21
数値の桁数を自動で合わせるpadStart・padEndメソッドを紹介!
連番の数字や、日付などの特定の桁数を調整するには、今まではsliceメソッドなどを使ってきましたが、新しく出てきた、padStart・padEndを使うことによって自動で調整できるようになります!ゼ…