[B! JavaScript] hokorobiのブックマーク

Home · takahashiakira/tech_for_web Wiki · GitHub

Techno logy for Web Developers Webエンジニアリングに関するトピックで、フロントエンドをメインにバックエンドやインフラ周りまで、個人的にまとめたドキュメントを公開してます。なんの気なしに公開していたドキュメントでしたが、最近急激に読者が増えてきて、そろそろ内容も古くなってきたこともあり今後真面目にメンテナンスや運用方法を検討中です。 ※本Wikiは内容が古かったり誤りがある可能性がありますのでご了承ください。 ※内容に致命的な問題を発見した場合はお気軽にご指摘ください。 Front-end FEのためのJS基礎これだけ覚えるべきJSの基礎現場で使うjQuery FEの実践的なJS頻出表現フロントエンド環境構築とnpm CommonJSモジュール運用 JS小規模なView設計 JSモジュール設計 ReactとRedux Reactの基礎 Reactの実践

hokorobi 2017/04/15

javascript

リンク

console.logまとめ 2016年夏 - Qiita

console.log関連についてまとめました。モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ基本引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.errorそれぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co

hokorobi 2016/08/28

JavaScript

リンク

JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して

JavaScriptのプログラミングに関するTips集。主に中級レベルの話題とノウハウを掲載する。なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード　　(JavaScriptエラー集) http://language-and-engineering.hatena blog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。ピュアJSを極める‥ JavaScriptで，クラスを継承する方法　︵複数のサブクラスから共通クラスのプロトタイプを参照する︶ JavaScriptでの例外設計　︵throw，try-catch-finally構文のイメージと利用パターン︶ JavaScriptで，動的に追加されたイベントリスナの実行順序を保

hokorobi 2014/03/12

JavaScript

リンク

JavaScript Garden

JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイドがオススメです。著者このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。貢献者貢献

hokorobi 2013/05/11

JavaScript

リンク

Rails で、Controller に定義されている action を一度に取得する方法はありますか？ - QA@IT

平素よりQA＠ITをご利用いただき、誠にありがとうございます。QA＠ITは﹁質問や回答を﹃共有﹄し﹃編集﹄していくことでベストなQAを蓄積できる、IT エンジニアのための問題解決コミュニティー﹂として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日︵金︶15:00をもちましてQA＠ITのサービスを終了することにしました。これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。QA＠ITの7年間で皆さまの知識

hokorobi 2013/03/30

JavaScript

リンク

JavaScript の this のキモチ

JavaScript︵というか CoffeeScript︶を勉強していて、this が難しいなぁと思っていました。いろいろ読んでも、﹁this は、こういう場合にはこれを指す﹂とは書いてあるんだけど、なぜそうしてあるのかが分からず、どうにも理解できなかった。例えばこのへん‥ Standard ECMA-262: ECMAScript Language Specification, Edition 5.1 (June 2011) JavaScript, JavaScript...: Understanding JavaScript’s this keyword でも規格︵上のひとつめ︶としばらく格闘して、何となくキモチがつかめた気がするので、この難しさ感を忘れないうちに書いておこうと思います。まだ JavaScript 初中級者くらいなので間違いがあるかも知れません。普通のオブジェクト指向

hokorobi 2012/12/05

JavaScript

リンク

jQuery 1.9 日本語リファレンス | js STUDIO

このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、予めご了承ください。 Ajax Ajaxに関する処理 Attri

hokorobi 2012/10/14

リンク

ちょっと高度にJavaScript／クロージャの基礎 | DevelopersIO

JavaScriptのクロージャを一言で言うと、﹁自身が定義されたスコープにおいて変数を解決する関数﹂となります。少し複雑ですが、マスターすれば何かと便利な概念なので、解説したいと思います。ちなみに、JavaScript未経験なFlex開発者にオススメしたいClosure ToolsのClosure Toolsとは別物です。まぎらわしくてすみません。例 var f = function() { var i = 0; return function() { return i++; } }(); console.log(f());// 0を出力 console.log(f());// 1を出力 console.log(f());// 2を出力変数iは、匿名関数のローカルスコープに定義されています。ローカルスコープの変数は、関数の処理が終わると無くなってしまうのが普通ですが、関数fの出力

hokorobi 2012/10/06

JavaScript

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

hokorobi 2012/07/15

JavaScript

リンク

Google I/O 2012発 JavaScript高速化Tips集の日本語訳

既に「Google I/O 2012で公開されたJavaScript高速化Tips集 | IDEA*IDEA」や「JavaScriptパフォーマンスを上げるシンプルな13の最適化 | Act as Professional – hiroki.jp by HIROCASTER」で紹介されて話題になっていたJavaScriptの高速化TIPSがhosikitiさんによって和訳されています。リストでまとめられたリストを日本語で見たいという要望に見事に応えてくれていました！ 1.コンストラクタ関数内ですべてのオブジェクトメンバを初期化する 2.常に同じ順番でオブジェクトメンバを初期化する 3.Numeric型(31bitで表現される符号付き整数)を出来るだけ使う 4.0から始まる連続した値を配列のキーとして使う 5.巨大な配列(64000個以上の要素を持つもの)は予め確保せず、必要になったら随時

