Angular2で描画後になにか操作したい場合 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Riot.jsでjQueryライクにDOM操作する - Qiita
Riot.jsでも、jQueryライクに$()とかで、簡単にDOM操作できないのかなと思って調べてみました。 環境は Riot.js 2.5.0 Riot.js本体のコードはどうやら短いらしいので、直接読んでみると、$()と$$（）の定義を発見。 lib/browser/tag/util.js のL.376行目くらいに以下のような記述があります。 /** * Shorter and fast way to select multiple nodes in the DOM * @param { String } selector - DOM selector * @param { Object } ctx - DOM node where the targets of our search will is located * @returns { Object } dom nodes fou
Angular パフォーマンスアップ最短最速マニュアル - Qiita
動機 Angular(2 or 4)で開発中のプロダクト(SPA)が重い JS の肥大化 起動が遅い パフォーマンスチューンしたい で、みんないろいろ調べると思うけど… AOT コンパイルとか module の最適化とか手段はいろいろあるのはわかった が、ブログエントリを読んで今開発中のプロダクトに自分で解決策を注入するのが大変 サマリ 対工数効果が高い部分に絞ってパフォーマンスチューンできる、「これさえやればOK！」みたいな進研ゼミ的マニュアルを作った(半ば覚え書きだけど) 平均起動時間1は84%減 4000msec超 -> 640ms2 JS ファイルサイズ3は23%減 2770kb -> 2153kb (Parsed Size) 最適化後の Gziped Size は 393.47kb 前提 この記事は、AngularClass/angular-starter を使ったプロダクトで実
JavaScriptでASTを使ってコードをインジェクションしてみる
10/22の技術書典3に、東京ラビットハウスでJavaScript AST本を出します。ASTを知らない人でも簡単にソースコードをハックできるようになる入門＆実用的な本です。今回の記事はその本を書いてる過程で生まれた物を記事にしたものです。 dev-injector というツールを作ったのでその過程について説明します。 ※注意: Babel系のみ説明します＆Babel7 (現時点ではまだbeta) を使っています。 ユースケース Twitterでユースケースを募集したところ 「テストフレームワークから関数フックしやすいコーディングとは？」辺りがあります。「exports.hook.method = method」とかやってますけど「もっと適切な方法（設計含む）は何処なら見つけられる？ というのを頂きました。 exportしたい・したくない、あるいは対象のコードが大きい、そもそもユニットテス
angular.io Guide: Reactive Forms - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は、Angular の公式ドキュメントのReactive Formsの章を意訳したものです｡所々抜け落ち、翻訳モレがありますがあしからずご了承を｡ バージョン 4.3.2 のドキュメントをベースにしています｡ Reactive Forms リアクティブフォームは、Reactive スタイルでフォームを作成するためのAngularのテクニックです。 このガイドでは、リアクティブフォームを用いて「Heroの詳細編集」フォームを作る手順を説明していきます｡ Reactive Formsライブサンプル/ダウンロードサンプルを試してみてく
Promise で排他制御を行う - Qiita
Promise での非同期処理時、排他制御を怠ったばっかりにバグを出してしまった、そんな経験ありませんか。私はあります。 スレッドを使う場合、Mutex や synchronized 等々、大抵排他制御を行うライブラリや構文などがセットでついてくるのだけど、Promise/A+ には無いので自前で制御する必要がある。 なので、Promise で排他制御が出来るライブラリを npm から調べ、めぼしい物二つをピックアップしてみた。 async-lock https://www.npmjs.com/package/async-lock 一番メジャーっぽいライブラリ。ダウンロード数も多い。 ロック取得時、key を指定する redis の key の set のように、key ごとに排他制御したい場合に便利 タイムアウトのサポート 待ち受けタスク数の上限のサポート インターフェイスが、acqui
elm-css で PostCSS も使える CSS in Elm - Qiita
(筆者は今では積極的にはこの手法を使っていません。詳しくは追記をご覧ください。) elm-cssライブラリのCSS生成機能とelm-css-webpack-loaderを用いることで、CSS in Elm のさまざまな恩恵にあずかれます。 はじめに なぜ CSS in Elm が必要か CSS in JS という言葉が、React界隈で使われるようになっていくらか経ちました。 CSS in JS は、本来 CSS で記述するスタイルを JavaScript で書いてしまうことで、名前空間やネスト構造が使えない不便なCSSから解放されることを目的にしています。 Elm で CSS in JS (Elm) を採用することで、従来のCSSによるスタイルにおける以下の問題を解決できます。 a. スタイルの記述が Elm コンポーネントとは別のファイルになって、配布しづらい b. CSS に名前空間
node.js + Expressでリクエスト単位でプロキシするにはrequestをpipeするだけで良い - Qiita
概要 "express proxy" で普通に検索すると、express-http-proxyとか、express-request-proxyとか言うパッケージが見つかると思います。ただ、どちらもあるサイトをまるごと別のサイトにプロキシするという目的のために作られていて、キャッシュとかインジェクションの仕組みがあって便利なものの、「あるリクエストをプロキシしたい」というシンプルな用途には向いていません。また、いずれも、URLのエンコードにバグがあって、それで苦労させられたりしました。 最初、上記のパッケージをフォークしていろいろコードをいじっていたのですが、コードを見ていたら、単にリクエスト単位でプロキシをするだけなら、Expressの機能だけで、ものすごく簡単にできるということが分かりました。要するに、requestの結果をresにパイプするだけで、プロキシできるのです。まぁ、言われてみ
jasmineとselenium-webdriverでシンプルにE2Eテストする - Qiita
用意するもの npm で以下のモジュールをインストールする jasmine selenium-webdriver どうにかしてchromedriverを入手する(Chromeで試したい場合) chromedriverという名前で(windowsだとchromedriver.exeかな？)カレントフォルダに置いておく(ほかにいい感じに管理する方法があれば教えてください・・・！) こう書く シンプルに書いています。(ほんとはasync/awaitで書きたいけど) var wd = require("selenium-webdriver"); describe("e2e test", function() { var driver; beforeAll(function () { // デフォルトだと、5秒しか待ってくれないので、20秒くらい待たせる jasmine.DEFAULT_TIMEOU
TypeScriptの正規表現にマシな型をつける - Qiita
TypeScript は静的型がウリの言語なので、もうちょっとやりようはあるのではないか。 目標：型付き正規表現 これらの問題を解決するために、キャプチャーの型の情報を埋め込んだ型 TypedRegExp<captures> を作りたい。キャプチャーの型とは、具体的には string: 通常のキャプチャー string | undefined: 後ろに ? や * がついたもの、あるいは | の一方に含まれるもの undefined: 否定先読み (?! .. ) に含まれるキャプチャー のいずれかである。例えば、 /(a)(b)?/ という正規表現のキャプチャーの型は、順に string, string | undefined となる。 captures が string, string | undefined というリストの場合（最初の例）、 r: TypedRegExp<captur
webpack -> FuseBox 移行メモ - Qiita
webpackを使っていたプロジェクトをFuseBoxに移行してみました。 バンドル時間が超速くなり、バンドルファイルサイズが超小さくなりました。 webpack FuseBox package.json package.jsonの比較です。 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.23.1", "babel-eslint": "^8.0.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.22.0", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.23.0", "css-loader": "^0.28.7", "eslint": "^4.6.1", "eslint-load
JSON Schema 中心設計 - FlowType から RAML まで - - Qiita
はじめに Web サービスの運用を続けていくと，依存関係が徐々に複雑になっていきます．そしてメンテナンスするものが増えた結果，それらが相互に乖離していく，といったことが起こりがちです． そこで今回は，JSON Schema のみをメンテナンスしていくことで，動的チェック (バリデーション)，静的チェック (FlowType)，API ドキュメント生成，スタブ作成といった様々な恩恵を享受し，品質と保守性を同時に向上させるアプローチについて書いていきます．この JSON Schema を中心に据えたエコシステムを，__JSON Schema 中心設計__と呼ぶことにします． JSON Schema の仕様については割愛しますので，必要な方は こちら をご覧下さい．また，本記事では JavaScript での事例を紹介しますが，他の言語でも同様の適用ができるかと思います． アプローチ 本記事では
【webpack2対応】俺が作り上げたSCSSのビルド環境を晒す【リントもあるよ】 - Qiita
はじめに もともと業務でscssを使うための環境を作ってたのですが、ちょっと後輩に丸投げしてた目を離した隙にwebpack周りも色々と状況が変わっていたので、これを機に色々調べ直して設定し直したりしました。 やりたかったこと webpackでscssをビルドする jsで出力されるのは困るのでcssで出力する ベンダープレフィックスは自動でつけてほしい -mozとか書きたくない リントチェック欲しいなぁ... まぁ、これはwebpackじゃなくていいか webpack2でのscssのビルド パッケージインストール まずは必要なパッケージを入れましょう。 今回scssのビルドに使ったパッケージは autoprefixer css-loader extract-text-webpack-plugin node-sass postcss-loader precss sass-loader styl
優秀なデバッガー（node-inspector）を使いたい人はnode.js v6を使い続けたほうが良いかも - Qiita
$ $ node-inspector module.js:491 throw err; ^ Error: Cannot find module '_debugger' at Function.Module._resolveFilename (module.js:489:15) at Function.Module._load (module.js:439:25) at Module.require (module.js:517:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/userName/.nodebrew/node/v8.4.0/lib/node_modules/node-inspector/lib/debugger.js:2:16) at Module._compile (module.
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
electron 上で vue.js を動かす - Qiita
Electron+Node.js+jQueryで最小構成チャット - Qiita
sourcemap を無効化して webpacker の production build を 2000% 速くする - Qiita
くそったれJavaScript - Qiita
