Refactoring JavaScript
If your JavaScript is a mess, frameworks can only do so much to help. No matter what framework, "compiles-to-JS" language, or library you use, bugs and performance concerns will always be an issue if the underlying quality of your JavaScript is poor. With this hands-on guide, you’ll learn how test and refactor your existing code to help reduce complexity, improve readability, and gain confidence i
少人数でのフロントエンド開発をクイックに進めるために - Qiita
この記事は 第2のドワンゴ Advent Calendar 2017 7日目の記事です。 昨日の記事は@yue82さんでRTL設計スタイルガイドのアンチパターンをやってみたでした こんにちは。ニコニコ静画でフロントエンド開発を行っているnagisioです。 今年も冬コミに落ちてしまいました 去年の記事はRe:ゼロから始めるElectron開発生活でした。Electronに関して、残念ながら最近はあまり書いてないのですが、Reactは既に趣味でも仕事でも必須なフレームワークとなりました。 本記事ではそんなReactを用いたプロダクト開発について、どのように開発を進めていくのかを追っていきます。 はじめに（宣伝枠） ニコニコ静画チームにおいて、フロントエンドでの新規開発は基本的に少人数（１〜２人程度）で行っています。比較的小規模な開発が多く、例えば直近でリリースしたのがニコニコ漫画@C93です
ESLint導入環境にprettierを追加して運用する - Kenta Katoh's Blog
Kenta Katoh's Blog 駒沢より ESLint導入環境にprettierを追加して運用する July 15, 2017 prettier というコードフォーマッタが最近OSSでよく使われていて、OSSに限らず複数人開発しているプロジェクトなどで非常に有用だと感じたので、導入した。以下はその際の覚え書き・注意点など。 prerrierとは Node.js製のコードフォーマッタ。以下のコードに対応している。 JavaScript, including ES2017 JSX Flow TypeScript CSS, LESS, and SCSS JSON GraphQL ESLintとどう違うのか 似たようなツールでESLintが思い出されると思う。 prettier公式のドキュメントにも言及がある が、ESLintのリンティングには大きく分けて二種類あって、 Formatting
2016年、サーバーサイドエンジニアがゼロからReact/Reduxを学習したときの方法を振り返る
こんにちは。スタジオ・アルカナのサーバーサイドエンジニアなっちゃん(@natsumican63)です。 この記事はReact Advent Calendar 2016の13日目の記事です。 それは2016年も後半へ差し掛かったある日のことでした… 上司「次の案件、この辺の技術使うから軽く勉強しておいてー」 つ React.js + Redux.js + redux-saga + Cordova + ES6 + Babel + OnsenUI + Gulp + Webpack ( ﾟдﾟ) (つд⊂)ｺﾞｼｺﾞｼ (；ﾟ Дﾟ) !?!? (; ﾟдﾟ)「…わ、わかりました」 ※「何でもやります！やらせてください！」が私の口癖なので、決して無茶振りしてくる弊社ではありませんよ！ほんとだよ！！ 斯くして2016年、サーバーサイドエンジニアがはじめてフロントエンドへの門戸を開くこととなった際の学
フロントエンドエンジニアなら知っておきたい、JavaScriptのログ収集方法まとめ
サーバーサイドに比べて見落とされがちな、フロントエンドのエラーログ収集。JavaScriptのログ収集、確認に役立つ手法、ツール、ライブラリーを総まとめ。 開発進行中も本番モードでの運用時も、ソフトウェアアプリケーションにおいてロギングは大切です。 サーバーを運用しているなら、サーバーサイドの言語選択にかかわりなく無数のライブラリーを利用でき、広範に及ぶストレージメカニズムやログ出力を扱う際の各種ツールも使えます。 しかし、クライアント側アプリケーションとなるとロギングは見過ごされがちで、利用できる手法もかなり限られています。 この記事ではクライアント側アプリケーション、特にJavaScriptを中心としたシングルページアプリケーション（SPA）におけるロギングの実装方法を紹介します。 コンソール エラーとメッセージのロギング方法でもっとも一般的かつ分かりやすいのは、おそらくコンソールの使
はてな教科書 JavaScript編
はてな教科書JavaScript編 講義の目的 JavaScriptについて、自分で調べて学習するための基礎知識を身につける リファレンスをひけば良い部分は覚えない 話の流れ JavaScriptの言語コア部分 構文とか WebとJSにまつわるあれこれ DOM 非同期プログラミング Ajax jQuery フロントエンド設計 Node.js 駆け足で進めるので、速すぎるなら遠慮せず言ってください！ LICENSE この作品は クリエイティブ・コモンズ表示 - 非営利 - 継承2.1日本ライセンス の下に提供されています。
2日でできる! JavaScript トレーニング - mixi engineer blog
こんにちは。SNS mixi の JavaScripter、kuniwak です。 新しい仲間たちが入社する季節になりましたね。 さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています！ 2015年度の JavaScript 研修は、Web アプリケーションの部品（モジュール）をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS
ぼく（たち）のかんがえた最新のJS開発環境 #scripty04
ぼく（たち）のかんがえた最新のJS開発環境 光野達朗, ヤフー株式会社 2015.12.15 SCRIPTY#04 http://scripty.connpass.com/event/22663/
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
JavaScriptデザインパターン – 第1部：シングルトン、コンポジット、ファサード | Adobe Developer Connection
Basic JavaScript programming knowledge. Additional required other products (third-party/labs/open source) Query Library Download / Learn この記事は、JavaScriptでよく使用されるデザインパターンに関するシリーズ記事の第1部です。デザインパターンはプログラミングにおける実証済みの手法であり、特に、大規模なJavaScriptアプリケーションを大きなグループで作成する場合に不可欠なコードの保守性、スケーラビリティ、分離性を向上させます。 このシリーズ記事の第2部では、さらに、アダプター、デコレーター、ファクトリという3つのデザインパターンを紹介します。第3部では、さらに、プロキシ、オブザーバー、コマンドという3つのデザインパターンを紹介します。 シング
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
テストできないコードをE2Eテストを使ってリファクタリングしよう
ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあるBの列のラジオボタンを自動で選ぶ」 という補助機能 $(document).ready(function () { // seq: シーケンス番号 $.each(["new_version", "old_version"], function () { $("input[name='" + this + "']").each(function (idx, elem) { if (idx == 0
軽量JSONパーサー『jq』のドキュメント：『jq Manual』をざっくり日本語訳してみました | DevelopersIO
jq Manual jqで簡単JSON加工 ｜ Developers.IO jqコマンドが実は高性能すぎてビビッた話 - beatsync.net JSONを超絶に読みやすくする jq コマンド - WebAPIバリバリ使うor開発する人必須 CLIでJSONの整形をする - ( ꒪⌓꒪) ゆるよろ日記 JSON形式の情報を様々な条件や書式として成形、フィルタリングツール『jq』。上記関連エントリで私もこのツールの存在を知る事になったのですが、ツールの簡易さ・便利さに感動しながら私もちょくちょく利用させてもらっています。 そこでこのエントリでは、jq公式ページに展開されている利用ガイド・リファレンス的な位置付けの『jq Manual』を写経がてらざっくり日本語訳してみました。ざっくり訳なのでこの部分の訳おかしい・間違ってる等ありましたら御指摘頂けると幸いです。例示されているサンプルコードも
モダンぽいJavaScriptテスト環境の構築メモ - maru source
こんにちは丸山@h13i32maruです。 ES6でアプリコード、テストコードを書いてテストをするための環境を作ったので、そのメモです。 目標 ES6で書いたアプリコードとテストコードをnpm run testでテストする 最終的な環境 最終的にはこんな環境になった。リポジトリ ECMAScript6 Google Chrome Travis CI npm traceur-compiler mocha espower-cli karma karma-cli karma-mocha karma-chrome-launcher bower power-assert 今回はgrunt/gulpのようなビルドシステムは入れていない。npm runをタスク実行のフロントとすることでタスク自体はお手軽にshで書いた。shだとwindowsが厳しいけど、まあとりあえず自分の環境用だしいいかなと。 以降で
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
米Yahoo!、国際化対応の日付、小数点、メッセージなどをアプリに組み込めるJavaScriptライブラリ「Format.JS」、オープンソースで公開。
米Yahoo!は、JavaScriptで開発するアプリケーションを国際化対応にするためのJavaScriptライブラリ「Format.JS」をオープンソースで公開しました。 アプリケーションの国際化では、表示されるメッセージを多言語対応するだけでなく、例えば小数点の表記が日本で一般的な「100.01」のようなピリオドではなく「100,01」のようにカンマを使うケースや、日付の表記に「2014/10/27」と年/月/日だけでなく月/日/年や日/月/年の順に鳴るケースなど、表記にさまざまなパターンが必要となります。 Format.JSは、多言語に対応したメッセージの差し替えだけでなく、日付や小数点の国際化にも対応したアプリケーション国際化（i18n）のためのライブラリです。 テンプレートライブラリと統合利用 Format.JSではロケールコードを指定すると自動的に対応する表記を出力してくれます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jswatchdog
Javascriptを学ぼう | unitopi - ユニトピ -
DevDocs
JavaScriptユーティリティライブラリの紹介
