【JavaScript】このasync/awaitの実行順、自信を持って説明できますか？ - Qiita
驚いたかもしれません。この3つのコードの出力結果は、すべて同じ 「1, 2, 3」です。 （全問正解できた方、素晴らしいです。） しかし、「なぜnew Promiseの中の処理が先に実行されるのか？」、あるいは「awaitの有無で何が違うのか？」といった点に、少し戸惑いはありませんでしたか？ このような直感的ではない挙動こそ、 JavaScriptの非同期処理の「クセ」 とも言える部分です。 この記事では、あなたが今まで何気なく使っていた非同期処理について、その仕組みから深く理解することを目指します。 まずはその第一歩として、「非同期」という言葉そのものの意味から確認していきましょう。 そもそも非同期（asynchronous）とは まずは言葉の定義から見ていきましょう。IT用語辞典 e-Wordsでは、以下のように説明されています。 複数の主体がタイミングを合わせずに通信や処理を行う方式
【JavaScript】MDNが推奨する最強の書き方 - Qiita
はじめに MDNのドキュメントを眺めていたら、JavaScript のサンプルコードの作成ガイドラインという章を見つけました。第三者にコードを公開するような人向けにまとめられたものですが、正しい書き方の実践としてみることができるので、クローズドなプロジェクトの中でも使えるかもしれません。ただ、モノによってはチームで決めた慣習と食い違うこともあるかもしれないので、採用はケースバイケースになると思います。 上記のページが紹介された記事があまり見当たらなかったので、折角なので共有してみようと思います。あと、ところどころ補足を付け加えています。 対象読者 基本的には初心者向け ただ、幾つかは中級者の方でもためになるものがあるかも？ 規則の一般性 ☆：よく見かける書き方。一般的 ☆☆：あまり見かけないかもしれない書き方。あるいは、意識的には規則づけられてなかった書き方 ☆☆☆：クローズドなプロジェク
フロントエンド API コール時のエラーハンドリングを軽く整理（Fetch API・typescript-fetch・TanStack Query） - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニア佐藤です。カミナシレポートの開発に携わっています。 フロントエンドのエラーは「画面リロードやブラウザ再起動で復旧できる（かもしれない）」「クラッシュしてもユーザーの端末に閉じる」などの理由から、バックエンドよりは精緻に扱われない傾向があると個人的には感じています。 その一方、カミナシレポートは、ノンデスクワーカー向けの不安定なネットワーク環境で利用されることも多々あるアプリです。そのため、デジタルツールに不慣れな方のために精緻なフィードバックが必要とされる、リロードに頼ることが難しいケースがある、などの理由でエラーの扱いにも慎重になる必要があります。 本記事では、カミナシレポートのフロントエンド開発をする中で、 バックエンドの API コール時にエラーが発生する条件とその内容（型・クラス） これらエラーをハンドリングする箇所 について、把握しておきたいと感じ
JavaScript で関数はオブジェクト? なにそれ?
はじめに JavaScript をある程度書いていると、「関数はオブジェクトでもある」という話を耳にしますよね。そして、「そんなの知らないよ。はいはい。」と右から左に聞き流しているあなたのためにこの記事を書きました。 Function オブジェクトのプロトタイプチェーンや内部スロット、コンストラクタとしての使い方、bind/call/apply の仕組み、Arrow Function や Generator Function、Async Function など、JavaScript の関数が持つさまざまな特徴を解説します。 関数がオブジェクト?? まず最初に、JavaScript の関数は Object を継承した「呼び出せるオブジェクト(callable object)」です。つまり関数として呼び出し可能であるだけではなく、プロパティを持つことができます。関数名を変数のように扱ったり、他
【デモあり】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」で実際に慣性スクロールを実装してみます。 慣性スクロールが使われているサイト 慣性スクロールはどのようなウェブサイトで使われてい
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 は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Motion - A modern animation library for JavaScript and React
JavaScriptのthisもこれで完璧！呼び出し方で変わる5つのパターン - Qiita
lenis.jsでposition:fixed要素のoverflow:scrollを効かせる - Qiita
オセロ(リバーシ)を導入してみた。【暇つぶしにどうぞ】