D3.jsで埼玉県地図を描くときの基本（topojson） - Qiita
D3.jsで日本地図を描くときの基本(geojson) D3.jsで埼玉県地図を描くときの基本（topojson) D3.jsで埼玉県の地図上に市町村ラベルを描く 前回はGeoJSONフォーマットのデータを使って、D3.js(v4)で日本地図を描く方法を紹介しました。今回はTopoJSONフォーマットのデータを使って地図を描く方法を紹介したいと思います。同じ日本地図ではアレなので、今回は埼玉県の地図を描くことにします。 今回作成した埼玉県地図 https://s3-ap-northeast-1.amazonaws.com/kuki-app-bucket/japanmap/saitama.html １．TopoJSONについて GeoJSONは経度緯度の配列をデータとして持っていて、ポイントやライン、ポリゴンを描くことができました。TopoJSONはアーク（弧線）の配列を持っています。しかも
Riot.jsのタグオブジェクトを探す - Qiita
ページ全体をRiotで作っている場合はあまり問題にならないかもしれませんが、「HTMLの中にRiotタグが散在している」かつ「Riotのマウントと別な箇所でタグを使った処理をしたい」というような状況下では、「あとからページにセットしたRiotタグのオブジェクトを取得したい」という場面が生じてきます。 これは、Riotのデータ構造をたどることで実現可能です。 Riotのデータ構造 グローバルにある状況であればグローバルのriot、const riot = require('riot');としている場合はそのriotを使えますが、riot.util.vdomに、ページへマウントしたタグオブジェクトが配列となって入っています。 そして、タグオブジェクト自体（で、今回のテーマに関係するもの）には、以下のプロパティがあります。 tag.root…対応するDOMノード tag.tags[子タグ名]…こ
[Riot.js]Maximum call stack size exceededに陥った - Qiita
Riot.jsで下記エラーに遭遇して少しだけハマりました。 Uncaught RangeError: Maximum call stack size exceeded Maximum call stack size exceededとは 再帰関数などでreturnされずに上限まで呼び出されたときに起こります。 関数を呼び出す毎にスタックに追加してるけどもう限界ってときになります。 このエラーが出た時は再帰関数のreturn漏れを疑うのが早期解決っぽいです。 再帰関数がない 私の場合、コードを確認しても再帰してる自作関数が見つかりませんでした。 となると怪しいのはRiot.jsが提供してる関数かなと思い、this.update()周りを要確認してました。 console.log()で確認しながら探していると、自作タグの呼び出し先で繰り返しthis.update()が呼ばれているらしい。 とい
![[Riot.js]Maximum call stack size exceededに陥った - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/98eb5893dd715b3cf06df4a5da36632fe23b286b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjA1MjM1JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTA4ODE0MDY1P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTE3NDYxODZlNDM0M2I4OTc0MDZhYWExZmE3ZmQyMGI5%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dfd896709b4dde5f60fd5f19b25720946%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmlvdC5qcyU1RE1heGltdW0lMjBjYWxsJTIwc3RhY2slMjBzaXplJTIwZXhjZWVkZWQlRTMlODElQUIlRTklOTklQTUlRTMlODElQTMlRTMlODElOUYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0xMDEzNmU0OTFjMThiNjEwY2Y0YTI5ZTFiMWQ0ZDE5YQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBuYWdpdG8yNSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWU5YWRjZDQ0OGFlOGEwYjUxNmE2NThlNzVmMGU3MGQ1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D5043fe2063858b087fbeb0c94cf42b96)
Angular ブラウザからiPhoneのカメラを起動して写真を撮る - Qiita
やったこと safariからiPhoneのカメラを起動する canvasで写真撮る box保存とサーバ送信する angularでやってるけど、ほとんど標準のJS使った処理なのでtypescriptをヴァニラJSに置き換えれば何でもいける気がします。 ただし、reactだと魂を震えさせるアイツが一転して抵抗勢力となりもろもろツライ感じになるのでご注意ください。 https://github.com/facebook/react/pull/9146#issuecomment-319629271 環境 カメラついてるマシン 筆者はMBP（mac book pro）のフロントカメラでざっと作りながら、iPhone7で実機確認する手順でやっています。 mediaStream API対応 ブラウザ 中核です。カメラやスクリーンシェアリング、マイクのようなビデオやオーディオ入力装置を扱うAPIです。 s
Angular Component Dev Kit 入門
はじめに 何やかんやでAngularネタを書くのはわりと久しぶりです。 長らくbetaだったAngular MaterialもいよいよRCを迎えています。 今日は、Angular MaterialのサブプロジェクトであるAngular Component Dev Kit（以下CDK）について簡単に紹介していきます。 CDKを学ぶべき理由 Angular Materialのステータスアップデート にもあるとおり、 CDKの目的は、Webのための素晴らしいコンポーネントを開発するためのツールを開発者に提供することです。これは、Material Designビジュアル言語を採用せずにAngular Materialの機能を利用したいプロジェクトに特に役立ちます。 CDKはUIライブラリ開発にありがちな機能を、コンポーネント開発基盤としてまとめたパッケージです。 「CSSをデザイナが提供してくれる
jest で Node.js の テストするなら testEnvironment: "node" を使う - Qiita
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) になり、同一性チェックに失敗するよ
React+D3.jsアプリ作成の基本 - Qiita
例えばダッシュボードとかのページを作るときに、複数のチャート Componentを組み合わせて、１画面を作る必要があります。このような時はReact+D3.jsの組み合わせが第一候補となるでしょう。しかしReactはVirtual DOMを扱うライブラリであり、D3.jsもDOM（SVG要素）を直接扱うライブラリです。この2つを組み合わせて使うには、バッディングしないように明確な仕切りを行う必要があります。大きな流れとしてはReactで作ったDOM要素を、D3.js関数に渡してチャートを描きます。DOM要素を作り出すまではReactの仕事で、そのDOM要素をもらってチャート描く関数はD3.jsの仕事です。以下が今回作ったサンプルです。 http://react-d3-app.s3-website-ap-northeast-1.amazonaws.com/ まず以下のコマンドで環境を作ります
インデント派のためのriot環境 + autoprefixer付のカスタムパーサー(webpack) - Qiita
riotが良いの どうも、効率的な仕事ぶり、充実した私生活, キャリアウーマンです さて、web開発でriotを最近ごりごり使うようになってきました。 デフォルトでpugシンタックスがサポートされてますし、特に余計な設定せずともインデントスタイルを貫けるのですが、 今回はその環境にsassを加えつつ、styleタグ内で@importしたり,autoprefixerを使えるようにするwebpack用のカスタムパーサーをご紹介します。 インデント型が好きなの 私は細胞レベルでインデントスタイルに恋してます インデントと改行を強要する言語は、瞬時にコードの構造を視覚的に理解させることができるので、結構好きです。 コードをシンプルにしようと、意識を高めてくれます。 おもうに、構造と密に関わるuiコンポーネントを記述するのに適していると思われます。 多くの方が同じ理由でマークアップテンプレートとして
Riot.jsで自分の頭の足りなさをごまかせた話 - Qiita
var createCell = function (v) { // 今月の1日をゲットする var now_date = new Date(); var today_date = new Date(now_date.getFullYear(), now_date.getMonth() + v); // 今月のデータ var today_now_date = new Date(now_date.getFullYear(), now_date.getMonth(), now_date.getDate()); // 今日のデータ var ts_base = today_date.getTime(); // timestampの作成 // カレンダーの順番は日曜日からとする var calendar_cell = []; var calendar_cell_base = []; // カレンダー
Riot.js - Qiita Advent Calendar 2017 - Qiita
Riot.jsに関するAdvent Calendar 2017版です！（昨年はこちら） Riot.jsに関することなら、どんなことでも構いません！ 皆さんでRiot.jsについて語りましょうー！
Angular JSの良質チュートリアルまとめ - Qiita
随時更新中 日本語によるAngularのTips別チュートリアル AngularJS's tutorial ・とても丁寧に作りこまれていて、わかりやすい 公式チュートリアル AngularJS ・基本困ったらここ Yeomanのチュートリアル Step 10 ・かなり質が高い。 ・自分がチュートリ作る際にも参考になる。 angular-local-storage GitHub Demo ・上記のチュートリで使われるモジュール Further Reading THE PAST, PRESENT & FUTURE OF LOCAL STORAGE FOR WEB APPLICATIONS ・これは英語だけどかなりおすすめ ・Local Storageの背景とかも理解できた MongoDBも接続したい YEOMANを使ってMEAN（MongoDB + Express.js + Angular.j
ついに jest の軍門に降った - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? もう駄目だ。ついに React 以外のプロジェクトでも Jest 一択になってしまった。 もともと自分の選択するテストツールは、むかしは jasmine、いまは mocha + chai（ときどき power-assert） をベースに周辺ツールと連携させていて、React を使うようになってしばらくして Jest を入れるようになった。ここ5年くらいのフロントエンド界隈では標準の一種だと思う。 それがどうしてこんなに Jest びいきになったのか。 その1. 楽 とにかく楽だからだ。 Jest の売りはオール・イン・ワンとゼロ・コンフ
Reduxの概念をRxJSとTypeScriptで理解する ver.2 - Qiita
Redux Advent Calendar 2016 の15日目です。ちきさんです。 前置きと反省 この記事は僕がQiitaに投稿した中で最もストックされてしまった Reduxの概念をRxJSとTypeScriptで理解する(初心者向け) をリライトしたものです。 今振り返ると前回の記事にはいくつか問題がありました。 ステートとReducerにPromiseを持ち込むのはやはり筋が良くなかった。 Actionのdispatch順を無視して非同期が解決した順に処理が流れる構造になっていた。 1に関しては当初は問題ないと思っていたのですが僕も年を取り、その考えは若気の至りだったのではないかと考えるようになった次第です。 2は要件によってはそれで良いと思うのですが、それでも基本的にはdispatch順に処理する方がより期待される挙動であろうと思った次第です。 「RxJSでReduxを書く」という
【リアルタイム共同編集】Atomで出来るようになったってよ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? GithubがAtomのパッケージに Teletypeをリリースしました！ 公式サイト：Teletype for Atom また9月には、Atomを統合開発環境にするという「Atom IDE」パッケージが出ましたね！ ->Atomに統合開発環境パッケージが出たってよ 早速どんなものか説明したいと思います Teletypeってなに？ 簡単にまとめると 「離れていても複数人で同じファイルを**リアルタイムに編集**できる」ものです。 共同編集できるとなんなの？ 例えば上司や先輩にコードレビューをしてもらうときにわざわざ対面で行う必要がなく、
ついに jest の軍門に降った - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? もう駄目だ。ついに React 以外のプロジェクトでも Jest 一択になってしまった。 もともと自分の選択するテストツールは、むかしは jasmine、いまは mocha + chai（ときどき power-assert） をベースに周辺ツールと連携させていて、React を使うようになってしばらくして Jest を入れるようになった。ここ5年くらいのフロントエンド界隈では標準の一種だと思う。 それがどうしてこんなに Jest びいきになったのか。 その1. 楽 とにかく楽だからだ。 Jest の売りはオール・イン・ワンとゼロ・コンフ
ES6の新機能: 「let」「const」宣言を調べてみた - Qiita
JavaScript はES6によっていろいろと機能が充実することになっているのですが、classとかgeneratorとかがよく取り上げられていると思っ立てたので、てっきりこれだけだと思ったのですよ。 まさか他にも機能があるとは。。。 というわけで、あまり話題に登っていないように見える新機能。。。というか新宣言について調べてみました まさかの記事書きで年越すとは・・・ 宣言が追加されてた！ JSの宣言文といえば、「var」しかなかったのですが、なんとES6にて、「let」「const」が追加されていたようです。 いまのところ、'use strict'を使わないと動きませんでした。 let ・・・ 「再宣言」が不可 まずは「let」宣言です。 こいつは端的にいうと、「再宣言ができない」宣言です。 簡単な例を以下に示しています。
JSのグラフライブラリを今選ぶならHighchartsで決まり（2020年版） - Qiita
トレンド（世界）：すべての国/過去12か月/基準としたキーワードを外さずに数値を取得 トレンド（日本）：日本/過去12か月/基準としたキーワードを外さずに数値を取得 #Highcharts 公式サイト：Interactive JavaScript charts for your webpage | Highcharts デモサイト：Demos / Stock Demos / Maps Demos / Gantt Demos GitHub：https://github.com/highcharts/highcharts npm：https://www.npmjs.com/package/highcharts CDN：https://code.highcharts.com/highcharts.js ライセンス：商用利用は有償、非営利向け無料ライセンスあり（詳細後述） 推薦しておきながら入門記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack.config.jsがわからない - Qiita
React + TypeScript (+ Electron)でアプリを書き始めるときにやってること - Qiita
React と Riot.js の書き方の比較 - Qiita
