【Nuxt.js】vue-touch-eventsでタッチイベントを使おう | aLiz Nuxt前置き vue2-touch-events タップ、スワイプ、タッチホールドイベントを Vue, Nuxtで、そしてPCでも 簡単に使えるようにするものです💫 スワイプしたらページ遷移、 とかが超簡単にできます💕 参考: Nuxt.js/Vue.jsでもスワイプでページ移動したい
【Three.js入門】初心者がまず見るべきサイト・書籍まとめ | AndHA Blog
【Three.js入門】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.09.03 最終更新日 : 2022.10.05 コーディング Three.jsを勉強しようと思っても簡単なやり方や概念を説明してくれているサイトはたくさんあるけど、実際案件で使用するためにはどうやって勉強していけばよいのか分からない人は多いと思います。 今回はThree.js初級者が中級者になるために見るべきサイトや書籍をまとめました！ これら全てを行えば、初心者を脱出出来るでしょう！ 【サイト】Three.js入門サイト WebGLやThree.jsのことを調べるまず最初に出てくる池田 泰延:twitterさんが初心者にも分かりやすくThree.jsのことを説明してくれています。 まずはこちらのサイトから勉強を進めてみるのが良いかと思います。 https://ics.media/tutorial-th
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
The correct way to force Vue to re-render a component
Sometimes Vue's reactivity system isn't enough, and you just need to re-render a component. Or maybe you just want to blow away the current DOM and start over. So how do you get Vue to reload a component the right way? The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue wil
動画をWebページの背景に埋め込む時のテクニック｜notes by SHARESL
Webページの背景に動画を埋め込む時のメモ 今回はWebページの背景に動画を埋め込む時に必要なテクニックをまとめてメモ。 TOPページのファーストビューに背景動画を設置したサイトをよく見かけますが、実際に実装することになると下記のような点で悩むことがあります。 埋め込み方法（<video>タグ、YouTubeやVimeoなどの外部サイトをiframeで埋め込み） 動画の容量による負荷の問題（サーバー負荷、ロード時間） 動画上のコントロールバーやタイトルなど不要な情報の表示 ループ再生 自動再生 ミュート再生 こういった点について、動画の埋め込み方法を紹介した上でメリット・デメリットを比較してまとめてみました。 動画の埋め込み方法の比較 この記事で紹介する背景動画の埋め込み方法は下記の4つです。 直接サーバー上のファイルを読み込む（videoタグ） Googleドライブのファイルを読み込む（
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
JavaScriptでもメディアクエリが使えるwindow.matchMediaを関数化して使い回す - Qiita
要約 window.matchMediaはメディアクエリ文字列を渡して、その条件が切り替わった時にだけ処理を実行してくれます いわゆるdebounce()などでresizeイベントの間引きをする必要がありません（画面の横幅を使う処理はresizeイベントが引き続き適切です） IE10からサポートされているので、ブラウザの対応範囲を気にする必要はありません（matchMedia | Can I use... Support tables for HTML5, CSS3, etc） コールバックを実行する関数にして、1箇所でメディアクエリ文字列を管理できます ソースコード real-world-website-boilerplate/mediaQuery.jsとpwa-helpers/media-query.tsを元にしています class構文の静的メソッドに変更していますが、const me
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
「vuejs-paginate」でページネーション を実装する
導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 今回のサンプルはBootstrapベースのページネーションを実装します。 ライブラリの呼び出し まずライブラリを呼び出す為に、以下の２通りの呼び出しを選択します。 コンパイラを使用しない場合は、UMDを使ってください。 ES6等で実装する場合 import Paginate from 'vuejs-paginate' Vue.component('paginate', Paginate) UMDで実装する場合 Vue.component('paginate', VuejsPaginate) ページネーションメソッドを設定 サンプル用にforを使って、リスト用の配列itemsを設定します。 dateのperPageに1ページに表示するアイテム数を設定します。 またitemsにリストを設定
JavaScript | テキストをクリップボードにコピーする方法 | 1 NOTES
テキストをクリップボードにコピーするテキストをクリップボードにコピーするボタンイベントを実装するJavaScriptのサンプルコードです。 サンプルではコピーボタンを設置して<p>タグにあるテキストをクリップボードにコピーします。 See the Pen JavaScript Get browser zoom level by yochans (@yochans) on CodePen. HTMLには、コピーするテキストのある<p>タグ、押したらコピーを実行する<button>タグ、結果を表示する用の<p>タグを作成しています。 <p id="copy-text">Copy text</p> <button id="copy-btn">Copy</button> <p id="output"></p>querySelector()でコピーするテキストのある要素を、textContentで内
babelifyで始めるES6
babelifyで始めるES6 前回、「Babelで始めるES6入門」という記事を書きましたが、Babel単体ではES6の注目機能であるimport / exportを利用することができません。 import/export構文はnode.jsのrequire()のようなもので、JavaScriptをモジュール化し管理する為の機能です。 正確にはBabelはimport / export構文をrequire構文に変換してくれるのですが、ブラウザがrequire構文に対応していないため利用できません。 これの対応方法は様々ですが、今回はbabelifyを利用した対応方法について解説します。 babelifyはBrowserifyのtransformでBrowserifyの処理の中にbabelの処理を組み込めるモジュールです。 ちなみに、Browserifyはrequire構文をブラウザでも利用
[フロントエンド] ES2015のimport/exportをブラウザで使うためのコンパイル（Babel × Browserify） - YoheiM .NET
こんにちは、フロントエンドのリハビリ中@yoheiMuneです。 今日はES2015（ES6）から言語レベルでサポートされたモジュール定義について、ブラウザで利用するための方法をブログに書きたいと思います。 目次 ES6のimport/exportはまだブラウザで使えない ES6から利用可能なimportとexportによるモジュール定義と利用ですが、残念ながらまだブラウザでは使うことができません。例えば以下のようなコードがあった場合に、 import React from "react" Chromeだと以下のようなエラーが発生します。 # Chrome v53の場合 Uncaught SyntaxError: Unexpected token import そして前回、「[フロントエンド] 次世代JavaScriptのコンパイラ、Babelに入門」でES6をES5にコンパイルする方法を
![[フロントエンド] ES2015のimport/exportをブラウザで使うためのコンパイル（Babel × Browserify） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/898f8fcd9a6b73b128ccbe4483be437cd0b5de56/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F450.jpg)
【JavaScript・export・import】モジュールについて理解をまとめる｜とものブログ
こんにちは、ともです。 この記事ではES6からの構文であるimportについて理解をまとめたいと思います。 ES5の知識すらほぼ無かった状態でVue.jsをやってしまった僕は何となく動くものは作れるけど深くは理解できないという感覚でした。このような方は多いのではないでしょうか。 その状態から脱却するためにimportについて勉強していきます。 外部ファイルのクラスの読み込み アプリケーションが大きくなるとモジュール毎に機能を管理していく必要があります。 そのようなモジュールを読み込むためにimportを利用します。PHPであればrequireという構文があります。 他のファイルに記述されたクラスを読み込む際にimportを利用します。 ファイルを準備 モジュールとしてMemberクラスを『./lib/Util.js』に定義しました。 // ./lib/Util.js const AUTHO
JavaScript の即時関数さんてさ？ - Qiita
即時関数とは 即時関数について知らない方はググって知識を得てからいかに進んでくださいm(_ _)m 文が書けるとこでは即時関数の出番は減る JavaScript には、「文(statement)」と「式(expression)」という概念があります。それを知らずにプログラミングするということは、冬に富士山頂上を目指すようなものですから（？）、ググって知識を得てからいかに進んでくださいm(_ _)m さて、ここまで進んでこられた皆さんにすればどうということもない話であると思いますが、ブロック文を使えば、即時関数の出番は減ります。 let c = 0; { const a = 1; const b = 2; let c = a + b; } console.log(c); // 0 つまり、変数のスコープを狭めるだけの目的でわざわざ即時関数を使う種族は絶滅したはずである、ということです。 文が
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
2021年に知っておきたいJavaScript最適化技術34選 - Qiita
最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Detect a Touchscreen Device Using JavaScript? | by John Au-Yeung | JavaScript in Plain English
Wait for multiple images to load
Intersection Observer doesn't observe new elements