First we’re going to need to install Webpack and a few more dependencies;
jest はデフォルトコンテキストが browser になる。 そのため axios とかだと内部に使われるhttp requestライブラリがデフォルトで XHR になる。 XHR になると、Nodeのhttpモジュールとは違い、CORSの制約などの細々した制約を受けてしまう。 受けた結果、 jestでだけNetwork Error になる、CORSのエラーとしてわかりやすいエラーが出てくれたら良いが、 Network Error とだけ返ってくる事になり、意味不明の状態で半日デバッグしていたら、jsdom/xmlhttprequest で変な問題を見つけた。 どうも origin が "null" (string の null) のときと access-control-allow-origin のヘッダに何も指定しないと null (普通のnull) になり、同一性チェックに失敗するよ
What happened?# 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: @kentcdodds Hi Kent, it looks like this npm package is stealing env variables on install, using your cross-env package as bait: pic.twitter.com/REsRG8Exsx — Oscar Bolmsten (@o_cee) August 1, 2017
はじめに AigleというPromiseライブラリを開発しています。このライブラリはベンチマーク上だけでなく実際の本番環境を考慮した高速化を実現しています。 今回はその過程でBluebirdに大変お世話になったので、なぜBluebirdが速いのか、そしてなぜAigleが速いのかついて説明したいと思います。 基本的なPromiseの知識 まず本題に入る前にPromiseの基本的なことを説明しておきます。 Promiseにはpending, fulfilled, rejectedの3つの状態があります。一度pendingから別の状態に変わった場合は、そのPromiseの状態が変わることはありません。 (引用: MDN) またPromiseは非同期であることが保証されています。この事は少し重要なので触れておきます。 new Promise(resolve => resolve(1)) // 同期
(注:2017/07/19、いただいたフィードバックを元に翻訳を修正いたしました。) ESM、CJS、UMD、AMD — どれを使うべき? 最近、 Twitter では、 ESモジュール の現状、特に、 *.mjs をファイル拡張子として導入すると決めた Node.js の現状について大騒ぎになっています。この話題は複雑で、かなりの労力を費やしてそれに専念しないと議論について行けないので、 皆が恐れと不安を抱く のも無理はありません。 古き恐れ フロントエンド開発者なら、 JavaScriptの依存関係の管理に悩まされた日々 を憶えている人も多いでしょう。あの頃は、ライブラリをベンダーフォルダにコピー&ペーストし、グローバル変数に依存し、あらゆる物を正しい順序でconcatしようとしてもネームスペースの問題に対処する必要がありました。 何年もかかって、私たちは共通モジュール形式と中央集権
On the heels of our announcement of free static deployments earlier today, we are excited to introduce a beta release of the upcoming Next.js 3.0, featuring next export, dynamic components and various bugfixes. Next.js allows you to write React applications with server-rendering, automatic code-splitting, built-in component CSS with one command. To get started, populate pages/my-route.js directory
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略:ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules(impo
Nodeプロジェクトで環境依存の設定の管理方法を紹介します。例えばDBの設定は、デプロイ環境や各ユーザの開発環境に依存するので、環境依存の設定といえるでしょう。これらの設定はコード内に埋め込まず、ユーザ各自またはデプロイスクリプトに任せるべきです。環境依存の設定をNodeプロジェクトで管理するとき、dotenvモジュールが便利です。 dotenvを使う dotenvモジュールは、.env ファイルから process.env へ環境変数をロードするモジュールです。dotenvを使うと、プロジェクトのコードから独立した環境依存の設定を、ローカル単位で管理することができます。 dotenvパッケージは npm からインストールできます。依存モジュールがゼロなのが嬉しいです。
同じソースコード、同じアプリケーションでも、デプロイによって設定が異なるものがある。 各種APIキーや、データベースの設定など。本番環境と開発環境では異なる設定を使うことが多い。 こういったものをハードコーディングするべきではない。 また、GitHubでコードを公開する場合、APIキーなどの機密情報を書くわけにはいかない。 そのような場合に使うのが、環境変数である。 環境変数の正確な定義は知らないが、コードの外から設定を行う変数、という感じだろうか。 これを利用することで、APIキー等をコードに書かずに済む。 process.env Node.jsにおける環境変数は、process.envというオブジェクトに格納される。 このオブジェクトは最初から存在しており、予め、いくつかの環境変数が入っている。 コマンドラインで確認できる。 $ node > process.env いくつか表示される
当エントリは、Schoo Advent Calendar 2016の9日目として書かれています。 @takoba と申します。Schooのエンジニア兼カレー王子を担当しております。 主にフロントエンドを主戦場としてますが、バックエンドも普通に書いてます。 むしろ最近は比重多めになってきてるので、ぼくを自由にしてくれるバックエンド得意なアプリケーションエンジニアの方絶賛募集中です!!! そんな中でフロントエンドエンジニアとしての矜持を保つために、今回はE2Eテストのデバッグに便利なツールをご紹介します。 node-inspectorの時代は終わった...? 先日Schooで取り扱っている某リポジトリで利用していたNode.jsのバージョンを大幅にアップグレードしたときのお話です。 Node.jsのデバッグに多大なる貢献をしてくれるnode-inspectorですが、そのアップグレードをした環
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 追記:2017/07/12 gist連携時の理解が間違ってたので修正 npm 5.2リリース。npmパッケージのダウンロードと実行を一度に行うCLIツールnpxが同梱された / “Release v5.2.0 (2017-07-05) · npm/npm · GitHub” https://t.co/2CXccPBqcq — Teppei Sato (@teppeis) 2017年7月11日 へー、と思って見に行ったら結構面白かったので雑な紹介を書いてみることにする。 v.5.2.0 リリースノート npxの紹介記事 この記事は紹介記事
こんにちは、フロントエンドを中心に開発しています、原 (@herablog)です。 昨年10月にアメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~という記事で、アメブロのJavaベースアプリから、Node.js・Reactベースアプリへのリニューアルについてお伝えしました。今回は、より進化した2017年版のWebアプリケーション開発に向けて、その後おこなわれた改善についてお伝えします。 https化 2016年4月に、ameblo.jpのhttps化をおこないました。セキュリティ観点としては当然のこと、SEO効果やブラウザの新しい機能の利用など、https化はWebアプリケーションのクオリティアップには必須といってよいでしょう。 まず、サブドメイン化されたサブシステムのhttps化をおこない、その後アメブロ本体のドメインをhttps化しました。ht
この入門エクササイズでは、サーバーレス API を作成します。サーバーレス API を使用すると、サーバーのプロビジョニングや管理に時間をとられる事なく、アプリケーションに集中することができます。このエクササイズの所要時間は 20 分未満で、AWS の無料利用枠内で実行できます。 はじめに、AWS Lambda コンソールを使用して Lambda 関数を作成します。次に、API Gateway コンソールを使用して HTTP API を作成します。次に、API を呼び出します。 この演習では、HTTP API を使用します。API Gateway は、より多くの機能を含む REST API もサポートしています。REST API を使用するチュートリアルについては、「REST API コンソールの開始方法」を参照してください。 HTTP API と REST API の違いの詳細については
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く