JavaScriptで出来る様々なことの動画リスト
JavaScriptとCSS駆使して、印象的で機能的なウェブサイトやアプリを作成するための手法を網羅的に解説しています。基本的なUI要素の作成、例えばモーダルウィンドウやドロップダウンメニューから、アニメーションを取り入れた動的な表現、そしてゲーム制作やツール開発まで、さまざまなコンテンツを実際に一緒に作成する形で学びます。特にJavaScriptのアニメーションライブラリ「GSAP」を用いた内容が豊富で、従来のウェブページでは実現困難だった高度なアニメーションやモーショングラフィックスを、手軽に実装する方法を詳しく説明しています。
加えて、日常的なウェブ開発で直面する課題や要求に応じた様々なテクニックを取り上げ、実践的なコードの書き方や思考法を学べるのが特徴です。このリストを通じて、今日のウェブ開発のトレンドや必要とされるスキルを習得し、より魅力的でユーザーフレンドリーなデジタル体験を提供できる技術者になる手助けをします。
-
17:43
モーダルウィンドウ・ダイアログウィンドウの作り方1(HTML、CSS、JavaScriptで作る)
HTML、CSS、JavaScriptだけで、プラグインなどを使わずに簡単にモーダルウインドウ(modal window)やダイアログボックス(dialog box)やポップアップウィンドウ(pop…
-
11:19
JavaScriptでランダムな数字を出す(乱数)方法と、配列と組み合わせて簡単なアプリ(おみくじ)を作る方法!
JS(JavaScript)で乱数(ランダムな数値)を出す方法と、それを活用した実例を紹介しています。配列と組み合わせて、簡単なおみくじアプリまで作るところまでを解説しています。JSの配列についての…
-
19:18
ドロップダウンメニュー・アコーディオンメニューの作り方!HTML / CSS / JavaScriptでシンプルに作る方法
この動画では、HTML、CSS、JavaScriptを用いて、ドロップダウンメニューの作成方法について解説しています。親メニューと子供のメニュー(サブメニュー)を含むドロップダウンメニューのHTML…
-
23:59
タブの切り替え!JavaScriptを使って、タブ(tab)が複数あっても対応可能なコードを書きましょう。HTML/CSSの書き方から紹介!
HTML, CSS, JSを使ってタブ切り替えを行う方法を紹介しています。for文を上手く活用することによって、タブやコンテンツが増えても対応できるようにします。また、CSSの指定による見た目の変更…
-
12:39
JavaScriptでHTMLのクラスの切り替えをやってみましょう!classListについて解説しています。
JS(JavaScript)コーディングでよく使う、クラスの切り替えについて説明しています。classListのadd, remove, toggleを使い分けて、様々な処理ができるようになりましょ…
-
12:42
JavaScriptで定期的に処理をする!setIntervalとclearIntervalの使い方とそのコーディング事例
JavaScriptでタイマーやカウントダウンなど定期的に処理をする方法を紹介しています。動画では実際にカウントダウンタイマーを作っているところを説明しながらsetIntervalとclearInt…
-
26:13
【JavaScriptで戦闘ゲーム制作 #1】 まずは簡単なUIを整えて、ゲーム作りの土台作りから作っていきましょう!
※内容が若干古いので、意識できる方は以下のように書いてみてください。・アロー関数を使えるところはアロー関数で書きましょう。・オブジェクトからデータを取得するときは、ドットを使って書いてください。//…
-
19:28
ローディング画面を実装する方法!ページの読み込み中にローディングアニメーションを表示させてみましょう!
読み込みが遅いページに対してローディングアニメーション(loading animation)などを実装しないといけない場面があると思いますが、今回はユーザーに待たせているのを感じさせにくいローディン…
-
52:24
文字を1文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介!かっこいいCSSアニメーションを実装できるようになりましょう!
transformについての動画はこちらhttps://factory-programming-mv.com/video/今回は、文字を1文字ずつアニメーションで動かす方法を紹介します。最近はアニメ…
-
15:28
ハンバーガーメニュー・ドロワーメニューの作り方1(全5回)
第2回目https://factory-programming-mv.com/video/qxr9bmn8SUI/第3回目https://factory-programming-mv.com/vid…
-
32:51
JavaScriptで日付を取得・表示などをするための方法とある日付までのカウントダウンをする方法
JavaScript(ジャバスクリプト)のDateオブジェクトを使って、今日の日時や曜日などを取得・表示してみましょう!基本が分かったら、明日の今の日時を表示したり、ある日付までのカウントダウン日を…
-
45:16
スクロールアニメーション!CSSとJSでカーテンが開くように要素を表示!
モダンなサイトで見かける、カーテンが開いていくような要素の表示アニメーションについて解説しています。CSSとJavaScriptをうまく組み合わせることによって実現できますが、少々難しい部分もあるの…
-
33:34
【JavaScriptでパスワード生成ツールを作る!】パスワードジェネレーターを1から作ってみましょう! まずはファイルの作成や簡単なパスワード生成から #1
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。ライブコーディングをおこないながら、実際にアプリケーションを作っていきます。実践的なツールを作ることでJavaScri…
-
45:47
パララックス(視差効果)について解説!Rellax.jsでスクロールエフェクト(効果)をかけて、奥行きのある演出をしてみましょう!
今回は、最近のサイトでよく見かけるパララックス(parallax)・視差効果の実装方法について解説しています。自前で実装するのは難しいため、Rellax.js(リラックス)というjQuery(ジェイ…
-
47:37
JavaScriptでプラグインを使わずに(画像を切り替える)スライダーを作ってみましょう!
簡単に画像を切り替えるくらいのスライダーは、プラグインの使い方を学習するよりも自作したほうが早く作れることがあります。この動画ではHTML, CSS, JavaScriptを使って1からギャラリーの…
-
57:24
ページ内スムーススクロールと、モーダルメニューをクリックした後の自動メニュー閉じについて!
今回はJavaScriptのwindow.scrollToメソッドを使って、シンプルなページ内スムーススクロールを実装する方法を紹介しています。単にヘッダーのメニューにページ内リンクを設定する方法と…
-
21:04
JSではなくて、HTML側にデータを定義できる!カスタムデータ属性(data-◯◯)の活用方法と実践的な活用法について
サイトを制作していると、JavaScriptではなくHTML側にデータを定義した方が管理が楽な場合があります。そういった時に使えるのが、このカスタム属性です!この動画では実際の設定方法や活用方法など…
-
10:49
JavaScriptで特定のaタグのみtarget="_blank"をつける方法!(特定の属性値を持つタグに属性を付与する方法)
サイト制作をしていると、特定の条件下においてタグに特定の処理をしたいことがあります。この動画では、aタグのhref属性がhttpから始まる場合にのみ、別のタブで開くtarget属性を指定する方法を紹…
-
18:29
よくある、郵便番号から住所自動入力を実装する方法を紹介 1/2
コンタクトフォームや会員登録の画面などでよく見かける、住所の自動登録の実装をしていきます!第1回目のこの動画では、簡単な見た目とJSを書いていきます。2つ目の動画は会員専用です。登録は以下から出来ま…
-
13:38
JavaScriptのアニメーションライブラリ「GSAP」を紹介!まずは機能とできることを見ていきます GSAP #1
様々なサイトでよく使われている、GSAP(GreenSock Animation Platform。読み方はジーサップ)について紹介します!CSSやSASSだけでは難しいアニメーションの制御ができる…
-
19:22
丸をJSで生成して、テキストと一緒にアニメーションさせてみましょう! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!JavaScriptとCSSを組み合わせて、図形とテキストを組み合わせたアニメーションを実装してみましょう!…
-
11:15
テキストアニメーション実装!GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!この動画では、一文字ずつ色や位置や角度をランダムに設定したものを段々と整列させ、その後文字列の両端から非表示…
-
24:12
自動で円形にメニューを並べて、順番にアニメーションさせる方法! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します…
-
14:02
クリックしたら、星が散りばめられる「クリックエフェクト」をGSAPで実装してみましょう!全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!この動画では、クリックした座標をJSで取得し、そこを中心にアイコンを外側に広がるように表示させてみます。動画…
-
31:14
クリックすると、たくさんの箱が集まってできていくようなグローバルメニューをGSAPで作ってみましょう! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!今回の動画では、画面のサイズに応じてJavaScriptで箱を作り、それをメニューを開く際にランダムに表示さ…
-
07:09
下にスクロールでヘッダーを隠し、上にスクロールでヘッダー表示させる機能を実装してみましょう!全2回(第1回目)
この動画では、JavaScriptとCSSを使ってページの途中でスクロールを上下にした際に、ヘッダーの表示を切り替えるアニメーションを実装していきます。第2回目の動画はこちらhttps://fact…
-
04:44
パララックスや、スクロールと紐づいてアニメーションできるGSAPのScrollTrigger(スクロールトリガー)の機能や実例を紹介!GSAP ScrollTrigger #1
この動画から、ScrollTriggerについての解説をいくつかの動画に分けて配信していきます。初回の動画では、実例や公式サイトのコンテンツなどの紹介をしています。JavaScript(JS)を基礎…
-
22:09
GSAP ScrollTrigger(スクロールトリガー)実践編!様々な要素を同時に動かして、より印象的なアニメーションを作る。第1回目(全2回)
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!GSAPやScrollTriggerの動画をこれまで配信していますが、今回は多くの機能を取り入れて、より実践…
-
13:10
【JavaScriptで数を当てるゲーム #1】まずは完成版の確認と、基本的なUIから!
今回のシリーズから、JavaScriptとSassを使って、JSの練習のためのアプリケーション作成をおこなっていきます!1回目は、完成系の確認と、基本的なHTMLなどを組んでいくところから始めていき…
-
24:30
データベースなしで、データが保存できる!Webストレージ(セッションストレージ・ローカルストレージ)について解説!
今までもCookie(クッキー)という技術で、Webにデータを保存することはできましたが、新しく出てきたWebストレージを使えば、さらに大きなデータを長期間保存可能となりました。この動画では・Ses…
-
14:58
マウスの座標をJavaScriptで取得する方法と、マウスを変更・編集する方法 1/2
JavaScriptでマウス座標を取得する方法はいくつかありますが、今回はその中でも・offset (X/Y)・client (X/Y)・page (X/Y)とそれぞれの特徴について、説明していきた…
-
18:02
GSAPで、丸とテキストを効果的にアニメーションさせて、簡単なモーショングラフィックスを作ってみましょう!前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!今回は全2回の動画で、GSAPを用いたアニメーションの作例を紹介しています。縁取りやストライプの円をランダム…
-
16:55
無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう!前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!GSAPを使ったアニメーション作品のシリーズです。最初、テキストを1文字ずつアニメーションさせながら表示させ…
-
27:42
コンテンツに応じた目次とページ内リンクを自動生成する方法と、CSS変数を使った効率的な開発!
今回は、コンテンツの見出しをJSで読み取り、自動で目次を生成する方法を紹介します。また、ページ内スムーススクロールの実装とCSSのカスタムプロパティを活用した、修正などに強いコードを書いていきます。…
-
11:29
ゆっくりと流れ続ける、スライダーを実装する方法!Swiperを使って、永遠に横に流れ続けるスライダー
この動画では、よくある画像がゆっくりと永遠に流れ続けるスライダーを実装する方法を紹介しています。Swiperは通常一定速度でスライドする機能はありませんが、transitionのCSSなどを上書きす…
-
09:24
JSでお知らせなどの日付が、◯日以内のものに自動でNEWをつける方法! 前編
この動画では、time属性のdatetimeから日付のテキストを取得し、それをJS側で処理することによって、指定した日付以内の日付かどうかを判断する処理を実装していきます。実際に指定した日数以内であ…
-
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…
ダウンロード有 -
14:21
数値の桁数を自動で合わせるpadStart・padEndメソッドを紹介!
連番の数字や、日付などの特定の桁数を調整するには、今まではsliceメソッドなどを使ってきましたが、新しく出てきた、padStart・padEndを使うことによって自動で調整できるようになります!ゼ…