webpack4への簡単なマイグレーションガイド - 技術探し
トラッキング ローダー/プラグイン作者向け 変更一覧 簡単なマイグレーションガイド #0CJS(Zero-Config JS) 環境 Node4のサポートが切れました webpack-cliへの分離 ローダー/プラグインのアップデートが必要 side-effects(old: pure-module) configファイル mode loadersからrulesへ プラグイン 変更 uglifyJS extract-text-webpack-plugin その他 コード System.import() webpackInclude/webpackExcludeのサポート モジュールタイプ CJSとESMについて 前提知識 javascript/esm さいごに まだ、公式の方で作成中の段階ですので、一旦ここにまとめます。 この記事では、loader/plugin開発側の話はしません。 me
JavaScriptでシェルスクリプトを書いて面倒な作業はサクッと片付ける
クライアントのWebサイトをSSLにアップグレードしました。証明書はワンクリックでインストールできるので難しくなかったのですが、SSLへ移行後、混在コンテンツの警告がたくさん出ました。WordPressのサイトなので、修正にはテーマディレクトリのアセットをHTTP経由でインクルードしているファイルをすべて特定する必要がありました。 以前は簡単なRubyスクリプトで自動化して対処していました。Rubyは私が最初に覚えた言語で、このようなタスクに適しているからです。しかしNodeでコマンドラインインターフェイスを作る方法で紹介したとおり、JavaScriptはブラウザーだけの言語ではなくデスクトップのスクリプトにも使えます（ほかにも用途はたくさんあります）。 この記事では、JavaScriptで再帰的にディレクトリ内のファイルにアクセスして特定の文字列を検出する方法を解説し、シェルスクリプトを
もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
この素晴らしい Vue.js に祝福を！
Vue.js Tokyo v-meetup="#3" での発表資料です。
2017年はNode.jsの達人になる！いま知っておきたいベストプラクティス10
前回の記事『10 Tips to Become a Better Node Developer in 2017（達人に学ぶ、優れたNode使いにレベルアップするための10のヒント）』では、いますぐ使える10個のNode.jsのヒントやテクニックを紹介しました。この記事もそれに続いて10個のベストプラクティスを紹介し、Nodeのスキルを次のレベルに上げられるようにしたいと思います。 以下が今回紹介する内容です。 npmスクリプトを使う：bashスクリプトを使わず、npmとNodeのスクリプトを使ったほうが管理しやすい（例：npm run build、start、test）。Nodeの開発者が新プロジェクトに取り組むには、npmスクリプトこそが唯一の真実 環境変数（process.env）を使う：process.env.NODE_ENVを、development（開発）あるいはproducti
webpack で moment.js の無駄なロケールファイルを除去する - Qiita
と書いて webpack でビルドすると、生成される bundle ファイルのサイズが非常に大きくなってしまいます。これは、moment.js が持つすべてのロケールファイルが bundle ファイルに含まれてしまうためです。ファイルサイズにシビアなフロントエンドではかなり大きな問題です。 (上図は source-map-explorer を使って生成しました） 解決策 webpack の IgnorePlugin か ContextReplacementPlugin を使えば、この問題を回避することが出来ます。 IgnorePlugin を使う場合 「デフォルトの en 以外にロケールファイルは必要ない」という場合は、IgnorePlugin が使えます。 const webpack = require('webpack'); module.exports = { //... plugi
ElasticsearchとNode.jsで全文検索エンジンを作ろう（後編）
「全文検索エンジンってどれがいい？→ElasticsearchとNode.jsで作るといい感じ」に続き、サイト内検索などに使える全文検索エンジンをElasticsearchとNode.jsで作ります。 検索エンジンの構築 データがインデックス付けされると、検索エンジンを実装する準備が整います。Elasticsearchはクエリを定義するために、Query DSLというJSONに基づいた直感的で完全な検索クエリ構造を提供しています。利用できる検索クエリの種類はたくさんありますが、本記事ではより一般的なものについて触れます。Query DSLの完全なマニュアルはここにあります。 例として説明したすべてのソースコードへのリンクを提供しています。環境を設定し、テストデータをインデックスして、リポジトリをコピーすれば、ローカルマシンのコマンドラインからnode filename.jsとするだけでサン
知ってる？Web開発者がJavaScriptでゲームを作るときのはじめの一歩
Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la
JSのソースコードが変えられない！困ったときにモンキーパッチで逃げ切る方法
他人が作ったJavaScriptのプログラムを部分的に、でも元のコードを修正せずに対応するしかない…。そんなときにモンキーパッチ。やらなきゃいけないときの対処方法を実例で。 たった1つの小さな問題点を除いてきちんと動作する、第三者のコードを使ったことはありませんか？ なぜ作成者はこんなやっかいなコンソールログを削除し忘れてしまったのだろう、そのAPIコールがもう1つちゃんとしていればうまくいったのに、と思うことがあるでしょう。こうした場合、メンテナンス担当者に変更箇所を実装させるのは困難（あるいは不可能）です。自分自身でコードを変更しようにも、ソースコードを持っていなかったり、自分でコードをホストしたくなかったりするときはどう対処すればよいか悩みます。 さあ、JavaScriptのモンキーパッチの世界を一緒に探検しましょう！ この記事ではモンキーパッチとはなにかを説明します。また、第三者が
ReactとD3.jsの組み合わせで変わる！JavaScriptアニメーション開発
人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。 D3は最高です。Webのデータビジュアライゼーション分野におけるjQueryのように、考えられるあらゆることが実現できます。 オンラインで見られる最良のWebのデータビジュアライゼーションの多くがD3を使用しています。D3は素晴らしいライブラリーですが、最近のv4のアップデートで従来よりさらに安定性が増しました。 Reactと一緒に使えば、D3はさらに便利になります。 ちょうどjQueryのように、D3は高性能ですが課題もあります。データビジュアライゼーションが大規模になればなるほど、用いるコードは複雑になり、バグを修正したりアイデアを絞り出したりするのにさらに時間がかかるようになります。 しかし
セミコロンは省略？人気スタイルガイドに学ぶJavaScriptのコーディング規則
インデントにタブとスペースのどちらを使うのがいい？ JavaScriptにセミコロンは付けるべき？ JavaScript Standard Styleを使えばそんな論争にけりがつくかもしれません。 最近、注目を集めている@ferossのJavaScriptスタイルガイド、JavaScript Standard Styleを紹介します。チーム内での開発が円滑になり、プログラミングがより楽しくなります。 JavaScriptスタイルガイドのコーディング規約は、タブとスペースのどちらが良いかといった不毛な議論を無くし、コードに一貫性を持たせてくれます。JSLintやJSHint、ESLintといったLinterで使用できる多くのスタイルガイドのうちの1つです。 もしLinterが分からなければ、SitePointの記事『A Comparison of JavaScript Linting Too
Array - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback JavaScript では、配列はプリミティブではなく、主に次のような性質を持つ Array オブジェクトです。 JavaScript の配列はリサイズ可能であり、異なるデータ型を交ぜて格納することができます。（これらの性質が望ましくない場合は、代わりに型付き配列を使用してください）。 JavaS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactで学ぶ！いまどきのWeb開発
Vim on Browser (short)