【デモあり】Swiperでプログレスバーを実装する方法 - 株式会社TANE-be｜大阪にあるWebサイト制作
こんにちは、TANE-beエンジニアです。 今回はスライダーとプログレスバーを実装してみたいと思います。 スライダーにはSwiper.jsを使用します。 まずはデモページをご覧ください。 画像の下で動いている黄色のバーがプログレスバーです。 プログレスバーを実装すると、現在見えていないコンテンツが存在し切り替わることがわかりやすくなります。スライダー内容を見せるために速度を落としたい箇所や、スライダーとわかりにくい箇所に実装すると効果的です。 同じ効果をもつ仕様としては、左右のコンテンツを示すボタンや、ページナビゲーションのドットなどを実装することもありますね。 ボタンやページナビゲーションはデフォルトに機能で実装が可能なことが多いですが、プログレスバーは少し自分でコードを書く必要があります。今回はその実装をご紹介していきます。 簡単に実装できるので、ぜひ試してみてください。 swiper
素のJavaScriptでアコーディオンメニューを作る（クリックで開閉・jQueryなし・WAI-ARIA対応）｜BringFlower
クリックで開閉するアコーディオンメニューを素のJavaScript（Vanilla JS）で制作する方法を解説します。ここでご紹介する内容は、他のサイトで紹介されているコートだと達成したい仕様が満たされなかったり、実装の仕方が悪いのか挙動がおかしかったりしたので、自作したものです。 使いまわしもしやすいコードで使いやすいものになっていると思いますので、ぜひご活用ください。 またウェブアクセシビリティのためのWAI-ARIAも対応しています。 実装結果デモ まずは実装した結果をご確認ください。 後述する仕様のうち、アコーディオンを開いた時にスクロールを許容する部分はスクロールバーが存在するCODEPENだと表現が難しかったので、その点は別途ご自分でご確認いただければと思います。 See the Pen Accordion by Takahiro Inada (@tkhr1) on CodeP
【JavaScript】ドロップダウンメニュー(メガメニュー)を作る : タッチデバイスやキーボード操作対応！ | Code.Yu
ホーム/ブログ/JavaScript/【JavaScript】ドロップダウンメニュー(メガメニュー)を作る : タッチデバイスやキーボード操作対応！ 形だけ作ろうと思えば、CSSだけでも簡単に作れてしまうドロップダウンメニュー(メガメニュー)ですが、タッチデバイスやキーボード操作まで考慮すると、意外と奥が深く難しかったりします。 今回は「どんなデバイス」でも「どんな操作方法」でも、使いやすいドロップダウンメニューを作ってみます。 ドロップダウンメニューは「クリック」と「ホバー」どちらで展開するべきか？ 以下の理由から、「ドロップダウンメニューはクリックで展開するべき」と個人的には考えています。 (ホバーを否定する気はなく、両者にメリデメが存在します。) ホバー操作は主にPC特有の操作方法ですが、クリック操作はタッチデバイスとPCで共通の操作方法になります。どのデバイスでも操作を統一するほう
歴史を感じつつ、クロージャで遊んでみた（JavaScript編） - iimon TECH BLOG
こんにちは！株式会社ｉｉｍｏｎでフロントエンジニアをしている「ひが」です！ 本記事はアドベントカレンダー19日目の記事になります！ 先日夢で「メリークロージャマス！！！」と叫んでスベる夢を見ました。 冬だからか、みなさん冷たかったです（現実では暖かいです） そのようなこともあり、思い切って記事にしてみようと思いました！ どうか、暖かい目で見守っていただけると嬉しく思います！！ 本題 本題ですが、みなさんはクロージャをご存知でしょうか。 MDNよりお言葉を借りると クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせ です！ 初見だと何言ってるかよくわからないですよね。 本記事でざっくり掘っていきますので、是非一緒に見ていただければ幸いです！ ※ 本記事は基本的にMDNの内容に沿う形で進めつつ、たまに脱線したり小ネタを挟んだりします ※ コード
JavaScriptのイテレータ, イテラブル, ジェネレータを理解する！
お久しぶりです。GMOインサイトの天河です。 ついこの間、JavaScriptのジェネレータについて社内勉強会で発表したのでその内容をまとめます。 ※ 注意 本記事で言及している「ジェネレータ」はJavaScriptでの言語仕様です。一部通ずる箇所もあると思いますが、Python や C# など他の言語での使われ方についてはしかるべき文献を見てください。 目的 ジェネレータ が何かわかるようになる ジェネレータについて面接で聞かれても余裕で答えられるようになる 実装時にジェネレータを選択肢として持てるようになる 対象読者 ジェネレータ が何か全くわかっていない人 ジェネレータ について認知はしているものの、どういうものかは把握していない人 ジェネレータ を知ってはいるものの、使い所がわからない人 はじめに ジェネレータを理解するためには、「イテレータ」と「イテラブル」について知る必要があり
Javascript 同期処理と非同期処理の内部処理について - Qiita
Javascriptの同期処理と非同期処理が内部でどのように処理されているかについて、深掘りした内容をまとめてみました。 なお、同期処理と非同期処理に関する基本的な知識は前提としています。 同期処理について まずは、同期処理について2つのケースを考えてみます。 Case 1 function() sync1() { console.log('sync1'); } function() sync2() { console.log('sync2'); } function() sync3() { console.log('sync3'); } sync1(); sync2(); sync3(); /* -- 出力 -- 'sync1' --- ① 'sync2' --- ② 'sync3' --- ③ --------- */
JavaScriptの『エラー解決に困ったとき』に見るサイト - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 はじめに エラーが発生したとき、みなさまはどのように対処していますか？ 多くのエンジニアが最初に頼るのは、誰かが書いたブログ記事やフォーラムの投稿かもしれません。しかしながら、記事の情報が古かったり、記事自体の解釈が間違っていたりする可能性もあるため、解決までに時間がかかることも多々あります。 一方で、主観にはなりますが「できるエンジニア」と呼ばれる人は、 公式ドキュメントやオ
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA
ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？ このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲覧できたり、演出と組み合わせることで世界観や没入感を表現できます。また、macOSに比べるとWindowsはデフォルトでスクロールしたときにカクカクと動くため、慣性スクロールを実装するとWindowsでもmacOSのように滑らかにスクロールさせることができます。 前編である今回の記事では、慣性スクロールを使ったウェブサイトを紹介し、簡単に実装できるライブラリ「Lenis」で実際に慣性スクロールを実装してみます。 慣性スクロールが使われているサイト 慣性スクロールはどのようなウェブサイトで使われてい
オセロ(リバーシ)を導入してみた。【暇つぶしにどうぞ】
少しJavaScriptを書籍で学ぶ時間があったので、せっかくならということでこちらにも載せておきます。普通のオセロなので、盤上をクリックすることでコンピュータとの対戦が開始します。
CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
ブラウザの「戻る」ボタンでキャッシュが表示されてしまう際の対策 - Qiita
はじめに 各ブラウザの「戻る」ボタンを押すと、ブラウザのキャッシュをクリアしていても、 JavaScriptでリンク遷移時にローディングアイコンをページ全体に表示 「戻る」ボタンを押す ローディングアイコンが全体に表示されたページが読み込まれる といったことが発生する場合があります。 これはキャッシュには下記の2種類あり、ブラウザバックの場合はbfcache用の対策が必要となるためです。 通常のキャッシュ（ページや画像など、ブラウザの”キャッシュを削除”で削除できるもの） bfcache(戻る/進むボタン用のキャッシュ) 確認環境 IE11 iOS7 戻るボタンで不具合が起こる理由 「戻る」ボタン用のキャッシュは、JavaScriptの処理が全て完了した状態をメモリ上に保持しています。 キャッシュとしてメモリ上の情報を読み込むことで表示を高速化しているのですが、 JavaScriptの処理
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
ブラウザキャッシュの仕組みについてまとめた
Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して
スレッドとプロセスの違いを完全に理解する
はじめに こんにちは、FarStep です。 プログラミングを学ぶ中で、「プロセス」と「スレッド」という言葉を耳にしたことがある方は多いと思います。 しかし、これらの違いを明確に説明できる自信がない方も多いのではないでしょうか。 本記事では、プロセスとスレッドの違いについて、エッセンスを抽出して 解説します。 説明を簡潔にしましたので、本記事は 5 分程度で読み終えることができます。 本記事の内容を自分の言葉で説明できるようになれば、プロセスとスレッドの違いの理解は十分でしょう。 それでは、始めます 🚀 プログラムとは プロセスとスレッドの違いを理解する前に、まずは「プログラム」について理解しましょう。 プログラムとは、プログラミング言語で書かれた一連の命令 のことです。 プログラミング言語の例としては、以下のようなものがあります。 C 言語 Java Python Ruby JavaS
【JS体操】JavaScript で頭の体操をしよう！〜第1問 44文字 解説編〜 - KAYAC Engineers' Blog
こんにちは！カヤック面白プロデュース事業部のおばらです。 普段は受託案件、特にインタラクティブな WebGL や Canvas2D を駆使する案件のデザイン＆実装を担当しています。 先日出題したJS体操 第1問目、挑戦してくださったみなさまありがとうございました！ 早速ですが最短文字数の回答は 44文字 でした！ export default x=>x-(x%=.2)+.2-(.04-x*x)**.5 みごと44文字を達成した方は、 halwhite さん koyama41 さん sugyan さん tkihira さん たつけん さん の5名！（※ Unicode コードポイント順） おめでとうございます！！ 最短文字数を狙った正統派の回答以外にも、裏技的な面白アプローチがたくさんありました笑 このアプローチは面白い、ぜひ紹介したい！という回答がいくつかあったので、解説記事は2回に分けて
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
<img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointerCapture(event.pointerId) } } </script>
MobX の使い方｜npaka
以下の記事が面白かったので、ざっくり翻訳しました。 ・MobX: Ten minute introduction to MobX and React 1. はじめに「MobX」は、シンプルでスケーラブルな、状態管理ソリューションです。このチュートリアルでは、「MobX」の重要な概念を10分で紹介します。「MobX」はスタンドアロンライブラリですが、ほとんどの人が「React」で使用しています。 2. コアとなるアイディア「状態」はアプリケーションでもっとも重要なものの1つです。一貫性のない状態や、ローカル変数と同期していない状態は、不具合の多い管理不可能なアプリケーションを生み出します。 多くの状態管理ソリューションは、状態を変更できる方法を制限しようとします。しかし、これは新しい問題を引き起こします。データは正規化する必要があり、参照の整合性は保証されなくなり、プロトタイプなどの強力な概
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのthisもこれで完璧！呼び出し方で変わる5つのパターン - Qiita
lenis.jsでposition:fixed要素のoverflow:scrollを効かせる - Qiita
