JSON.stringify() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn more See full compatibility Report feedback The JSON.stringify() static method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replac
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
Map - JavaScript | MDN
const map1 = new Map(); map1.set("a", 1); map1.set("b", 2); map1.set("c", 3); console.log(map1.get("a")); // Expected output: 1 map1.set("a", 97); console.log(map1.get("a")); // Expected output: 97 console.log(map1.size); // Expected output: 3 map1.delete("b"); console.log(map1.size); // Expected output: 2 Map オブジェクトは、キーと値のペアのコレクションです。Map のキーは一度しか出現しません。Map の集合の中で一意です。Map オブジェクトはキーと値のペアで反復処理されます。f
ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog
ES2015の構文チェックと言えば ESLint ですね。 ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から 自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要があります。 ただ、さすがに一から自分でルールを構築するのは面倒なので、通常は Shareable Configs と呼ばれる機能を使い、他の人が大体いい感じにセットアップしたものを共有することができます。 eslint-config-airbnb もこの Shareable Configs の1つで、React に関する lint も含まれているのでとりあえずはここから始めるのが良さそうです。 インストールと設定 （package.json は作成済みとします） eslint-con
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート Special Sponsor slot is now vacant - Inquire now 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
webpack 4 入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記
D3.js の force layout を試してみる - 雑食性雑感雑記
概要 D3.js で Force layout を動かしてみる。 理解用に簡単なサンプルを作る。 その他、オプションを試してみる。 ラベル表示と矢印を追加。 情報 D3.js って…？ 日本語サイト D3 = Data Driven Document データに基づいてドキュメント (要は DOM) を操作するための Javascriptライブラリ。 svg を使った華麗なグラフのデモが目立つが、DOM操作のライブラリとしても優れている (と、使ってみて思った)。 Force layout force = 『力』とか『エネルギー』とか。 スターウォーズのアレ？？ 要素同士が影響し合っている状態を node (円) と link (線) で表している。 説明よりもサンプル見た方が早い。 Force-Directed Graph 作ったサンプル jsdo.it 上に置きました。 作り方とかは以下
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
switch - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月. Learn more See full compatibility Report feedback switch 文は式を評価して、一連の case 節に対してその式の値を照合し、最初に値が一致した case 節の後の文を、break 文に出会うまで実行します。一致した case の後にある文も同様に実行します。switch 文の default 節には、 case が式の値と一致しない場合にジャンプします。
JavaScriptの業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ JavaScript の簡易スキルチェックのための調査表。印刷用。 レベルは，０から４までの５段階。 （０） 非 JavaScript開発者 （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の動くものを作れるようになった段階） （３） 中級者（開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/メンターとして，主設計を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 ※なお，下記URLでは10段階に細かく分ける方法が公開されているが，それだと細かすぎてレベルが前後する可能性があり，業務上のスキルチェックは難しいかもしれない。 javascriptプログラマのレベル10 http://tech.kayac.
new Array()と[]の違い - Qiita
console.log( new Array(1,2,3) ); //1,2,3 console.log( [1,2,3] ); //1,2,3 console.log( new Array(3) ); //undefined, undefined, undefined console.log( [3] ); //3 逆に言えば、 new Array()は[3]のように整数一つだけを含む配列を作成できない []はサイズを指定して配列を作成できない ということになる。 速度面での違い…はほとんどない 先に結論を書いてしまった。エンジンにもよるし使い方にもよる。どちらが速いというものでもないので、読みやすさを優先すればよい。 完璧主義者のために、差が出るポイントをまとめてみる。 参照解決のコスト 「Array」は予約語ではないので、ローカル変数を指している可能性がある。JavaScriptエン
![new Array()と[]の違い - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c74a9da50c98908640306fa26e421f9f5676b5c3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9bmV3JTIwQXJyYXklMjglMjklRTMlODElQTglNUIlNUQlRTMlODElQUUlRTklODElOTUlRTMlODElODQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTBkNDExNmUxNzFmYThhZDAxODY4ZGY0Mzg2MjE5Mzlm%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwSGlyYWt1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kNmRlMjUyMDQ4YTJiNjhhN2Q3NDU1ZTZmMjRiNTYzYw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dc80752c766ec86c9a6ea6af908408311)
JavaScriptでCSVファイルを読み込む方法 - ポップインサイト
ここではJavaScriptからCSVファイルを読み込む方法について説明します。 JavaScriptではJSON形式のファイルがよく使われますが、CSVファイルも互換性の高さから様々な場面で利用されます。ここでは、以下のようなsample.csvを文字列として読み込み、使いやすい二次元配列に変換するプログラムについて説明します。 sample.csv 0001,itemA,500yen 0002,itemB,300yen 0003,itemC,400yen サンプルプログラム //CSVファイルを読み込む関数getCSV()の定義 function getCSV(){ var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成 req.open("get", "sample.csv", true
クラス - JavaScript | MDN
// 宣言 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } // 式（クラスは無名だが、変数に代入される） const Rectangle = class { constructor(height, width) { this.height = height; this.width = width; } }; // 式（自分の名前を持つクラス） const Rectangle = class Rectangle2 { constructor(height, width) { this.height = height; this.width = width; } }; 関数式と同様に、クラス式も無名であったり、割り当てる変数とは異なる名前を持ったりすること
d3.js超初心者向け ①→②を表現してみる - Qiita
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.chartjs.org/docs/latest/samples/
Chart.js
ES2015の新機能: 関数の新しい書き方「arrow 関数」 - Qiita
http://www.ituore.com/entry/javascript-for
HTML5 登場からみるフロントエンド開発技術の進歩 - monoe's blog - Site Home - MSDN Blogs
JavaScriptのクラス？コンストラクタ？？ - Qiita
