最近のフロントエンドのエディタ事情 - mizchi's blog
これは、個人でどんなエディタを使うべきか、ではなく、「チームとして」新しいものを採用するとき、あるツールがエディタ横断で便利かどうかを考える必要がある。 自分個人としては、基本はAtomを使って、TypeScriptを書くときだけVS Code を使っている。ターミナルでは Vim。 環境でエディタを選ぶ 最近の新規プロジェクトでは、とくにブロッカーがなければ TypeScript を使っていいと思う。TypeScript を使うなら当然 VS Code を使うことになる。Atom や Vim でもいいが、TypeScriptのエディタとしては、流石に完成度が頭一つ抜けてる。JavaならJetBrains 的なノリで、TSならVSCode、そういうものと思ったほうが楽。 TS以外なら、エディタはなんでもいいが、ある程度流行ってるものでないとエコシステムに追いついてくれない。 prettie
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト AMBI（アンビ）
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための
仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント
注釈 本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。 書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 GitHub上で連絡 をお願いします 1 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。 1 https://github.com/future-architect/typescript-guide/pulls
Index | blog.jxck.io
Archive 2024 2024-07-31 3PCA 29 日目: Privacy Sandbox の方針転換は何を意味するか 2024-07-05 なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待 2024-06-26 「1 分 de Web 標準」のやり方 at Web Developer Conference 2024 #wdc2024 2024-06-14 URL.parse を Chromium で Ship するまで 2024-06-12 Web Developer Conference 2024 開催告知 #wdc2024 2024-05-10 Reverse HTTP Transport が描く新しい Web サービスデプロイ構成 2024-05-07 Referrer-Policy の制限を強めると安全になるという誤解 2024-04
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得
[JavaScript] 小数点以下指定した桁数で四捨五入する（.toFixed） – コピペで使える JavaScript逆引きリファレンス
小数点以下指定した桁数で四捨五入するには、.toFixed()を使用します。 サンプルソース 例）小数点以下指定した桁で四捨五入する
Intersection Observer API を使った画像の遅延読み込み
2. Intersection Observer APIということで「必要になった時にはじめて画像がダウンロードされ表示される」という動作が求められるのですが、このような処理を実現するために用意されているのが Intersection Observer という API です。 この API は、「ある画面上の要素が、ブラウザ上の表示領域（ビューポート, viewport）に対してどの位置にあるか？ を観察して教えてくれる」という機能を持っています。 遅延読み込みを実現するという観点から少し言い換えると、 ということが可能になります。 仕様 Intersection Observer3. Intersection Observer API を使って画像を遅延読み込みする例Intersection Observer API を使って画像を遅延読み込みするサンプルコードを紹介します。 細かい部分
Intersection Observerで要素が画面内に入ったときにアニメーションや自動スクロールをスタートする | Hypertext Candy
この記事では、Intersection Observer とその利用例を紹介します。 ある要素が画面上に見えたとき、アニメーションを開始する 同様にある要素が画面上に見えたとき、スライダーを自動で動かす Intersection Observer Intersection Observer とは Intersection Observer は JavaScript の機能の一つです。直訳すると「交差の監視役」でしょうか。「交差」とは聞きなれない言葉ですが、【基準の要素】と【監視される要素】の重なり具合を意味します。 例えばブラウザ画面全体を基準としてある要素を監視したとき、監視対象が30％見えていたら、基準であるブラウザ画面と監視対象が30％重なっている（＝交差している）と考えます。 ある基準に対して監視対象が見えている割合と言ってしまっても良いでしょう。 使い方 Intersection
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な
IntersectionObserverで要素が画面内に入ってきたかを判定する
ウェブにおいて、ある要素が他の要素と重なっているかどうか判定したいことは、よくあります。代表的な例としては画像の遅延読み込みがあります。画像が画面内に入ってきてから読み込むことで、負荷を抑えるテクニックです。しかし従来の方法は、パフォーマンスへの悪影響や、コードの複雑化など、様々な問題を含んでいました。 そこで、近年になって新しく導入されたIntersectionObserverを使えば、パフォーマンスへの影響を気にすることなく、要素の交差判定を簡単に実装することができます。 要素と要素の交差判定 画像の遅延読み込みやスクロールアニメーションを実装する際、「要素が画面内に入ってきたか」という情報が重要になります。これは「要素と他の要素（画面の場合はviewport）の交差判定」と言い換えることもできます。 要素の交差判定は、scrollイベントを監視し、scrollTopなどのプロパティを
使ってみよう！Intersection Observer！ - Qiita
１）はじめに スクロールに追従して、 画像の遅延ロード YouTubeの自動再生 コンテンツの追加読み込み といったことを行いたい。 このようなケースにおいて、今まではスクロールイベントをフックとして実装することがほとんどでした。しかし、頻繁に実行されるスクロールイベントは、ブラウザにとって優しい処理とは言えず、特にスマホではスクロール詰まり（Scroll Jank）を引き起こしてしまうこともありました。 そこで登場する、比較的新しいAPIがIntersection Observerです。 今回はその利用方法について模索してみます。 ２）Intersection Observerとは その名の通り「Intersection（要素間交差）」を「Observe（監視）」するAPI。 任意の要素（DOM）同士の交差を監視することが出来ます。 デフォルトでviewport（見えている範囲）とある要
Intersection Observer が良さそうなので試してみた - Qiita
個人的に辛いと思っていたこと レスポンシブ時で要素のスクロール位置がレイアウトによって変化する場合（SPだとレイアウトが縦長になるため） 感覚的に書けないつらさ １回のみの動作させるときはflag処理が必須（スクロールさせてfalseにしてfalse時は動作させないなど） スクロールイベントの発生は断続的なのでブラウザでの負荷がヤバい。 setTimeoutとかrequestAnimationFrameとかで軽減させる方法は一応ある ⇛ (関連記事) lazyloadなどの遅延読み込みをネイティブで分かりやすく出来ないか。 Intersection Observer という技術について こちらの記事で「Intersection Observer」というAPIを要素の遅延読み込みに利用していると知り、なんとなく調べてみることにした。 概要 Intersection（交点）Observer（監
async/awaitを使ったモダンな非同期処理 - Qiita
2017年6月リリースのES2017で、JavaScriptはようやくまともな非同期処理を手に入れました。 以下はMODERN ASYNCHRONOUS JAVASCRIPT WITH ASYNC AND AWAITの日本語訳です。 MODERN ASYNCHRONOUS JAVASCRIPT WITH ASYNC AND AWAIT JavaScriptで非同期処理を行う近代的な方法とは。 Introduction JavaScriptはコールバック地獄からES2015のPromiseまで瞬く間に進化しました。 そしてES2017では、async/awaitによってより簡潔に非同期処理を書けるようになりました。 非同期関数はPromiseとジェネレータの合わせ技であり、そしてPromiseより高いレベルの抽象化です。 リピートミー。「async/awaitはPromiseで作られている」
async/await、promise・・これが最後の「JavaScriptの非同期処理完全に理解した」 - Qiita
ただこの時１つ注意が必要なのが、JavaScript以外の処理を実行する時、その処理の完了を待たずに、次の処理が実行されます。 代表的な例がHTTPリクエストです。 非同期処理で最初に多くの人が陥るのが、例えば関数AでHTTPリクエストを投げてユーザー情報を取得して、関数Bで取得したユーザー情報を使いたい時に、関数Aの非同期が完了する前に、関数Bが実行されてしまい、ユーザー情報が使えないというケースです。 では、それを回避するために、JavaScriptではこの非同期処理をどのようにして同期的に扱うのか？ その歴史を以下で見ていきます。 非同期処理との戦いの歴史 非同期処理を同期的に扱うため、どのような方法を取られてきたのか、JavaScriptからHTTPリクエスト処理を実行する例を参考に説明します。 1.非同期処理を普通に呼び出した場合 まずは非同期処理を含む関数を普通に呼び出した場合
JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita
対象 このあたりの理解があいまいな方： JavaScriptは非同期で処理できる！？ 並行処理と非同期処理って同じ！？ そもそも同期と非同期って何が違う！？ 非同期の結果はコールバックで受け取る！？ コールバックを多用するとコールバック地獄に陥る！？ Promiseを使うとコールバック地獄を回避できる！？ JavaScriptの基礎 大前提として、JavaScriptはシングルスレッドで動いています。 これはつまり、JavaScriptは並行処理はできないということです。 同期であろうと非同期であろうと2つ以上の処理を同時に行なうことはできません。 JavaScriptでは、キューに登録された関数が順番にひとつずつ実行されていきます。 でもキューに登録される順番が同期であったり非同期であったりします。 JavaScript以外（例えばデータベース等）に仕事を任せてる間、その処理を待たないで
JavaScriptと非同期処理の話 - Qiita
JavaScriptの歴史、それは非同期処理との戦いの歴史 プログラムの常識 コードは上から順に実行される const fs = require('fs'); var hoge = fs.readFile("hoge.txt") var fuga = fs.readFile("fuga.txt") var foo = fs.readFile("foo.txt") var bar = fs.readFile("bar.txt") console.log(hoge + fuga + foo + bar); 動かない なんで？ 非同期処理だから ファイルの読み込みが終わる前に console.log() が走っちゃう なんで非同期なの？ 同期的な処理だと、IOアクセスの待ち時間中に何もできなくなる DOMを操作するときはなにかと非同期で動かしたいことが多い(Ajaxのレスポンスを待っている間にプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのグローバルオブジェクト
Smooth Scrolling Image Effects | Codrops
JavaScript Promiseの本
今更だけどPromise入門 - Qiita