hokorobi 2012/07/15

JavaScript

リンク

『JavaScriptのテスト手法』

みなさんはじめまして。 2011年11月に中途で入社し、現在はAmeba事業本部でスマートフォン版Ameba（通称デカグラフ）の開発をしている川口（facebook）と申します。 JavaScriptにおけるテストフレームワーク JavaScriptにおけるテストフレームワークとしては、有名なもので現在以下のものがあります。 ●JsUnit Javaのテストフレームワークとして有名な「JUnit」を参考に作られたテストフレームワークです。 ●QUnit もともとjQueryをテストするために開発されたフレームワークですが、現在ではjQueryへの依存が無くなっているためjQuery以外のライブラリを使ったプロジェクトでも使用できます。 ●Jasmine

hokorobi 2012/07/01

リンク

NVD3

This project is an attempt to build re-usa ble charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizable, staying away from your standard cookie cutter solutions. View more examples » GitHub Repo Download d3.v3.js. This is the only required library for NVD3. Dow

hokorobi 2012/07/01

JavaScript

リンク

null.ly - a really cool domain parked on Park.io

The domain name null.ly is being parked on Park.io. Contact the domain owner to make an offer right now...

hokorobi 2012/06/24

JavaScript

リンク

コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life

みなさんは、フルスクラッチでテトリスを作ることができますか？プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5tetris - making of HTML5tetris - making of 驚くべきことに、たったの45分でテトリスが完成！それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。実際に、こちらでテトリスをプレ

hokorobi 2012/06/24

JavaScript

リンク

サウンドプログラミング用のJavaScriptライブラリができた！！！！ - 音の鳴るブログ

とりあえず疲れた。リポジトリもめちゃくちゃだし。暴飲暴食もした。 timbre - JavaScript Library for Objective Sound Programming http://mohayonao.github.com/timbre/ 新しいデモもつくった http://mohayonao.github.com/timbre/examples/004_timbresynth.html ライブラリにはUIついていないけど、デモのときは分かりやすいのでわざわざ書いた。バッハとJavaScriptは相性が良いとおもう。JSだけに。そういえば、前につくったこれもバッハだった。関連エントリサウンドプログラミング用のJavaScriptライブラリをつくっている

hokorobi 2012/06/03

JavaScript

リンク

Hatena-Textbook/javascript-event-driven.md at master · hatena/Hatena-Textbook · GitHub

JavaScript によるイベントドリブンアジェンダ JavaScript の言語について DOM についてイベントについて jQuery について MVC アーキテクチャについてまずはじめに Just moment! Web で JS を使うとき、HTML の知識が前提となることが多い http://www.kanzaki.com/docs/htminfo.html 少なくとも「簡単なHTMLの説明」は押さえておきたい。目的講義時間は限られているので JS を学ぶ上でとっかかりをつかめることリファレンスを提示します。概念を理解言語的部分、DOM 及びイベントドリブンなプログラミング覚えようとするとクソ多いのでリファレンスひける部分は覚えない JS とはどんな言語であるか? 基本クライアントサイド=ブラウザで動く実装がたくさんあるはてなのエンジニアはみんな誰もがある程

hokorobi 2012/05/13

JavaScript

リンク

CoffeeScriptってなんぞ？

kanazawa.js v1.7 - Back to Basics -（2012年3月31日開催）で使用したスライドです。

hokorobi 2012/04/02

JavaScript

リンク

やっと理解できた！JSオブジェクト指向プログラミング再入門 | ゆっくりと…

既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、﹁おお、なるほど！﹂っていう、頭の中のスイッチがパチンッ！と入るような境地には達していませんでした。かつて私もオブジェクト指向なJavaScriptプログラミングのススメなんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事オブジェクト指向 Java

hokorobi 2012/02/07

リンク

最速な JavaScript のリファレンスマニュアルサイトをつくった - tokuhirom's blog

JavaScript のリファレンスマニュアルといえば MDN(Mozilla Developers Network) が有名ですが、MDN の資料は探索がめんどくさいし、表示が遅いということで使い勝手がわるいという問題がありました。そこで、jQuery のリファレンスマニュアルサイトとして有名なjqapi.com とおなじよような使い勝手のサイトがあったらいいのになーとおもいました。なので、つくりました。サイト自体はすべて static なデータで構成されているので、github からデータを取得すれば、イントラや自分のマシン内で閲覧することも可能となっています。なおIEでの動作確認はしていないので、うまくうごかない場合は pull-req してください。

hokorobi 2012/01/14