JavaScript の原理：クロージャの真実 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
webpack(v1)とbabelでES6コードをさくっと書く - getalog
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
JavaScriptで画像から色を取り出す | 12px.com
前回の記事の ドロネー三角形分割 のスクリプトが気に入ったのでブログのヘッダに使ってみました。 単に画面上に置くだけでも良かったのですが、記事に合う色合いになったら良いなーと思ったので、ページ毎に使っている画像から色を取得して描画するようにしてみました。 Wordpressは簡単な設定でアイキャッチ画像を設定できるので、それを使用して画像を投稿しています。テンプレートにはwp_get_attachment_image_srcとget_post_thumbnail_idを使用してパスだけを読み込むように設定しておいて、それをjsに渡し、js内で画像をロードし、非表示のまま画像から色だけを取り出して、それをcanvasに描画する時に使っています。 で、画像から色をとるのがASみたいに簡単にできなくて、ちょっと回りくどい方法になってしまったのでメモ。 まずは見えないcanvasを作成して、 ca
React+ReduxのAction、Reducerを個別にテストする - Qiita
概要 Reactでユニットテストをしたく、コンポーネントのテストであれば以下の様な記事を参考にすればできそうだが、Fluxをつかったアプリで、ActionやDispatcherにロジックがある時には、それでは十分で無いと考えた。 React.js + Jest - Qiita 今回はReact+Reduxを使っているので、Action、Reducerを個別にテストする方針を考えた。テストフレームワークは、karma+jasmineを使用している。 Action テストするactionは以下の様なものを想定している。単純にAPIを叩いてresを得るというもの。 import { REQUEST, REQUEST_SUCCESS, } from 'constants'; // リソース管理はsuperagent import request from 'superagent'; functio
Material UI使ってみた - Qiita
Material UIとは Material UI GoogleのマテリアルデザインをReactベースで使えちゃう今時なCSSライブラリ おっ、これかっちょいいと思って少し触ってみました。 日本語の解説記事とかが見当たらなかったので簡単に紹介します。 Get started この辺で解説されているので、公式のドキュメントとともに参考にする感じで。 Componentの使い方とか 大別して3種類のAPIがあります。 Props Events Methods 名前の通りそれぞれ、 reactコンポーネントのrenderで要素を生成する際に利用できるprop 要素で発生するhtmlイベント（onChange,onClickなど） 要素で使える関数 になります。 使い方を見ていきます。 Props これはそのまんま。 render() { return ( <DatePicker hintText
2015年が終わるのでフロントエンド開発に使ってるツールまわりをざっと書き出してみた - ミルク色の記録
題名の通り、ざっと書き出し。 このあたりのことを相談された時に、手元のリポジトリを漁って「こんな感じでやってます」とやってたけど、 とりあえずこのURL渡して参考にしてもらうみたいなことができれば... ご注意 Xubuntu 14.04でやってるのでWindowsやOSXは未確認。 こじんまりした規模の開発で使っている構成なので、規模によっては向いていないかも。 サーバとはJSONとかのAPIでお話するだけの、SPAなフロントエンド用（ルーティングはハッシュチェンジ系向け）。 おしながき 共通用 nodeの管理 JavaScriptのLint プロジェクト用 プロジェクトディレクトリの下準備 タスクランナー HTMLと開発用Webサーバ CSSや画像ファイルなどのスタイルまわり JavaScriptまわり（モジュールバンドラ） プロダクション用のビルド テスト環境 APIサーバとつなぎな
React で使う HTTP クライアント候補として SuperAgent を試してみた - present
React と Redux には HTTP クライアントは含まれていない。 別途ライブラリを使う必要がある。 Web API を呼び出すためだけに jQuery を使うのはバカげているから、 専用のライブラリがいいね。 Browserify でビルドするから、npm にあるライブラリを使えるな。 ってことで、有名どころの SuperAgent を試してみる。 github.com とはいえ、SuperAgent を試そうにも肝心の API サーバーが無いと話にならない。 まずは express をインストール。 npm install --save express 単純な API サーバーをこしらえてみた。 // server.js var express = require("express"); // POST したデータをパースするために body-parser が別途必要 var
Sinon.JSのFakeServerでAjaxをテストする - Qiita
// jQuery + Mocha + expect.js + Sinon.JS suite('API', function() { var server; beforeEach(function() { // 疑似サーバの生成 server = sinon.fakeServer.create(); }); afterEach(function() { // スタブのXHRとかを戻す server.restore(); server = null; }); it('データが返ってくること', function(done) { var res = 200, head = {'Content-Type': 'application/json'}, body = JSON.stringify({ data: 'data' }); // レスポンスの指定 server.respondWith('P
Canvas + web workersを利用して、画像からカラーパターンを自動作成してみる | rokuro Fire
※ 前の記事（自動カラー選択ボタン（β版）のテストを開始しました）のつづき。 canvasに表示した画像から、カラーパターンを作成するスクリプトを書いてみました。処理にweb workersを利用しています。 DEMOサイト Auto ColorPicker β – rokuro fire 処理の流れ canvasで画像を読み込み、全ピクセルデータを取得 workerを作成し、ピクセルデータをworkerに渡す workerで、色取得の処理を行う workerから、取得した色データを返す UIスレッドでの処理 下記2つの処理はUIスレッド側に書きます。 canvasで画像を読み込み、全ピクセルデータを取得 workerを作成し、ピクセルデータをworkerに渡す // canvasで画像を読み込み、全ピクセルデータを取得 // canvasにはdrawImage済とする var pixel
JavaScript 配列から指定した値の近似値を取得 - Qiita
function getClosestNum(num, ar){ //近似値を保持しておく変数 var closest; //配列かどうか、要素があるか判定 if(Object.prototype.toString.call(ar) ==='[object Array]' && ar.length>0){ //まず配列の最初の要素を近似値として保持する closest = ar[0]; //配列の要素を順次比較していく for(var i=0;i<ar.length;i++){ //この時点での近似値と、指定値の差異を絶対値で保持しておく var closestDiff = Math.abs(num - closest); //読み込んだ値と比較し、差異を絶対値で保持しておく var currentDiff = Math.abs(num - ar[i]); //新しく比較した値のほうが近か
rgbaster.jsを使って画像の色を抽出してみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回は、画像からカラー情報を抽出する方法について書いてみたいと思います。 rgbaster.jsを用いた画像の色を抽出 まずは下記URLからrgbaster.jsをダウンロードします。 rgbaster.js https://github.com/briangonzalez/rgbaster.js/tree/master ダウンロードできたら、rgbaster.jsを読み込みます。 <script src="js/rgbaster.js"></script> サンプリングしたい画像に任意のidをつけてrgbaster.jsで読み込んであげましょう。 <img src="images/sample.jpg" id="sampling" height="600" width="900" alt=""> 次にRGBastarのcolorsメソッドに、第1引数でサン
React.js の 公式Tutorial を Redux を利用して書き直した。また Mocha + power-assert を利用したテストも追加 - Qiita
前回 QiitaにReact.js の React.js の公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試した で公式TutorialをECMA2015(ECMA6)を利用して書き直しを行ったのですが、ReactといえばFlux、Flux といえばRedux ということで、流行りのRedux を利用して記述したらどうなるのかを試してみました。 また 同じく流行りのテスト環境である Mocha + power-assert を利用して、テストを追加してみました。 React および Redux はテストも非常に行いやすいのを体感しました。 前回の続編として、以下GitHub で公開しています。 https://github.com/ma-tu/react-babel-gulp-browserify-tutorial/tree/es6-redux Rea
ECMAScript modulesとCommonJS modulesの使い分け - Qiita
個人の感想です。 規約 相対パスは ECMAScript modules で import/export それ以外は Common JS で require/module.exports 意味 内界 - プロジェクト内のコードはECMAScript modulesでやり取り 外界 - npmパッケージを require や、package.jsonの "main" へのexportはCommonJSでやり取り 例 const fs = require("fs"); const path = require("path"); const mkdirp = require("mkdirp"); const Promise = require("bluebird"); const debug = require("debug")("textlint:cli"); import options f
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
Draft.js - テキストエディタ開発用のReactコンポーネント MOONGIFT
Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。 さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コンポーネントDraft.jsを紹介します。 Draft.jsの使い方 Draft.jsのデモです。文字を選択して色をつけられます。 背景色を変えることもできます。 改行すると、それに合わせてテキストエリアの大きさも変化します。 リンクを追加。 機能を追加すればWYSIWYGエディタとして使えます。 Twitter風に。@や#に対して色がつきます。 数式を埋め込む機能もあります。 編集はテキストエリアで行います。 Reactなので、変更はリアルタイムに反映されます。 Draf
AngularJSでSpring Security - Qiita
2017/04/30 追記 現バージョンでは、CookieCsrfTokenRepositoryを利用したほうが簡単に実装できるはずです。 https://docs.spring.io/spring-security/site/docs/current/reference/html/csrf.html#csrf-cookie 「はじめてのSpring Boot」が面白く、これはSpring覚えねば！と、いう気分になりWebアプリを実装中。 Spring Securityを使用すると認証周りの実装がとても簡単になるようなので使ってみるかー、SPAでもなんとかなるだろうと手を出したら割と大変でした。 もっと簡単に実現できそうではあるのですが。。 フロントは2.0の移行が大変そうなAngularJSを使用しました。 テンプレートがわかりやすいのでAngular1.x系は残しておいて欲しいなあ。
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn web development | web.dev
Reactjs v0.14 changes
JavaScriptでシンタックスハイライトする入力エリアを提供するライブラリを探した - Qiita
