Next.jsのスタンドアロンモードでビルドしたイメージを Cloud Run へデプロイする
module.exports = { - experimental: { - outputStandalone: true, - }, + output: 'standalone', } Next.js の experimental features のひとつに、スタンドアロンモードがあります。 通常モードでは、本番リリース可能なビルドを用意する場合、yarn build による .next/ ディレクトリとあわせて node_modules も含めます。依存関係を解決するために必要ですね。一方スタンドアロンモードを有効にした上で yarn build するとビルド結果が異なります。.next/ディレクトリが作られる点は同じですが、そこにstandaloneディレクトリが追加されます。ここにはアプリを動かすためのファイルが依存関係も含めてすべて入っていて、.next/standalone/
JavaScript クイズ解説: NaN === NaN の結果はどうなる？
先日、このようなツイートを書きました。 久しぶりの JavaScript クイズ。 JavaScript において NaN === NaN の結果は次のうちどれになるでしょうか？ — Takuo Kihira (@tkihira) September 7, 2021 答えは 4 の「状況によって上記以外もありうる」です。でも、2 や 3 を選んだ方も、もはや正解だといって差し支えないと思います。 解説が長くなったので、ブログ記事にまとめました。 そもそも NaN とは NaN は “Not a Number” を意味する数値です。数値なのに「Not a Number」というのは違和感があるかもしれませんが、数値表現することが出来ない状態を保持するために便宜的に用意された数値、というようなものです。 NaN は、浮動小数点演算において数値では表現出来ない計算をしようとすると登場します。例えば
Backpackについて調べた - Qiita
お手伝いしているプロジェクトでBackpackなるものが使われており、はてな？と思ったので調べました。 Backpackとは？ Backpack is a minimalistic build system for Node.js projects. Backpackは、Node.jsのプロジェクトの最小限のビルドシステムだぜ！とのことです。create-react-appやNext.jsにインスピレーションを得たようで、設定ファイルの記述や追加のnpmパッケージなしで、 Babelによるトランスパイルの実行。async/await、object rest spread、class propertiesなどの構文の利用 source-mapの対応（source-map-support） nodemon的なファイル監視、再実行（Live Reloading） が、出来るようです。内部ではwe
npmjs.com で著名ソフトウェアによく似た名前のマルウェアが大量に発見された - Islands in the byte stream
Malicious packages in npm. Here’s what to do | Ivan Akulov’s blog People found malicious packages in npm that work like real ones, are named similarly real ones, but collect and send your process environment to a third-party server when you install them 訳: 悪意のあるパッケージがnpmで発見された。それらは、実際のパッケージによく似た名前で同じように動くが、パッケージのインストール時にプロセスの環境変数を外部のサーバに送信する。 発見されたパッケージの一覧は元エントリをどうぞ。このようなマルウェアである偽パッケージの一例をあげると、 ba
Google Apps Scriptの開発をモダンに行う方法 - Speee DEVELOPER BLOG
株式会社Speeeの山本です。皆様、こんにちは！ 今回ご紹介させていただくのは、Speeeで実践しているGoogle Apps Script(以下 GAS) を用いたモダンな開発手法についてです。この記事を通してGASって「便利だし使えるかも！」と思っていただければ幸いです。 Google Apps Scriptとは Google Apps Scriptは、言わずと知れたGoogleが提供するサーバサイドのスクリプト環境です。 基本的にはWebブラウザを通して開発を行います。 作業効率化に威力を発揮するGAS Speeeでは特に、管理部門の作業効率化でGASを使用しているケースが多く、例えば Slackの制限付きユーザを各種チャネルに招待するアプリケーション メーリングリストの文面生成を自動化するアプリケーション Speeeラウンジの使用状況を閲覧するアプリケーション など、様々な用途でG
Safari 9.0 の JS で「同じ関数を繰り返し実行しただけで返り値が変わる」という強烈なバグが発見されてる - Qiita
Webkit の Bugzilla で強烈なバグが報告されていると、同僚に教えて頂いた。 あまり話題になっていないものの、単純ゆえに強烈なバグだと思ったので Qiita にも公開しておく。 https://bugs.webkit.org/show_bug.cgi?id=151354 にそのバグ報告が上がっている。 最初に Google+ でやりとり があった模様。 URL のクエリ文字列から値を取り出す関数が正常に動作していないことから発覚したようだ。 その後は、簡単なテストケースに落とし込まれ jsfiddle というサイトにテストケースが公開されている。 Safari でこのページを開くと、実際に JavaScript を実行して確認できるようになっている。 続報 (2015.12.14) この記事を上げてすぐに Bugzilla の方で進展があった。 Yusuke SUZUKI さん
Big Sky :: API が小さい埋め込み向け JavaScript エンジン v7
埋め込み向けで、C言語から呼べて API が小さい JavaScript エンジン v7 を見つけました。 cesanta/v7 · GitHub https://github.com/cesanta/v7/ 特徴としては クロスプラットフォーム: Arduino から MS Windows まで、どこでも動く。 小さい: コンパイルされたコアはわずか 40KB から 200KB。 シンプルで直観的な C/C++ API: 簡単に C/C++ の関数を JavaScript 環境へエクスポート出来る。 標準: V7 は JavaScript 5.1 を実装し、Standard ECMA tests をパスする事を目指している。 パフォーマンス: V7 は非 JIT エンジンの中で最速を目指している。 創造的に利用可能: V7 は、ハードウェア(SPI、UARTなど)、ファイル、暗号化、ネッ
npmに上がっていないブラウザ向けに書かれたJavaScriptをnode.jsから雑に使うの術 - 時計を壊せ
ブラウザ向けに書かれたJavaScriptだと、windowに対してexportしていて、nodeから使いにくくて困ることがある。 nodeでも動くようなpatchを書けばいいという話ではあるが、githubにコードが上がっていないとやりにくくてつらい。 そこで、適当なObjectをcontextにして、vmでぶん回すことで、雑に解決することができた。 以下はGeoHexというライブラリのJavaScriptの実装がwindow.GEOHEXにエクスポートする実装であったために困ったので雑に解決した例。 "use strict"; var http = require('http'); var co = require('co'); var get = function (url) { return new Promise(function (resolve, error) { http.
指定期間でDOMを出し分けてくれるangular-periodを公開しました - のらねこの気まま暮らし
angular-periodとは AngularJS のDirectiveで、期間を指定するとその 期間前、期間中、期間後でDOMの表示を切り替えてるようにするものです。 例えば、なんかの応募とかで、以下の様なHTMLをテンプレートエンジンやJavaScriptなどを使って出し分けることがある時に便利です。 angularJSを使った一番お手軽なケースとしてはこんなかんじでしょうか。 angular.module("campaign", []) .controller('CampaignCtrl", function () { this.now = new Date().getTime(); this.start = new Date('2015-08-01T00:00:00').getTime(); this.end = new Date('2015-08-31T23:59:59').g
Rx.js, Immutable.js について - mizchi's blog
自分はImmutable.jsとRxをなぜ採用しなかったか、自分の考えを整理するために書き出してみる。 僕の理解が及んでいない無知のゆえのアレもあると思うので間違っていたら罵倒ブコメお願いします。 Immutalbe(.js) 扱う対象をイミュータブルにするのはたぶん間違いなく正しい。正しいが、現時点のエコシステムにおいてその必要性を示せてない。具体的に言うと、Immutable.jsの110kbのオーバーヘッドの配信負荷、読み込み負荷、開発者の学習コストを支払ったとき、それに見合う価値を提示できているのか？にまだ疑問が残る。 PureなJSでも、ただ単に目的のデータを作るだけなら、ほとんどのケースで組み込みのarray.mapとObject.assign(またはそのポリフィル)で代用できる。(勿論生成したオブジェクトに副作用を加えないことが前提になるが) あと型がない環境でImmutab
Introduction to Hariko API Server with API-Blueprint - のらねこの気まま暮らし
はい、harikoの紹介です。 harikoとは hariko harikoとはNodeJS製のAPI MockServerであり、APIドキュメンテーションツールであるAPI Blueprintのエコシステムです。 使い方 npmからインストールして下さい。 npm install -g hariko harikoはAPI-Blueprintのドキュメントをベースにレスポンスを返すAPI Serverを立ち上げるので、 まずはAPI-Blueprintの仕様に沿ったmarkdownが必要です。 # GET /api/message + Response 200 (text/plain) hello world 適当に、 docs/api/message.md とかに保存します。 harikoのサーバを立ち上げます。 CLIから以下のように打ち込んで下さい。 hariko -f 'docs
WebdriverIOならyieldでテストが書けるぞ！！！！！！！！ - マルシテイア
先日、JavaScript用E2EテストツールWebdriverIOの新バージョンがリリースされました！ webdriver.io WebdriverIO E2Eテスト用WebDriverのラッパーです 僕は↓の記事で知りました motemen.hatenablog.com Protractorとかと比べて比較的シンプルだった印象だが今回は……？？？ 新機能 今回のバージョンの目玉機能はこちら テストランナー wdio yieldでテストが書ける テストランナー wdio WebDriverIO の略ですね karmaと同じく、wdiio.conf.jsでブラウザ、フレームワーク等を指定する感じです wdio.conf.jsにSauce Labs, Browserstackのアクセスキーを書くことでこれらのサービスを簡単に使えるみたいです あとmochaのオプションも埋め込める（mocha
JavaScriptの情報の仕入れ方 - mizchi's blog
ぼくのフロントエンドの情報収集ソース | Yuhiisk みたけど多すぎて逆に機能不全になると思う。 自分が主に見てるのは次の2つ。 efclのはてなブックマーク JSer infoのazuさんのはてブ。 Echo JS - JavaScript News Hacker News のJS版みたいなもの これを読み流すんじゃなくて、LDRで一件一件丁寧にみてる。日本語圏で再生産され続ける情報に意味があるもの少ないので、上流とまとめだけみればよい。
Symbolについて - JS.next
概要 ES2015ではUndefined、Null、Boolean、Number、String、Objectの６つの型に加えて、新しい型Symbolが導入された。 シンボルはプリミティブ型で、文字列のようにプロパティのキーとして使える特徴を持つ。 振る舞い シンボルはSymbolコンストラクタを呼ぶことで作られ、その時に引数として文字列を渡せば名前を持たせることができる。 sym1 = Symbol() sym2 = Symbol('name') typeof演算子で評価すると"symbol"が返される。 typeof sym1 // "symbol" Symbolコンストラクタをnew付きで呼び出すことは出来ないが、シンボルをObjectコンストラクタに渡すことでラップすることはできる。 new Symbol() // TypeError symobj = Object(sym2) ty
JavaScript を PNG に圧縮する | Yomotsu net
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
browserifyでビルドした時のgitのコミットハッシュを埋め込む - Qiita
$ npm install -g browserify envify $ broserfy -t [envify --GIT_HASH $(git rev-parse HEAD)] index.js > bundle.js Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
XSS対策としてのES6テンプレートリテラル
XSS対策としての ES6テンプレートリテラル Shibuya.XSS Yosuke HASEGAWA ES6テンプレートリテラル ES6テンプレートリテラル ❤バッククォートで囲って改行も含められ る var x = `改行も ダブルクォート「"」も シングルクォート「'」も 使えるよ！`; alert( x ); ES6テンプレートリテラル ❤ヒアドキュメントというには少し残念 ❤円記号でのエスケープが生きてる… var x = `改行も¥nバッククォート¥`も ¥¥も使えるよ！`; alert( x ); ES6テンプレートリテラル ❤リテラル内に${...}で埋め込んだ式を評価 var name = "hasegawa"; var x = `Hello, ${name}-san`; console.log( x ); // "Hello, hasegawa-san" x = `ab
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近の Web パフォーマンス改善について知っておきたいコト
Using Scala.js with the JavaScript ecosystems
mercury/mithril.js
