ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiitaなぜエラーを収集するのか バグ探し バグを見つけて潰していくため ユーザからのバグ報告の補助 ユーザに報告の負担をかけないため エラーを取得する 取得タイミング window.onerror Promise のエラー フレームワーク毎の特定のタイミング window.onerror window.onerror にメソッドを登録しておくことでエラー発生時にそのメソッドが呼ばれる。try-catch でハンドリングしていないエラーが流れてくる。
Reactアハ体験 - Qiita
Reactはちょっとしたコツを掴むと一気に理解が進みます。 Googleのデベロッパーであり数々のReactトレーニングを手がけてきたTyler McGinnis氏によるReact "Aha" Momentsが非常に参考になるため、本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://tylermcginnis.com/react-aha-moments/ 私が技術的なコンテンツを教えたり書いたりする時の主な目標の1つは「アハ体験」を最大化することです。アハ体験は物事が突然理解できた瞬間のひらめきです。私たちは皆これを体験してきましたし、私の知る最高の教師たちは聴衆に応じて、それらの瞬間を最大化するための教えを最適化することができます。 ここ数年、私はほぼ全ての一般的なメディアでReactを教えてきました。その間、私はReact習得
Angular 2/4が狭量で遅すぎる理由 | POSTD
(注：2017/08/30、いただいたフィードバックを元に翻訳を修正いたしました。) TL;DR — AngularJSのアイデアは、2012年には妥当と言えましたが、2017年においてはそうとは言えなくなっています。JSのエコシステムは、成熟度、柔軟性、および生産性の面で、あっという間にAngularの前を通り過ぎてしまいました。現在では、webpackやフロントエンドのNPM、成熟したツールとライブラリのエコシステムを背景として、 大型チームを有する企業であっても、 ReactやVueなどの軽量なJSライブラリを使用することで、大規模で柔軟性のあるSPAを、適切な設計で維持することが容易になっています。 加えて、Angular 2/4の問題が散見された3年の開発期間や議論の余地があるアーキテクチャの決定方針が、多くの企業にこの新しいフレームワークの採用を躊躇させているようです。 201
npm v5 がリリースされた - from scratch
npm v5 The npm Blog — v5.0.0 npm に v5 がやっとリリースされました。この npm v5 は既に明日リリース予定の Node v8 にバンドルされる予定です。 かいつまんで、機能を紹介します。 Notable Changes package-lock.json!!! faster than npm v4 no more --save option Offline mode sha512 support package-lock.json!!! npm v4 まで問題だった npm-shrinkwrap の問題 を解消するための新しい lock ファイルが生まれました。 shrinkwrap は依存ライブラリを固定するための機能です。npm v4 までは shrinkwrap で固定していましたが、新しく npm v5 になってからはshrinkwrap は
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
JavaScript 製ファミコンエミュレータを公開しました - まるまるこふこふ
公開しました(過去系) github.com Demo FaithJS Screenshot 作ろうと思ったきっかけ コンピュータの仕組みについて知りたいなら NES エミュ作るのが手っ取り早いと、 優秀な人が強い事を言ってて、僕もコンピュータの仕組みについて知りたかったので、 実装しようと思いました。 まず読んだ本 コンピュータシステムの理論と実装 ―モダンなコンピュータの作り方 CPUやメモリの仕組みを大まかに知ることができる 30日でできる! OS自作入門 OSの仕組みやアセンブラの基本がわかる 自作エミュレータで学ぶx86アーキテクチャ コンピュータが動く仕組みを徹底理解！ こちらもアセンブラに慣れるために読んだ たのしいバイナリの歩き方 バイナリに慣れるために読んだ コンピュータの仕組みについて何も知識がなかったので、上記の本を読んで勉強しました 参考にしたサイト NES on
フロントエンドで使ってるものがあまり変わってない - No Regrets in Bathing
自分のスタックはあまり変わっていない。ほとんど10年のツケを払っていない。学習能力が低いせいでもあり、選んだスタックがバージョンを重ねている成果でもある。 毎回使う フレームワーク：Vue.js 消耗、などの意見が散見されたが、べつに今でも便利に使えている。 browserifyやwebpackがあれば便利だけど、なくてもいい、ってバランスが好き データフローは特に考えない。状態がそこにあるので書き換えれば良い。 あまり頭を使わなくていいのが助かる Reactの考え方は好きなのだけど、よっしゃFluxやるぞって気持ちにはならず、Reactのみでよしなにやるソリューションが広まったらいいなと思う。 ビルドシステム： browserify / watchify substackの作るものはどれも品質が高いので、もうsubstack製品だけ使っていればいいやという気持ちになりがち。余計な処理が全
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
[意訳]私がGulpとGruntを手放した理由 - Qiita
このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。 （以下、訳） 私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。 例を挙げましょう 私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mochaなどを統合するのは本当にたいへんでした。なぜでしょうか？それは、プラグインによってはドキュメントが不十分だったり、APIの一部しか公開されていなかったためです。 これらを解決しようと思えばできました。しかしなんと それらのツールを直接使用すると不具合が
![[意訳]私がGulpとGruntを手放した理由 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/12154c3563ab1e4c476ab29976daf0bf560e5aaf/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU3JUE3JTgxJUUzJTgxJThDR3VscCVFMyU4MSVBOEdydW50JUUzJTgyJTkyJUU2JTg5JThCJUU2JTk0JUJFJUUzJTgxJTk3JUUzJTgxJTlGJUU3JTkwJTg2JUU3JTk0JUIxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1iZTQ0NGZiN2E3NjgxZTk3NDhhN2VjMjJjMDJlYjM5NQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU0NzA5OTdmMTUwMmIzOTNhZmZjMzdjZTY5MmZmOWNm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dedfd6cbca21222e04e388c5b3c8fab39)
(翻訳)Mithril.jsの将来の計画 - Qiita
3月ぐらいにMLでMithril.jsの将来計画を聞かれた時の、作者のLeo Horie氏のコメントが興味深かったので翻訳してみました。ちなみに、回答されていなくて明記もされてないのですが、MLのやりとりを見ているとMithrilにはコアメンバーが4-5人はいそうです。 Andreas Söderlund 私は現在とても大きなWebのプロジェクトを開始しようとしています。少なくとも5年は使われ続けることを考慮して、なるべく将来のことについて考えておきたいと思います。例えば、5年前はタブレットとモバイルデバイスは考慮に入れることはそれほどありませんでしたが、今はそれらのサポートが絶対に必要です。 最初の質問はLeoへの質問です。Mithrilはとてもすばらしいもので、すでにそれを使うことは決定しました。しかし、LeoがMithrilに対して5年後にどのあたりを見ているのかを聞いておきたいと思
速報：仮想 DOM は殺された。誰に？ magnum.js に - Qiita
mag.module('lister', { controller: function(props) { this.item = [1, 2, 3] this.title = 'Lister' }, view: function(state, props, element) { state.h2 = { _text: state.title, _onclick: function() { state.show = state.show ? !state.show : true state.item.reverse() state.title = 'Gister' + state.show } } } }) mag.module の第一引数、lister は <div id="lister"> と対応しており、ここで両者が結ばれます。controller 関数は一度だけ呼ばれて、view 関
SLOBSERVER - L'actualité de Second Life
There are several aspects to consider when releasing a product or service into the market. With so much competition in all sectors, it might be hard for your product to stand out if you don't start by marketing it properly. Marketing, as well as how a user reacts to your product, is something that you should think of from the inception of your product to its launch. The Time to Market plays a sign
Dropify — Override your input files with style.
Before Basic HTML input file Now Your so fresh input file — Default version You can add a default value You can set the height You can combine options You can disabled the input Also with a default file You can add a max file size You can disable remove button You can use events You can destroy it Init/Destroy Multiple options are available Only portrait or square images, 2M max and 2000px max-hei
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選（lodashもあるよ） - Qiita
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選（lodashもあるよ）JavaScriptNode.js関数型言語 はじめに この記事では、関数型プログラミングを強力に後押しするライブラリ、 Underscore.jsとlodashを紹介します。 両ライブラリとも_で使用できます。 ほかのライブラリにも依存せず、 現在フロントでもサーバでもかなり人気なライブラリです。 個人的にもこれなしでは。。 といった必須なライブラリとなっています。 また、Backbone.jsといった人気なフレームワークが、 Underscoreに依存していたりします。 Underscore.js GitHub: https://github.com/jashkenas/underscore Document: http://underscorejs.o
MessageViewJS - Talking Scene JavaScript Library
<!doctype html> <head> <script src="/js/message_view.js" type="text/javascript"></script> <script> document.addEventListener("DOMContentLoaded", function() { var message = new MessageViewer({ "data": [{ "name": "生方 すみれ", "message": "はじめまして！", "img_url": "/img/character_0001.png" }] }); }, false); </script> </head> <div class="messageView" id="default"> <div class="mv-contents"> <p class="mv-name">
Gradle and Bower to Manage JS/CSS Deps | Object Partners
Gradle (and other build systems) have done a good job of managing classpath dependencies. They are effective at pulling new versions of packages to get bug fixes, et al and including dependencies in packaging. JavaScript, stylesheets and the like also have tools to manage dependencies but are not first class citizens with classpath dependencies. Bower is one tool that handles dependencies like Jav
JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog
昨年のAdvent Calendarを眺めたり、JS周りの記事を見ていると、RequireJSとか、CommonJSとか、AMD、Browserify、webpackあたりが、同じような文脈で登場するんですが、それぞれ何を指しているのかよくわからなかったため、今更ながらまとめてみます。 前提 小規模にしかJavaScriptを使っていないWebサイトでは、jQueryを使ってDomイベントで色んな処理をして、Domに反映させる。というような処理が、ごちゃっとまとめて書くことが多いかと思います。ごちゃっととは、特にDomにしか情報を保持していない状態を指していて、イメージとしてはこのようなコードです。 $(function() { # イベントハンドラ $("#btn").on("click", function(){ $.ajax({ url: "api/resources", dataT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Promiseの本
PWABuilder