javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 前編 - Qiita
javascriptはオブジェクト指向言語なのに、手続き型で書いてしまいがち... javascriptはオブジェクト指向言語であるものの、ちょっと特殊な言語です。Java、C++、C#、Rubyといったクラスベースの言語とは違い、プロトタイプベースのオブジェクト指向言語であるというのがオブジェクト指向で書きづらい要因になっているように思います。 クラスベースの言語であれば、まずはともあれクラスを作ってインスタンス化する...という一連の流れが自然と書ける一方で、javascriptでは「DOMを操作する」という任務を任されることが多いために、要素を取得して、計算して、要素を書き換えて、ということを手続き的に書いてしまう。 そして、記述量が多くなればなるほど待ち受けるのは、、、 「このjsはどこで何をやってるんだ...」 「同じようなコードがいろんなところでコピペされてる...」 「この処
Javascript における Hoisting を理解したい
🌼 はじめに Javascript の Hoisting をなんとなくは知ってたけど正確にどういう動きをするのかをあまり把握してなくて、一度ちゃんと理解したいという気持ちは昔からありました。 が、なかなか実行できず、、（^_^）だったので今年アドベントカレンダーを機会にちゃんと整理したいと思います！！ 1. Hoisting とは Javascript における Hoisting は「変数や関数などの宣言をスコープの先頭に巻き上げること」です。 「hoist」という英単語自体が「持ち上げる、巻き上げる」という意味を持っているので、日本語では Hoisting のことを「巻き上げ」とも言うらしいですね。 まあ言葉だけではピンとこないかもしれないので、これから変数と関数の具体例で説明します。 2. 変数の Hoisting 2-1. var まずvarの Hoisting による事象の一つを
iPhoneの省電力モードをJavaScriptで判定する方法
<video>が省電力モードだと自動再生されない罠 動画を背景で自動再生する案件に携わったのですが、iPhoneの省電力モードだと自動再生されず、代わりに再生ボタンが表示されることを初めて知りました。
【JavaScript】アニメーションの処理負荷を軽減する
単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 最近レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。
ページ内リンクとページトップへのスムーススクロールの実装 scrollToのOptions未対応にも対応させる
ページ内リンクのスムーススクロール // リンクをすべて取得 const link = document.querySelectorAll('a[href^="#"]'); // クリックイベント for (let i = 0; i < link.length; i++) { link[i].addEventListener("click", smoothScroll, false); } function smoothScroll(e) { // 一瞬でリンク先に飛ぶ初期設定を解除 e.preventDefault(); // 遷移先の要素 let targetId = e.target.hash; // クリックした要素の「#」を取得 let target = document.querySelector(targetId); // 遷移先要素の取得 // 遷移先の位置 let scr
History API でもページバック時にスクロールバーの位置は復元される : (*x).b=z->a+y/c
◆ history.pushState で移動してから戻ってきたときにスクロール位置は復元される ◆ history.scrollRestoration の設定で無効にすることも可能 ◆ ページ全体以外の要素内スクロールは復元できない ◆ 通常のページ遷移でも bfcache がない Chrome だと復元できない スクロール位置が復元されてる前の記事で SPA にするかしないかを考えてるときに JavaScript でページを切り替えだと スクロールバーの位置がそのままになってしまう問題もあると思ってました 移動時は新規にページを読み込むのと一緒なので window.scrollTo(0, 0) でリセットで良いです しかし 戻る・進むボタンを使うときは 移動直前の状態に戻ってきてほしいものです 間違ったリンクをクリックして移動した後に戻るボタンで戻ってきたらスクロール位置が一番上に戻っ
javascript スクロールを禁止する
スクロール禁止 スクロールを禁止するには、イベント「touchmove」と「mousewheel」に「preventDefault」を使用して、禁止します。 function handle(event) { event.preventDefault(); } window.onload = function() { document.addEventListener('touchmove', handle, { passive: false }); document.addEventListener('mousewheel', handle, { passive: false }); } <button id="btn" onclick="hoge()">解除</button> <div id="sample" style=" height: 1500px; width: 200px; b
HTML要素をグラフィカルにアニメーション化できるJavaScriptライブラリ「Theatre.js」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！ 【 Theatre.js 】 ■「Theatre.js」の導入について！ それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！ 既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試して
初心者、新人が来たらコレ見せて！多分一番わかりやすいJavaScriptDOM操作解説（JQueryは使いません） - Qiita
0.はじめに 0-1.はじめに Web開発をするならJavaScriptは触る。 これは避けられないことなんだよなぁ… 今回はモダンなJavaScriptでのDOM操作を可能な限り簡単に解説するよ。 「jQueryわからん」 「JavaScriptの基本を押さえたい」 「新人に１から教える時間がない」 そんな方向けの記事となってますよ。 0-2.効率よく学ぶためには？ 使い方とまでは言わないけど 個人的にオススメしたい学習方法はこんな感じです。 ・CodePenのサンプルを触る ・「大事な所だけ抽出すると」のコードを見て、ポイントを押さえる ---------------------ここまでを全チャプターおこなう--------------------- ・CodePenサンプルをよく読む ・実際にコードを書いて動かす ・サンプルを改造する この記事では「DOMを使えるレベルになる」がゴー
Horizontal Click and Drag Scrolling with JS
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
ドラッグしながらスクロールするライブラリ「ScrollBooster」 – bl6.jp
ScrollBoosterはドラッグしながらスクロールする機能を実装できるライブラリです。テーブルや画像などのコンテンツを任意の領域内でドラッグスクロールしながら見せることができるので、使いどころによってはとても便利な機能ですね。 以下のページからScrollBoosterの実際のデモ動作をチェックできます。 デモ デモではテーブルや画像といったコンテンツにこの機能が実装されています。例えば、一番上のテーブルでは、テーブル内にカーソルを持っていくとカーソルが十字の矢印に切り替わります。この状態で左右にドラッグすることで横にスクロールしていくことが可能です。 特定の領域内にたくさんのデータを詰め込みたい場合に役立つ機能ですね。 同様に、画像のデモでは左右だけではなく上下のドラッグスクロールもできるようになっています。ユーザーに拡大画像を特定の領域内でスクロールしながらじっくり見せたい場合には
【パーツ集】HTML・CSS・JavaScriptをコピペで終わらせられるサイトまとめ | まさたブログ
「毎回同じコード書くのいやだけど、コードのストックも持ってないしな〜」や「過去のコードをまとめるの自体めんどう。。」という方に非常におすすめのサイトをまとめてみました。 どれも無料なのに驚きますが、ブックマーク登録してありがたく使わせていただきましょう！ まず紹介させていただくのは「JAJAAAN!」です。 こちらのサイトはボタン、見出しがそれぞれ100種類以上まとめてあり、どれもHTMLとCSSをコピペするだけで簡単に実装することができます。 グラデーションなどおしゃれなデザインも幅広く取り扱っているのもいいですよね！ 種類の多さと手軽さに驚きます。 【ボタン集】 https://jajaaan.co.jp/css/button/ 【見出し集】 https://jajaaan.co.jp/css/css-headline/ headers.css 2つ目は「headers.css」です。
思えばちゃんと理解していなかったJavaScirpt関連基礎知識 17問 - Qiita
初めは動かすことだけを意識し過ぎていて、当時は何となく使うことも多かった. 全部答えられますでしょうか? 簡単なもの多いですが、力試しにどうぞ. ※参照リンク貼っていますが、怪しいブログやプログラミングスクールは極力抜いています. 含んでいたら教えてください. JavaScript関係なく 0.1 + 0.2 == 0.3はFalse 英語 : Why 0.1 + 0.2 ≠ 0.3 in JavaScript https://javascript.plainenglish.io/why-0-1-0-2-0-3-in-javascript-d7e218224a72 日本語 : Pythonで、0.1+0.1+0.1==0.3 がFalseなのは何故でしょうか？ https://jp.quora.com/Python%E3%81%A7-0-1-0-1-0-1-0-3-%E3%81%8CFal
「JavaScriptになったら急にわからなくなった」人への処方箋 〜 フロントエンドエンジニアを目指している方へ｜ドットインストール
ドットインストール代表の taguchi です。 「HTML / CSSを勉強していて、JavaScriptに入ったら急にわからなくなった」 ユーザーの方からそういった声をよく聞きます。そうですよね...。HTML / CSS / JavaScriptはセットで紹介されることが多いので、同じような流れで進むかと思いきや...、そうでもありません。印象としては以下のような感じでしょうか。 HTML → それほど難しくない。 CSS → ひとつひとつは難しくないが、組み合わせになってくると難しい。 JavaScript → ...え？ゼロから書ける気がまったくしない。 ただ、フロントエンドエンジニアを目指す人にとってJavaScriptはもはや必須の技術となっており、そのあたりを目指される方にはなんとか「JavaScriptの壁」を突破してもらいたいところです。 そこで以前に「JavaScri
HTMLに味付けするためのバニラJS tips集
ReactやVueを使わずに、素のJavaScriptでDOM操作する時のやつです。 何度も同じようなことをググって時間を溶かしていたので、よく使うやつをまとめてみました。 要素の取得 // 最初に見つかった要素1つを取得 document.querySelector("#hoge-id"); //[object HTMLElement] document.getElementById("hoge-id"); //[object HTMLElement] //条件に合う要素を全て取得 document.querySelectorAll(".hoge-class"); // [object NodeList] document.getElementsByClassName("hoge-class"); // [object HTMLCollection] Array.from(documen
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのthisを8種類試してみた - Qiita
JavaScript: オブジェクトの分割代入とスプレッド構文を使ってみる - Qiita
GitHub - asvd/dragscroll: micro library for drag-n-drop scrolling style
プロトタイプにアロー関数は使えないのでしょうか
フォーカストラップとは? 〜アクセシブルなモーダル〜