はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニ

import js from "@eslint/js"; import typescriptEslintParser from "@typescript-eslint/parser"; import typescriptEslint from "@typescript-eslint/eslint-plugin"; import onlyWarn from "eslint-plugin-only-warn"; import globals from "globals"; export default [ // 設定項目1: lint対象ファイルの設定 // fileのみ, ignoresのみの設定項目を作ることで、指定した内容が他の項目にも引き継がれる { // 例: JavaScriptとTypeScriptをlint対象にする files: ["**/*.{js,ts,mjs,mts,c

// ローカルとdeno deployの両方で動作する const kv = await Deno.openKv("./tmp.sqlite"); // path/to/keyにデータを設定 await kv.set(["path", "to", "key"], data); // path/to/keyのデータを取得 const res = await kv.get(["path", "to", "key"]); // キーがpath/to始まりのデータを列挙する for await (const data of kv.list({ prefix: ["path", "to"] })) { console.log(data); } 上記のコードを見るとわかる通り、.envを使って環境変数を設定したり、データベースを手動で立ち上げたり、ローカル開発用のDBを用意したりといった手間が必要あり

PDFファイルを手軽にHTMLに埋め込みたい PDFファイルをHTMLに埋め込む場合、従来だと<iframe>タグを使用するか、pdf.jsを使用する方法、Google Driveのプレビュー用URLを使う方法がありました。 ただし、それぞれ <iframe>タグを使用する方法 → PCのみ埋め込み可、スマホ非対応❌ pdf.jsを使用する方法 → スマホに対応しているが、公式サイトからzipファイルを解凍し自分でサーバーに設置する必要がある（面倒）⚠️ Google Driveのプレビュー用URLを使う方法 → 複数のPDFを埋め込むと挙動が不安定になってしまった＆公式でサポートされているものなのか不明❌ という制限がありました。 詳しくはこちらの記事によくまとめられています。 pdf.jsを使うとしても、できることなら<script>タグを一行差し込むだけで使えたら最高です。 pdf.

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Atomは2022年に開発終了！ Atom Editorを開発していたGitHub社が、競合のVSCodeを開発していたMicrosoft社に買収されて以来、Atom Editorの開発は著しく停滞していました。 ユーザーはまだそれなりにいるのにあまりメンテされないという事で、バグレポートは溜まる一方。 そしてそのまま開発終了が発表されました。 11月23日に最終リリースされると、私の環境ではgitやターミナルなどの主要パッケージが動作しなくなったり、パッケージ配布サイトがスパムだらけになっていたり、コミュニティサイトが消えて数年分の質問と回答が消えたりと、世界の終わりみたいな状況です。 Atom Editorが復活していた このような感じで一時は終わっていたAtom Editorですが、なんと名前を変えて復活しています。 その名も、Pulsar editorです。 GitHub上には、以

この記事はDeno アドベントカレンダー2022の10日目の記事です。 deno deployのログは永続化されない deno deployのダッシュボードには、こんな感じのログ閲覧タブがあります。 console.logやconsole.errorで出力したものがここに流れてきます。 ただし、ドキュメントによると、deno deployでconsole.logしても、そのログを後から見ることはできないようです。 Logs Applications can generate logs at runtime using the console API. These logs can be viewed in real time by navigating to the Logs panel of a project or deployment. Logs will be streamed d

現在注目されているサーバーサイドJavaScriptランタイムといえば、Node.js と Deno と Bun の3つが挙がると思います。この記事ではそれぞれのランタイムを比較し、将来的にどのような使い分けをしていけばいいのか考えます。 Node.js と Deno と Bun の現在 npmライブラリにはすべてのランタイムが対応 Node.js：当然npmライブラリには対応しています。 Deno：npmパッケージを配布するCDNや、npmインポートを使うことで対応しています。 Bun：対応しています。 「Denoが急に方針転換をしてnpm対応を始めた」というのはよくある間違いです。 Big Changes Ahead for Deno（Denoの今後の大きな変化）というブログタイトルが「Denoが大幅な方針変更」というタイトルに翻訳されて日本語記事が出たため、急に方針転換をしたと誤解さ

上記のように書くと、expressパッケージがDenoで動作します。 このときexpressパッケージはNode.jsのAPIがポリフィルされた環境で動きます。もちろんその中ではNode.js標準ライブラリやrequireなどが使えるため、問題なく動くというわけです。 下の画像（例）のように、 npmインポートする側（ライブラリを使う側）のコード：これまで通りのDenoで実行される npmインポートされる側のライブラリ：Node.jsポリフィル環境で実行される という形になります。 公式ブログ投稿の中では3か月以内に90%のnpmパッケージが動作するようになる予定だと書かれています。 npmインポートが追加されると同時に、これまで実験的にサポートされていた--compatフラグ（Node.js互換モード）は削除されています。 今回削除された--compatフラグは「nodeコマンドをden

IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。 そもそもなぜフロントエンドを「ビルド」していたのか そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル（1ファイルにまとめる）していたのか 1. HTTP/1.1とモジュールシステムの相性の悪さ ブラウザにはES Moduleというモジュールシステムが導入されています。これはimport文で他のファイルを読み込むことができるシステムです。 HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。 2. ブラウザのES Module対応率の低さ ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Mod

deno deployはDeno社が公式で提供する、Deno向けのエッジコンピューティングサービスです。 deno deployの特徴 TypeScriptをトランスパイルなしでそのまま実行 deno deployはDenoの実行基盤を流用して構築されているため、TypeScriptやwasmを直接実行することができます。事前のビルドステップがないため、CI/CD等でビルド構成を設定する必要がありません。 GitHub連携 GitHubを使用している場合、GitHub Appsをリポジトリにインストールすると、push時に自動でデプロイされます。またプルリクエストが開かれた場合はプレビュー用のURLが発行されます。 自分が試した感じだと、pushしてから本番環境に反映されるまで3秒から5秒ほどで結構早いです。 GitHubリポジトリ上のファイルはDeno.readTextFile()などを

タスクランナーとは、コマンドに対してショートカットを設定しておくことができる機能です。サーバー立ち上げやビルド用のコマンドをあらかじめタスクランナーに設定しておくことで、開発体験を向上することができます。Node.jsではnpm scriptsが一般的に使われています。 Deno1.20では、タスクランナーがDeno CLI本体に入りました。基本的にはnpm scriptsと同じ機能なのですが、デフォルトでクロスプラットフォーム対応になっているなど、違う所もあります。 deno task コマンドの使い方 タスクの設定 まず、deno.json(c)でタスクの内容を設定します。 ※deno.json(c)の構文についてはこちらの記事を参照してください。 { "tasks": { // "<タスク名>": "<タスク内容>" の形で定義する // deno task hello "hello

ついにTypeScriptの構文がJavaScriptに組み込まれ、ブラウザで直接TypeScriptが動くようになりそうです。 TypeScriptとは何か？ TypeScriptと言っても、指し示す範囲が文脈によって異なります。筆者が観測した範囲では、以下の3つが「TypeScript」だと言われているようです。 言語としてのTypeScript（const a: number = 1のような構文を持つ言語） 型チェックをおこなうCLIツール（tscコマンド） 型チェックやトランスパイルを行うライブラリ（microsoft/TypeScriptリポジトリ） この記事で触れるのは、言語としてのTypeScriptの話です。const a: number = 1のような構文が、ブラウザで動くようになるという事です。 これまではどうだったか？ 以下のようなTypeScriptプログラムがあり

この記事はDeno Advent Calendar 2021とは全く関係ない記事です。 Denoの標準ライブラリを使って、Server-Sent Eventsを送信するサーバーを書いていきたいと思います。 Server-Sent Eventsとは？ Server-Sent Events（SSE）とは、サーバーからクライアントへイベントを受け渡しできる接続方法のことです。WebSocketと似ていますが、WeSocketが双方向通信なのに対し、SSEはデータがサーバーからクライアントへの1方向しか送信できないという違いがあります。 Deno標準ライブラリのサーバーでServer-Sent Eventsを送信する SSEを送信するにはReadableStreamを使用します。 import { serve } from "https://deno.land/std@0.117.0/http/m

リリーススケジュール 2021年10月12日: Deno1.15のリリース 2021年11月16日: Deno1.16のリリース 2021年12月16日: Deno1.17のリリース [TypeScript4.5] 2022年1月20日: Deno1.18のリリース 2022年2月17日: Deno1.19のリリース Denoのリリーススケジュールは基本的にv8のアップデート周期（4週間）と一致するようになっています。 11月に予定されていたDeno2.0は、来年に延期されました。 Denoに今後導入される新機能 前回の記事から大分間が空いてしまいました… 以下に挙げるのは、導入される方向で議論が進んでいるものです。タイトルでは秋verと銘打ってはいるものの、進捗状況次第では導入が来年以降に持ち越されることもあり得ます。 また、ここで取り上げるのはほんの一部です。詳しい変更内容は各リリース

DenoのHTTPサーバー+WebSocketサーバーはv1.13から高速化されました。 これに伴いAPIが変更されており、移行にはコードの変更が必要です。 時系列 deno deployを「deploy」、ダウンロードして使うdenoを「CLI」と表記します。 元々deno CLIには標準ライブラリを使用したサーバーが、deno deployにはfetch eventを使用したサーバーがあった パフォーマンス向上＆http2対応のためdeno CLIにDeno.serveHttpとDeno.upgradeWebSocketが導入された その後、CLIとの互換性のためにdeployにも両者が導入された 従来のサーバー実装であった標準ライブラリのhttpは、内部でDeno.serveHttpを使うように変更され、deployからも利用可能になった 従来のwebsocketサーバー実装であった

2021.09.14リリースのDeno v1.14で、deno.json（Denoの設定ファイル）が導入されした。 元々、DenoにはCargo.tomlやpackage.jsonのような設定ファイルが存在しませんでしたが、import-mapやtsconfig.jsonの一括管理や、lintやfmtの設定を行う目的で設定ファイルが導入されました。 この記事では、設定ファイルの書き方について解説します。 deno.jsonの特徴 Node.jsにおけるpackage.jsonやtsconfig.jsonの反省を踏まえた設計になっています。 ブラウザと同様、deno.jsonが無くても動作する（あくまでオプションという扱い） ファイル中にコメントを書く場合は、拡張子をjsoncにする必要がある 未知のプロパティを許可しない（他のプログラムの設定ファイルとして使うことはできない） 外部モジュー