- Видео 472
- Просмотров 973 904
フロントエンドチャンネル
Япония
Добавлен 19 фев 2018
都内で活動するフリーの現役エンジニアが、フロントエンド全般についての動画を配信しています。
普段はWebサイトの開発・SEOのコンサル・個別講義やスクールの運営・フロントエンド向けツールの開発などをしています。
◯スクールについてのご質問やオンラインでの無料受講相談は以下で受け付けています!
line.me/R/ti/p/%40mhi7958t
動画作成予定の言語・ツール・ライブラリなどは以下です。
・HTML / CSS
・Sass / Scss
・JavaScript / TypeScript
・Wordpress(基本的な使い方から、独自テーマの作り方について)
・Pug
・Vue.js / Nuxt.js
・React.js / Next.js
・Command line tool
・Git
・npm / yarn / pnpm / Bun
・Webpack / Viteなど
・SEO / 基本的なWebマーケティング / UI, UX
・WebGL / Three.js
その他上記言語などに関する言語やツールなどの紹介
◯プロフィール
武田一真(たけだかずま)
プログラミングは14歳から。
中学生の時に、当時流行っていたオンラインゲームのファンサイトを作りたくて、趣味でHTMLのみでサイトを作っていました。
そのあと、CSS、Sass、JavaScripなどを独学で習得し、約2年間ITベンチャー企業でインターン生として修行、その後独立してフリーランスに。
企業さまからサイト制作の受注もいただきますが、それ以外にも人に教えることが好きな為、個別の講義やスクール運営(1人で経営と講師を兼任)もしています。
今までに教えた生徒は600人以上(ほとんどが1対1のマンツーマン)です。
普段はWebサイトの開発・SEOのコンサル・個別講義やスクールの運営・フロントエンド向けツールの開発などをしています。
◯スクールについてのご質問やオンラインでの無料受講相談は以下で受け付けています!
line.me/R/ti/p/%40mhi7958t
動画作成予定の言語・ツール・ライブラリなどは以下です。
・HTML / CSS
・Sass / Scss
・JavaScript / TypeScript
・Wordpress(基本的な使い方から、独自テーマの作り方について)
・Pug
・Vue.js / Nuxt.js
・React.js / Next.js
・Command line tool
・Git
・npm / yarn / pnpm / Bun
・Webpack / Viteなど
・SEO / 基本的なWebマーケティング / UI, UX
・WebGL / Three.js
その他上記言語などに関する言語やツールなどの紹介
◯プロフィール
武田一真(たけだかずま)
プログラミングは14歳から。
中学生の時に、当時流行っていたオンラインゲームのファンサイトを作りたくて、趣味でHTMLのみでサイトを作っていました。
そのあと、CSS、Sass、JavaScripなどを独学で習得し、約2年間ITベンチャー企業でインターン生として修行、その後独立してフリーランスに。
企業さまからサイト制作の受注もいただきますが、それ以外にも人に教えることが好きな為、個別の講義やスクール運営(1人で経営と講師を兼任)もしています。
今までに教えた生徒は600人以上(ほとんどが1対1のマンツーマン)です。
質問し放題プランのお知らせと、各学習サポートまとめ、Discordサーバー開設のお知らせ!
動画内で説明していた記事のURLはこちら
factory-programming-mv.com/posts/support-summary/
DiscordサーバーのURLはこちら
discord.gg/DEFUA6jEhj
個別で講義もおこなっています!
詳細は以下のページからご覧いただけます。
personal-lesson-programming.com/
アニメーションライブラリ不要!?Web Aniimation APIについての再生リストはこちら
ruclips.net/p/PLv7E5OqNAIPwSJcRWjrxAnCs_z3gge1x4
脱jQuery!jQueryの書き方とJavaScriptに書き換える手順 の再生リストはこちら
ruclips.net/p/PLv7E5OqNAIPy39bOkZqydpb4O79SmtIuR
GSAP(JavaScriptのアニメーションライブラリ)の再生リストはこちら
ruclips.net/p/PLv7E5OqNAIPyK5tWN8oEXnZznq1abxJZ2
本当は教えたくない、現役のプロが教えるSEOを学びたい方はこちら
ruclips.net/p/PLv7E5OqNAIPzhbVGarXinl43adgQ8B3N6
HTML/CSSを基礎から学びたい方はこちら
ruclips.net/p/PLv7E5OqNAIPw8ZZFW2Q-qnRlGqe0e6qX6
CSSアニメーションについて学びたい方はこちら
ruclips.net/p/PLv7E5OqNAIPzrVJRYgES95wMSbJKpNWP6
CSS gridについて学びたい方はこちら...
factory-programming-mv.com/posts/support-summary/
DiscordサーバーのURLはこちら
discord.gg/DEFUA6jEhj
個別で講義もおこなっています!
詳細は以下のページからご覧いただけます。
personal-lesson-programming.com/
アニメーションライブラリ不要!?Web Aniimation APIについての再生リストはこちら
ruclips.net/p/PLv7E5OqNAIPwSJcRWjrxAnCs_z3gge1x4
脱jQuery!jQueryの書き方とJavaScriptに書き換える手順 の再生リストはこちら
ruclips.net/p/PLv7E5OqNAIPy39bOkZqydpb4O79SmtIuR
GSAP(JavaScriptのアニメーションライブラリ)の再生リストはこちら
ruclips.net/p/PLv7E5OqNAIPyK5tWN8oEXnZznq1abxJZ2
本当は教えたくない、現役のプロが教えるSEOを学びたい方はこちら
ruclips.net/p/PLv7E5OqNAIPzhbVGarXinl43adgQ8B3N6
HTML/CSSを基礎から学びたい方はこちら
ruclips.net/p/PLv7E5OqNAIPw8ZZFW2Q-qnRlGqe0e6qX6
CSSアニメーションについて学びたい方はこちら
ruclips.net/p/PLv7E5OqNAIPzrVJRYgES95wMSbJKpNWP6
CSS gridについて学びたい方はこちら...
Просмотров: 114
Видео
数値の桁数を自動で合わせるpadStart・padEndメソッドを紹介!
Просмотров 134Месяц назад
連番の数字や、日付などの 特定の桁数を調整するには、今まではsliceメソッドなどを使ってきましたが、新しく出てきた、padStart・padEndを使うことによって自動で調整できるようになります! ゼロ埋め・パディング・ゼロパディング・ゼロ補完・ゼロフィル・リーディングゼロと呼ばれるこの手法ですが、よく使うので、覚えておきましょう! 個別で講義もおこなっています! 詳細は以下のページからご覧いただけます。 personal-lesson-programming.com/ 【スクール開催中!】 本格的に学んでみたい、プロを目指したい方は是非詳細を見てみてください。 factory-programming.com/ 独自の動画サービスを公開しました!内容はRUclipsと同じですが、様々な機能を使える他、ファイルのダウンロードなどをおこなえます! factory-programming...
配列の何番目に対象の文字列があるか確認する、indexOf, lastIndexOfメソッドについて紹介!
Просмотров 99Месяц назад
この動画では、JavaScript (ジャバスクリプト) で頻繁に使用される indexOf と lastIndexOf メソッドについて説明しています。これらのメソッドは、特定の文字列が配列や他の文字列のどの位置にあるかを調べるために使います。 indexOf メソッドは、指定された要素が配列内のどの位置にあるかを調べます。このメソッドは、配列の最初から検索を開始し、要素が見つかった最初のインデックスを返します。例えば、配列 ["Apple", "Banana", "Orange"] で "Banana" のインデックスを indexOf で検索すると、1が返されます。これは配列が0から数え始めるため、"Banana" は二番目の位置にあることを意味します。 逆に、lastIndexOf は配列の最後から要素を検索し、見つかった最初のインデックスを返します。これは、同じ要素が配列内...
簡単に値をスライドで変更できる inputタグの range(レンジ)を紹介!
Просмотров 83Месяц назад
今回の動画では、Webページ内でスライダー(スライドバー)として機能するHTMLのinputタグのtype属性の一つ、「range(レンジ)」について説明しています。このtypeを使うと、数値の入力範囲を指定したバー形式で調整でき、主にフォームでの使用や、アプリケーションでの様々な設定調整に活躍します。 例えば、音量調節や画面の明るさの調整、年齢の選択などに使えます。具体的には、グラデーションの色の透明度や角度を調整する際にも「range」が有効です。このスライダーはCSSとJavaScriptを組み合わせることで見た目や動作のカスタマイズが可能ですが、今回は基本的な使用方法に焦点を当てています。 スライダーの基本設定として、「min(ミン:最小値)」と「max(マックス:最大値)」を指定します。例として、minを10、maxを60に設定すると、ユーザーは10から60の範囲で値を選べ...
移動後のページにデータを渡せる、URL「パラメーター」について解説!前編
Просмотров 173Месяц назад
この動画では、検索システムなどでよく使われる、WebサイトのURLに含まれる「パラメーター(parameter)」について説明しています。 そもそもパラメーターとは何か?どのような構造になっているのかや、パラメーターのキー(key)とバリュー(値、value)、複数設定する時の設定方法などについても紹介しています。 また、タブやスライダーをパラメーターによって変更する方法も紹介しています。 後編の動画はこちら ruclips.net/video/kq_NGz1ZbAM/видео.html 個別で講義もおこなっています! 詳細は以下のページからご覧いただけます。 personal-lesson-programming.com/ 【スクール開催中!】 本格的に学んでみたい、プロを目指したい方は是非詳細を見てみてください。 factory-programming.com/ 独自の動画サー...
Location API(ロケーション) とそれを使ってページごとにJavaScriptの処理を分ける方法!WordPressでページごとに処理を分ける方法も
Просмотров 151Месяц назад
動画内で説明していたLocation APIのドキュメントはこちら developer.mozilla.org/ja/docs/Web/API/Location 動画内で説明していたワードプレスで固定ページのスラッグをbodyタグにクラスとして追加する方法はこちら ruclips.net/video/0P7-fFu9QtM/видео.html サイト制作をおこなっていると、URLに関する様々な情報を取得しなければならないことがあります。 今回はそれを簡単におこなうことができる、ロケーションAPIについて説明しています。 また、location.pathname を使った、ページごとに処理を分ける方法を紹介しています。 個別で講義もおこなっています! 詳細は以下のページからご覧いただけます。 personal-lesson-programming.com/ 【スクール開催中!】 本格...
GSAPでパララックス(視差効果。parallax)の実装をする方法!前編
Просмотров 2842 месяца назад
今回は、GSAPでパララックスの実装をする方法を学んでいきます。 この動画では、画像をスクロールに合わせて少しずつ移動させることによってパララックスを実現していますが、アイコンやテキストなど要素であればなんでも応用することが可能です。 後編の動画はこちら ruclips.net/video/X6U5f0Sa3rA/видео.html GSAPの再生リストはこちら ruclips.net/p/PLv7E5OqNAIPyK5tWN8oEXnZznq1abxJZ2 CSS Grid の再生リストはこちら ruclips.net/p/PLv7E5OqNAIPxTDBvGfJ_46aoZ7PLV3m5n&si=WFuVaUnCinFpXohT 個別で講義もおこなっています! 詳細は以下のページからご覧いただけます。 personal-lesson-programming.com/ 【スクール...
VSCodeの便利なプラグインLive Server(ライブサーバー)を紹介!
Просмотров 1592 месяца назад
HTML/CSSでサイト制作をしていると、毎回ブラウザの手動でのリロードが手間となります。 それから、JSのfetchなどの処理はサーバー上でないと動作しないことがあります。 それらの問題を解決するのが、このLiveServerプラグインです。 プラグインを入れるだけでこういった問題が解決するので、是非導入してみてください! 個別で講義もおこなっています! 詳細は以下のページからご覧いただけます。 personal-lesson-programming.com/ 【スクール開催中!】 本格的に学んでみたい、プロを目指したい方は是非詳細を見てみてください。 factory-programming.com/ 独自の動画サービスを公開しました!内容はRUclipsと同じですが、様々な機能を使える他、ファイルのダウンロードなどをおこなえます! factory-programming-mv.c...
CSSで背景に動画を設定し、綺麗にレイアウトして自動再生させる方法!
Просмотров 2442 месяца назад
動画内で説明していた、videoタグの動画はこちら ruclips.net/video/2TAc7dljEUg/видео.html 動画内で説明していた、object-fit, object-positionの動画はこちら ruclips.net/video/XnnDcr7iYIg/видео.html サイトを作っていると、背景に動画をループして再生させたいことがあります。 この動画では、videoタグをobject-fitで画面にフィットさせて全画面表示にした状態で動画を再生させる方法を紹介しています。 また、position: fixedやabsoluteを使って固定表示や違ったバリエーションでの表示をさせる方法を紹介しています。 個別で講義もおこなっています! 詳細は以下のページからご覧いただけます。 personal-lesson-programming.com/ 【スク...
コンテンツを一定の幅で固定する効率的な方法!前編
Просмотров 2742 месяца назад
動画内で説明していた、カスタムプロパティ(CSS変数)の動画はこちら ruclips.net/video/bg1ne6Ztk7I/видео.html 動画内で説明していた、min, max関数の動画はこちら ruclips.net/video/1YF-H63cWU0/видео.html WebサイトやLPなどをコーディングしていると、常に一定の幅にしなければならないことがよくあります。 いちいちmax-widthなどで指定してもいいですが、どうせ何度も出てくるデザインパターンは1箇所で定義して使いまわせた方が圧倒的に楽です。 この動画シリーズでは、前編でCSSで管理する方法。後編でSassでさらに効率的に管理する方法を紹介していきます。 後編の動画はこちら ruclips.net/video/SVsCTPdxEnA/видео.html 個別で講義もおこなっています! 詳細は以下...
入れ子のレイアウトがもっと楽に!subgrid(サブグリッド)解説。CSS Gridの新機能を使いましょう。前編
Просмотров 3222 месяца назад
動画内で説明していたaspect-ratioの動画はこちら ruclips.net/video/jeaRVM9_HS4/видео.html 動画内で説明していたobject-fitの動画はこちら ruclips.net/video/XnnDcr7iYIg/видео.html 動画内で説明していたCSS Gridの動画リストはこちら ruclips.net/p/PLv7E5OqNAIPxTDBvGfJ_46aoZ7PLV3m5n 後編の動画はこちら ruclips.net/video/2FQAfMhC4vY/видео.html この動画では、Subgridについて説明しています。CSSグリッド(CSS Grid)は、Webページのレイアウトを柔軟に制御するための強力なツールですが、サブグリッドはその応用として、グリッド内のグリッドをさらに細かく制御することが可能です。 サブグリッ...
API(エーピーアイ)とは?インターフェース・リクエスト・レスポンスについても解説!
Просмотров 2463 месяца назад
講義内で使用していた資料のURLは以下です。 factory-programming-mv.com/posts/whats-api/ この動画では、API(アプリケーション・プログラミング・インターフェース)についての基本的な説明がされています。APIとは、アプリケーション同士が互いにデータをやり取りするための「仲介者」の役割を果たします。具体的には、リクエストを送信し、レスポンスを受け取る方法について説明されています。 まず、APIの基本的な役割について解説します。APIは、異なるソフトウェアやシステム間で情報をやり取りする際の「枠組み」または「通信規約」として機能します。例えば、テレビのリモコンがインターフェースとして機能するように、APIもソフトウェア間のインターフェースとして働きます。 次に、実際のAPIの使用例が紹介されています。たとえば、Webブラウザ(ウェブブラウザー)...
CSSのtransformプロパティの新しい書き方と挙動について
Просмотров 2163 месяца назад
動画内で説明していた、以前のtransformの書き方の説明動画はこちら ruclips.net/video/TQ1_PSS31W8/видео.html 動画内で説明していた、transformのジェネレーターサイトはこちら front-end-tools.com/generateTransform/ 「transform(トランスフォーム)」プロパティの新しい書き方について説明しています。 プロパティは要素の変形に関連する機能を提供します。新しい記述方法により、このプロパティの使い勝手が向上しました。 以前のCSSでは、transformプロパティ内に複数の変形を記述していました。例えば、translate(トランスレート、移動)、scale(スケール、拡大・縮小)、rotate(ロテート、回転)、skew(スキュー、歪み)などの機能があります。新しい書き方では、これらの指定をも...
videoタグで動画を設置・再生させる方法を紹介!様々なオプションについても解説
Просмотров 1333 месяца назад
動画内で説明していた、aspect-ratioの動画は以下です。 ruclips.net/video/jeaRVM9_HS4/видео.html HTMLで動画を簡単に再生させる方法について説明しています。基本的なコードの書き方からオプションの設定方法まで、段階を追って解説します。 まず、動画をWebページに表示するための基本となるのはvideoタグ(ビデオタグ)です。このタグを使用すると、MP4(エムピーフォー)やMOV(エムオーブイ)などの動画ファイルを簡単に埋め込むことができます。特にMP4は多くのブラウザでサポートされており、互換性が高いです。 動画タグの中には、sourceタグ(ソースタグ)を使用して、異なる形式の動画を指定することもできます。これにより、ブラウザが自動的に対応する形式の動画を読み込むことが可能です。 再生に関しては、controls属性(コントロールズ属...
定義と実行を同時に行える関数「即時関数」について解説!
Просмотров 1613 месяца назад
この動画では、JavaScriptでよく使用される「即時関数」(Immediately-Invoked Function Expression, IIFE)について説明しています。即時関数は、その定義と同時に実行される関数で、コードの管理が簡単になり、グローバルスコープの汚染を防ぐことができます。 動画では、即時関数の基本的な書き方とその利点を解説しています。一般的に関数は定義後に別途実行が必要ですが、即時関数を使用すると、定義と実行を一緒に行うことができます。これにより、コードが簡潔になり、実行時のエラーを減少させることができます。 即時関数は、特定の条件下で繰り返し処理を行う際にも役立ちます。例えば、数値を逐次減少させながら合計を計算するような処理において、引数として与えられた値から0になるまでの総和を計算する場合に有効です。これは再帰関数としても機能し、自関数自身を呼び出すこと...
JSのイベントフェーズについて解説!キャプチャリングフェーズとバブリングフェーズとは?
Просмотров 2393 месяца назад
JSのイベントフェーズについて解説!キャプチャリングフェーズとバブリングフェーズとは?
エラーを見やすく表示!VSCodeの便利なプラグインError Lens(エラーレンズ)を紹介!
Просмотров 2784 месяца назад
エラーを見やすく表示!VSCodeの便利なプラグインError Lens(エラーレンズ)を紹介!
入れ子(ネスト)になったコードが見やすくなる!VSCodeの標準機能Sticky Scroll(スティッキースクロール)を紹介!
Просмотров 2994 месяца назад
入れ子(ネスト)になったコードが見やすくなる!VSCodeの標準機能Sticky Scroll(スティッキースクロール)を紹介!
JavaScriptでよく使われる、callback関数(コールバック関数)について
Просмотров 1,2 тыс.9 месяцев назад
JavaScriptでよく使われる、callback関数(コールバック関数)について
ワードプレスの記事などの投稿をSwiper(スライダー)でスライド表示する方法!
Просмотров 59010 месяцев назад
ワードプレスの記事などの投稿をSwiper(スライダー)でスライド表示する方法!
ワードプレスで抜粋を任意の文字列に変更する方法と、文字が長くなった時の省略文字を変更する方法!
Просмотров 11410 месяцев назад
ワードプレスで抜粋を 意の文字列に変更する方法と、文字が長くなった時の省略文字を変更する方法!
ワードプレスでページの種類ごとの処理をしたい場合の条件分岐の関数を紹介!
Просмотров 26010 месяцев назад
ワードプレスでページの種類ごとの処理をしたい場合の条件分岐の関数を紹介!
ワードプレスで固定ページのbodyタグにページのスラッグをクラス名として追加する方法!
Просмотров 22210 месяцев назад
ワードプレスで固定ページのbodyタグにページのスラッグをクラス名として追加する方法!