V8エンジンによる内部変換コードでasync/awaitの挙動を理解する
はじめに JavaScript の「非同期処理」ってやっぱりかなり難しくないですか？ 自分も色々試行錯誤しましたが、結局「完全に理解した🤓」→「やっぱり何も分からん😭」っていうループの中で泥臭く理解を深めていくしかないようです。 さて、非同期処理の制御をある程度予測できるようになるには、非同期 API を提供する環境のことやイベントループ、マイクロタスクなどの仕組みについて理解する必要があります。 そして環境に埋め込まれた JavaScript Engine のことも理解する必要があります。 今回の記事では、JavaScript Engine の１つである V8 が内部で変換するコードから async/await の挙動を理解するための解説を試みたいと思います。V8 エンジンからアプローチすることで async/await の分かりづらい挙動を掌握して非同期処理を打倒します。 今回の記
JavaScriptの非同期処理をじっくり理解する (2) Promise
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順
Next.js + microCMS + VercelでJamstackなブログ付き個人サイトを作る - あなたとあなたの話がしたい
妻の歌人としてのブログ付き個人サイトをリリースしたので、技術的な観点をまとめておきたい。 Jamstack これがサイトの構成図で*1、最近流行りのJamstackというアーキテクチャで作ってみた。 Jamstackは、静的サイトジェネレーターを用いてCMS等で管理するコンテンツをビルド時にすべて取得して、ユーザーアクセス前に用意しておいたHTML、CSS、JavaScriptをCDN経由で配信することで、画面遷移が非常に速い優れたパフォーマンスのサイト構築を可能にする。 CMS更新時のWebhook通知で自動デプロイする仕組みを入れることで、開発者がソースコードを触ることなく、サイト編集者で完結したサイト更新を行うことができるため、ビジネスから趣味の活動まで、静的サイト開発・運用の手段として有力な選択肢になるだろう。 静的サイトジェネレーター Next.js, Nuxt.js, Gats
【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try
はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer 迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
技術ブログをバズらせたくて必死で身につけた情報収集術 - omuriceman's blog
僕は2019年4月から技術ブログを始めているが、2ヶ月目くらいから「はてなブックマークでホッテントリを取るための情報収集」を心がけるようになった。その影響もあって何記事かはてなブックマークでホッテントリ入りすることもできたので、これから技術ブログなどでアウトプットを始める人の役に立てばいいなぁと思ってブログでまとめることにした。技術ブログを書く人でなくても情報収集先として参考になる部分はあると思う。 はじめに GitHub Trending プログラミング言語はPythonとJavaScriptとTypeScriptを重点的に見る プログラミング言語以外にもUnknown languagesをチェックする Advanced searchで直近の日付に絞り込む GitHub Trendingを参考にしたブログ記事 Product Hunt Product Huntを参考にしたブログ記事 Re
ブロックチェーン入門 ─ JavaScriptで学ぶブロックチェーンとBitcoinウォレットの仕組みと実装 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
ブロックチェーン入門 ─ JavaScriptで学ぶブロックチェーンとBitcoinウォレットの仕組みと実装 本記事ではブロックチェーンのプログラミングを、実践とともに学びます。ブロックチェーンとは、分散環境の新しいデータ構造であり分散合意のアルゴリズムですが、Node.jsでブロックチェーンおよびBitcoinウォレットを実装し、その仕組みを理解していきましょう。 フリーランスでエンジニアとライティングなどをゆるゆる行っているerukitiと申します。 個人のサークル「東京ラビットハウス」から「Modern JavaScript」「簡単JavaScript AST入門」「JavaScriptで覚える暗号通貨入門#1 Bitcoin完全に理解した」といったJavaScript関連の技術同人誌を単著で発行しています。 この記事では、ブロックチェーンの仕組みを解説し、実際にブロックチェーンやB
Promiseを使った非同期ループ処理の書き方について
JavaScriptで常に頭を悩ませるのが非同期処理ではないかと思います。非同期処理を幾つも実行したりすると、思ったタイミングで処理が走らないといったことが多々あります。 そんな中でループ処理になると、特に厄介ではないでしょうか。そこで今回はPromiseを使ったループ処理について紹介します。 0から10まで順番に処理をしたら抜けるループ 非同期処理でない場合は次のように書けます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ
Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです！
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
中上級者になるためのJavaScript【知識編】 - Qiita
【News】電子書籍化しました！ Gitbook Read Online Download PDF Download EPUB Download MOBI この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。 「クロージャーについてもっと知りたい！」「カリー化なるものがあるのか、知らなかった！」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり（場合によってはしょうがないことですが）基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜひこの機会にJavaScriptを復習してみてください。
JavaScript ベスト・オブ・ザ・イヤー 2016
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
2017年版、5分でわかるJavaScript入門(ES6対応版) - paiza times
こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 今、一番身近なプログラミング言語といえば、間違いなくJavaScriptです。 JavaScriptは、インターネット利用に必須のウェブブラウザ上で動作する唯一のプログラミング言語です。 プログラミングを学ぶ時も、いつも使っているブラウザ上で動作させることができて結果が見えるため、興味を持って始めるやすい言語かと思います。 JavaScriptには、広く使われていること、活発な開発、インターネットとの相性の良さ、非同期プログラミング、仕様が標準化されていること、オープンソースでの実装があること…などなどの特徴があり、今や以下のような様々な用途でも使われるようになっています。 ウェブブラウザ(Chrome, Firefox, Internet Explorer...) サーバアプリケーション(Node.js, Ex
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
JavaScriptでDDD(ドメイン駆動設計) その1 変数名一覧を作ろう - CureApp開発者ブログ
2015 - 10 - 07 JavaScriptでDDD(ドメイン駆動設計) その1 変数名一覧を作ろう DDD( ドメイン 駆動設計)とは？ 語弊を恐れずに言いますと、 開発したいアプリケーションにおいて、関心領域の ビジネスロジック だけを抽出し、独立させる設計手法のことです。 DDDの定義に関しては、日本語のとてもよい記事がありますので、こちらを参照するとよいでしょう。 Domain-Driven Designのエッセンス ちなみに JavaScript で 、と書きましたが、DDDは設計手法であり プログラミング言語 によらないはずです。 弊社が JavaScript でDDDを実践した、という経験を共有させていただきたいというだけです。 DDDを実践するにあたっては、そのバイブルである エリック・エヴァンス氏の有名な本 をなぞることも重要だと思います。 ここではこの本に書いてい
JavaScript+DDD実践編？
ϨΠϠʔԽ ɹΞʔΩςΫνϟ ΤϯςΟςΟ όϦϡʔ ɹΦϒδΣΫτ ϦϙδτϦ ϢϏΩλεݴޠ େنઃܭ ϦϑΝΫλϦϯά ΞάϦήʔτ ࠓ ͢ Δ ͓ ࠓ ͠ ͳ ͍ ͓
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hatebu.me
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
