JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳 | Note: This post is mainly based on the V8 eng
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです（私はそう思います）が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
こちらの記事は、2019年7月に公開された Indrek Lasn 氏による『 2020 and Beyond Programming Trend Predictions 』の和訳になります。 本記事は著者の許可を得て掲載しています。 Thank you for letting us share your knowledge! 著者に何かメッセージがある方は Twitter までご連絡ください。 また本記事は転載であり、本記事はこちらになります。 はじめに 2020年は、もうすぐそこです。 2020年はSFの世界のように聞こえますが、そろそろ新しい世界のドアをノックする時期になっています。 すぐそこまで来ている未来のプログラミングの世界に興味をお持ちの方は、この文章をこのまま読み続けて下さい。 これから述べることは、間違っているかもしれませんが、私が将来起こると考えていることです。 未来を
マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ
マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ マイクロソフトは1月14日（日本時間1月15日未明）にオンラインインベント「.NET Conf Focus on Blazor」を開催、同社が開発中のWebアプリケーションフレームワーク「Blazor」の最新動向と今後について明らかにしました。 Blazorは、C#と.NET Coreを用いてWebアプリケーションの開発を可能にするフレームワークです。JavaScriptを用いず、C#によるプログラミングでSPA（Single Page Application）のWebアプリケーションを開発できるため、.NETの知識や経験をWebアプリケーションに活かせると同時に、Visual StudioなどC#に対応した豊富な開発ツールによる開発生産性の向上を期待できるとい
サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能
サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能 Webアプリケーションのクライアントを開発する際に、本来ならばサーバ上で稼働するWebアプリケーションのバックエンドのAPIを呼び出してデータを受け取って表示するといった動作を作り込みたいけれども、まだバックエンドのAPIも開発中であったり、何らかの理由でバックエンドを稼働させる環境を用意できなかったりすることは、しばしば起こりえます。 そうしたときにサーバを立てることなく、バックエンドのAPIをモックとして簡単に設定し提供してくれるソフトウェア「Mock Service Worker」の最新版「Mock Service Worker 2.0」が正式にリリースされました。 Announcing MSW 2.0! Migratio
2024年2月の頭頃から、AppleがiOS 17.4のベータ版で「プログレッシブウェブアプリ(PWA)」のサポートを廃止していることが明らかになっています。AppleはPWAのサポート廃止について、欧州連合(EU)のデジタル市場法に準拠するためと説明していたのですが、多くの批判にさらされた末、サポート廃止を撤回すると発表するに至りました。 iOS 17.4 won't remove Home Screen web apps in the EU after all - 9to5Mac https://9to5mac.com/2024/03/01/apple-home-screen-web-apps-ios-17-eu/ iPhoneは長らくPWAをサポートしており、これによりモバイルアプリと同じようにウェブ上のアプリをホーム画面に追加して利用することができるようになっています。iOSでのP
Vue.jsで作ったゲームをインストール可能（PWA）にしてGitHub Pagesで公開してみた | DevelopersIO
はじめに おはようございます、加藤です。年末年始は実家の北海道に帰省するつもりだったのですが、見事にインフルエンザB型にかかってしまって、急遽キャンセルしました... 予定が全て吹っ飛んで暇になったので、年末年始は下記の教材を使ってVue.jsを勉強していました。 超Vue JS 2 入門 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む) まだ7割しか終わっていないですが、せっかくなので簡単なゲームをインストール可能な状態で作って公開してみました。 新規プロジェクトの場合 Vue CLIで新規プロジェクトを作成する際に、指定する事でPWAとしてプロジェクトをセットアップできます。 npx -p @vue/cli vue create new-project # Manually select features を選択する Vue CLI v4.1.2
マッチングアプリ強者を体験できる PWA 開発で、Web プッシュ通知を理解しよう - Qiita
どうも、親からもらったお年玉でマッチングアプリを始めるも、いいね 0 件のまま 3 ヶ月で退会した@sadnessOjisan です。 今日はタイトルの通り、マッチングアプリ強者を体験できる PWA を開発します。具体的には、いいね 通知がたくさん届くアプリを開発します。なおこのアプリは「通知止まらん www」を体験できるアプリを作ったの影響を深く受けました。ただし、これから作る push 通知体験アプリでは、通知の疑似体験ではなく本当に通知が届きます シンプルにプッシュを送るだけのコード: https://github.com/sadnessOjisan/simple-push マッチングアプリ っぽいUIがついたコード: https://github.com/sadnessOjisan/simple-push-ui 書いた動機 この記事では Firebase を使った web push
CloudflareでもFastlyでもVercelでもDenoでもBunでもService Workerでも動く
HonoというWebフレームワークを作っています。 当初はCloudflare Workers向けに作っていたのですが、同じCDNであるFastlyのエッジランタイム、Compute@Edgeでも動くことが分かりました。また、Next.jsのEdge MiddlewareもしくはEdge API RoutesとしてVercelの環境でも動きます。そして、少々手を加えるとDenoでも動きました。もちろんDeno Deployにもデプロイできます。さらに、先程レポジトリが一般公開されたYet AnotherなJavaScriptランタイムのBunでも手を加えず動きました。 この「CloudflareでもFastlyでもVercelでもDenoでもBunでも動いた件」が、なかなか面白かったのでそれについて書きます。 Web標準のAPI これらの環境で同じように動くのは、JavaScriptでかつ
PWA(Progressive Web Apps)対応サイトの作り方・実装方法まとめ・入門 － AWS上で学習したPWA導入例とLighthouse Report Viewerの使い方 - NRIネットコムBlog
小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe
ritou です。 これで話しました。 pwanight.connpass.com 発表資料と発表内容を公開します。 発表資料 speakerdeck.com 発表内容 台本チラ見しながら話したので実際にはこのとおりになってなかった部分もあります。 今日は、パスキーについて話します。 細かい自己紹介は省略します。 色々宣伝したいものがありますがブログに書きます。 今日の内容ですが、初めにパスキーの概要についてざっと触れます。 続いてWebアプリケーションにパスキーを導入するとなった場合にどこから手をつけるべきかというところに触れた後、一番の悩みどころになりそうなログインのUI/UXについて紹介します。 概要からいきましょう。 パスキーの紹介記事もたくさん出ているので要点だけまとめます。 パスキーとは「パスワードが不要な認証方式」であり、それを支える仕様はFIDOアライアンスとW3Cにより策
Firebase + Google Spreadsheet + Glide でサーバレスな それっぽいWebサービスを作った話【HAPPY SEEDING / 後編】 - okadato の雑記帳
この記事は Firebase アドベントカレンダー 2019 18日目の記事です。 Firebase を活用して個人開発した結婚式の写真管理Webサービスのアーキテクチャなどについて書きます！ さて前回記事になりますが、サービス自体の概要と開発の経緯についてまとめました。 今回は技術的背景の解説ということで、いきなりですが全体構成図をバーンと！ 全体構成図バーン！ 技術的には Firebase + Google Spreadsheet + Glide（というSaaS。詳細は後述） で構成しています。 以下では各要素を分類し、それぞれの役割について解説していきます。 Firebase部分 使用しているのは Firebase Hosting Cloud Functions Cloud Storage for Firebase の3つです（写真送信画面での手間を極力省くため、認証は噛ませていませ
数年前からGoogleは「Progressive Web Apps」（PWA）という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」（PWA）とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ
Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報
PWA、SPA、Service Workerとは？（前編で解説）SPAを可能にするApp Shellアーキテクチャ（中編で解説）Service Workerがもつ圧倒的な力まとめ3. Service Workerがもつ圧倒的な力最初にはっきりさせておきたいことがある。それは、ここまでで解説してきた「SPA」と、ここから取り上げる「Service Worker（サービス・ワーカー）」は、互いに排他的なものではないということだ。 つまりこの2つは共存するものだということだ。どちらもPWAと呼ばれるものの基盤となっているが、SPAではないPWAをつくることも可能だし、従来の静的なウェブサイト（クライアントサイドでレンダリングする処理がないサイト）にService Workerを統合することもできる（近い将来、そのようなサイトが増える僕は思っている）。 さらに、Service Workerはウェブ
サーバサイドのJavaScriptランタイム「WinterJS」登場。Rustで書かれ、WebAssembyにコンパイル可能なService Workerサーバ
サーバサイドのJavaScriptランタイム「WinterJS」登場。Rustで書かれ、WebAssembyにコンパイル可能なService Workerサーバ WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」を発表しました。 Announcing WinterJS: a blazing-fast Javascript Service Workers server written in Rust powered by SpiderMonkey ❄️https://t.co/kX7jjJj6qv — Wasmer (@wasmerio) October 27, 2023 WinterJSはRustで書かれた高速なService Workerサーバであり、オープンソースとして公開さ
[レベル: 上級] 多くのサイトが PWA に対応するようになってきました。 しかし、PWA がネイティブアプリの完全な置き換えになるには克服しなければならない問題がまだ残されているように思えます。 Stefan Dorresteijn 氏が dev.to で、PWA が現状で抱えている大きな問題を 3 つ指摘しました。 どんな問題なのかを、追加情報を交えてこの記事で完結にまとめます。 Apple の PWA サポート状況 Android の Chrome では、ネイティブアプリに引けを取らないほどに PWA の機能が充実してきました。 これに対し、iOS の Safari は PWA のほとんどの機能をサポートできていません。 こちらは、Google の Thomas Steiner 氏が作成した、PWA のサポート状況を検出するツールを使って iOS 版 Safari をチェックした状
ウェブ上でネイティブアプリ並の機能を実現するPWAで利用できる機能をまとめてテストできるサイト「What PWA Can Do Today」
プログレッシブウェブアプリ(PWA)は、ウェブ上でネイティブアプリと同様の使い勝手を実現するための仕組みで、2015年に概念が提唱されて以来、徐々に機能が増加しています。「What PWA Can Do Today」は、PWAで利用できるさまざまな機能について実際に試せるサイトです。 What PWA Can Do Today https://whatpwacando.today/ サイトにアクセスするとこんな感じ。最初に「Install to home screen」をクリックし、サイトをアプリとしてインストールします。 確認画面が表示されるので「インストール」をクリック。 デスクトップにアプリが追加されました。初回は自動で起動しますが、次回以降はこのアイコンをダブルクリックして起動します。 アプリを起動すると、さまざまな機能をテストできる画面が表示されました。「Media captur
NotionでPWAアプリの開発を実現するノーコードツール「NotionApps」の使い方！ - paiza times
今回はNotionのデータベースを活用して、PWAにも対応したWebアプリ開発ができるノーコードツールをご紹介します！ このサービスはNotionデータベースの情報を取得したり、更新・追加などがアプリ側から簡単にできるのがポイントです。ノーコードでさまざまなロジックも構築でき、自分がイメージしたアプリを素早くカタチにできます。 面倒なサーバーの準備も不要なため、誰でも簡単にアプリを開発して公開できます。ご興味ある方はぜひ参考にしてください。 【 NotionApps 】 「NotionApps」の使い方！ まずはサイトの上部にある【Create your app】ボタンをクリックして、無料のユーザー登録を済ませておきましょう。 メールアドレスとパスワードを入力したら【Sign up】ボタンをクリックします。 以下のようなダッシュボード画面が表示されたら準備完了です！ 「NotionApps
サルでもわかるGit入門はサル先生のGit入門に改名しました。 サルでもわかるGit入門がPWAに対応しました。 iOSやAndroidのスマートフォンのホーム画面にサルでもわかるGit入門を追加することでネイティブアプリのように起動し、ブラウザよりも高速に閲覧することが可能になります。 こんにちは。 ヌーラボのマーケティング課所属のレオです。 私はヌーラボが運営するサイトやCacooの開発をサポートしたりとヌーラボ内を横断しているフロントエンドエンジニアです。 今回はレガシーな構成からNuxt.jsにリプレイスしたサルでもわかるGit入門を今更ながらPWAに対応させたので、かんたんにご紹介します。 そもそもPWAとは PWAとはProgressive Web Apps（プログレッシブウェブアプリ）の略です。 通常のWebサイト / Webアプリはブラウザ上で動作しますが、PWAはブラウザ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
🚀⚙️ JavaScript Visualized: the JavaScript Engine
JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説
2020年以降のプログラミング技術のトレンド予想 - Qiita
Web版「Visual Studio Code」がオフライン動作に対応 ～PWAとしてインストール可能に／指定サイズ以下のリポジトリコンテンツを自動DLして高度な検索・定義移動も利用できる
Appleが「iOS 17.4でのPWA廃止」を撤回すると発表
PWA Night vol.57 ～認証・認可〜 にてパスキーの話をしました - r-weblife
ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ
SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない | Moz - SEOとインバウンドマーケティングの実践情報
PWAもAndroidアプリも使える！ さらに“奥の手”Linuxアプリをインストール可能【Chromebookって何？】
PWAはネイティブアプリに今のままでは勝てない？ PWAが解決すべき3つの大きな課題
「サルでもわかるGit入門」がPWAに対応しました | 株式会社ヌーラボ(Nulab inc.)