JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
関数型プログラミングはまず考え方から理解しよう
※仕様の細かいツッコミはご勘弁を…。 オブジェクト指向で解く みんな大好きオブジェクト指向では、物単位で考えます。言わずもがなですね。やり方はいろいろあると思いますが、まずお弁当という単位で集めると 唐揚げお弁当クラス 状態 主食名 唐揚げ個数 値段 … 振る舞い： つまみ食い() 値段取得() 唐揚げ個数取得() … のような感じで、弁当に必要な要素と必用な処理をひとまとまりにして扱うというのがオブジェクト指向です。 お弁当スーパークラスを作って継承で唐揚げ弁当クラスを、というように拡張を考えた設計にするというのも汎用性が必要な場合は良いと思います。 では早速コードにしてみましょう。 言語はJavaScriptにしています。 (function(){ window.onload=function(){ ////////////////// // クラスの定義 // ///////////
Promiseはどう動作するのか – Promiseを実装してみる | POSTD
目次 1. はじめに 2. Promiseの概念を理解する 幕間：行列が嫌いな女の子 2.1 Promiseとは何か？ 幕間：実行順序 2.2 Promiseと並行処理 幕間：式の抽象化 3. Promiseのからくりを理解する 3.1. Promiseで式を順序付けする 3.2. 最小限のPromise実行 4.Promiseとエラー処理 幕間：計算失敗の場合 4.1. エラーをPromiseで処理する 4.2. Promiseの失敗の伝播 5. Promiseの結合 5.1. Promiseを確定的に結合する 5.2. Promiseを非確定的に結合する 6. Promiseの実用的な理解 6.1. ECMAScript Promiseの導入 6.2. .then の分析 7. Promiseとは相性が悪いケースとは？ 8. まとめ 参考文献 追加資料 資料とライブラリ 1. はじめに
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
JavaScript開発者が一度は読むべきStackOverflow - Qiita
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
[JavaScript] 猿でもわかるクロージャ超入門 １ 問題 - DQNEO起業日記
問題です。 問題： 呼び出すたびに、1,2,3,...を返すような関数 f( )を定義せよ。 f(); // 1 f(); // 2 f(); // 3 この問題、解けますでしょうか？ 普通の関数では、できないと思います。 しかし「クロージャ」というのを使えば、このようなことができます。 クロージャって何だ？ 「クロージャ」という言葉を、プログラムの本やサイトで目にすることがありますよね。 私が最初に見たのは続・初めてのPerl 改訂版（アルパカ本）でした。 まったく理解できませんでした。 その後、404 Blog not foundやnaoyaさんのブログなどで「クロージャ」という単語を目にしました。 やはり、まったく分かりませんでした。 とどめの一撃はWikipediaの解説記事。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
試して学ぶ Backbone.js入門 | Remote TestKit
Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsの概要から、インストール方法、Modelの基本を説明していきます。 はじめに Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsはその名が示す通り、Webアプリケーションにアーキテクチャという背骨を提供することを目的としたライブラリです。直ぐに複雑なスパゲッティコードになりがちなWebアプリケーションに、Backbone.jsが提供するEvent, Model, Collection, View, Routerというコンポーネントを使うことで、Webアプリケーションに一定の構造を与えることが可能になります。 例：Backbone.jsによるアーキテクチャイメージ Backbone.jsによるWebアプリケーションの一例 様々なJavaScri
JavaScript 言語概要
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ��B&��View in English �,&��Always switch to English JavaScript はマルチパラダイムの動的言語であり、型や演算子、標準組み込みオブジェクト、メソッドがあります。その構文は Java や C 言語に由来するので、それらの言語の多くの構造が JavaScript にも同様に適用できます。 JavaScript は、オブジェクトプロトタイプやクラスによるオブジェクト指向プログラミングに対応しています。また、JavaScript は関数型プログラミングもサポートします。関数が第一級オブジェクトであり、式から容易に作成し、他のオブジェクトと同じように受け渡しすることができます。 このページは、 J
Node.jsエンジニアなら2014年内に知っておきたいPromise入門 | Tokyo Otaku Mode Blog
Promiseは非同期処理をベースにした並列処理の実装方法の一種です。Promiseでは並列処理の各タスクが必ず1回実行されることが保証され、タスクとタスクからの結果を取得する処理を分離することできます。また、タスクの並列処理／直列処理をユーザーが自由に制御することができます。 ECMAScript Language Specification 6th EditionにPromiseが追加されたことから、しばらくの間JavaScriptの非同期処理に関する話題の中心はPromiseになると思われます。 Node.jsでも既にPromise対応したモジュールも多く、Promiseでのみ非同期処理を提供しているモジュールも存在します。Promiseを使用する機会は今後必然的に増えていくでしょう。 今回のエントリーでは、Node.jsでPromiseを使用する方法を説明します。コード例を中心に理
覚醒!JavaScript
7月19日に行った「覚醒！JavaScript」勉強会で使用したスライドです。 http://connpass.com/event/7082/
あきらめるにはまだ早い！ソースコードの品質向上に効果的なアプローチ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? エンジニア組織を強くするための本を出版しました Qiitaでエンジニアリングをめぐる様々なコミュニケーションの問題とその解決策や考え方を書いてきた。それらの背後にあるエッセンスをこの度書籍として出版するに至りました。 エンジニアリング組織論への招待 ～不確実性に向き合う思考と組織のリファクタリング この書籍は、エンジニアリングを「不確実性を削減する」という第一原理で捉え直し、様々なエンジニアリングとその間のコミュニケーションをめぐる現象を説明していくものです。 はじめに この記事は数百万行の動的型付き言語のWebアプリケーションのリファ
メンテナブルなJsってなんだろう
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
Runnable - Discover Everything through Code
We’re thrilled to announce the Runnable team is joining MuleSoft. This is an incredible opportunity for us to expand our vision of empowering developers to test changes without the infrastructure bottleneck; we couldn’t be more excited to work with MuleSoft to continue our journey. As apart of this transition, we’re shutting down service for all Runnable accounts. To those we had the joy of servin
【iOS】UIWebView Hacks 〜ブラウザ開発テクニック〜
こんにちは。 Sleipnir Mobile for iPhone / iPad 開発担当の宮本です。 調べてみると、Sleipnir Mobile の最初のコミットは 2010年9月6日で、もう3年近く開発しているようです。最初はこんな貧弱な API でブラウザなんて作れるわけ無いと思っていましたが、なんとかなるものですね。今では多くのユーザーさんに使っていただけるプロダクトになりました。 今回は、この3年間で、使ってきた UIWebView の技を紹介したいと思います。詳細な方法については書きませんが、UIWebView で何ができて何ができないのかはわかるかと思います。それぞれの詳細なやり方については機会があれば書いていきたいです。 目次 長くなりそうなので、目次を用意しました。 余裕があればアップデートするので、ブックマークでもしておいてください。 UIWebView の API
『スマートフォンで動くリアルタイム3Dグラフィック』
はじめまして。 アメーバ事業本部コア室コアディベロップメントグループの新屋です。 コア室では3Dアニメーションライブラリの開発を行っています。 リアルタイム・プリレンダ問わず3Dモーショングラフィックが好きで趣味でも3Dの制作をしています。プリレンダはTAKCOMさん、WOWのdaihei shibataさん、ogaoooooさん、リアルタイムはMasato Tsutsuiさん等の作品が好きです。 リアルタイム3D 昨今のスマートフォンの処理能力の向上に伴い、webブラウザでも一昔前にPCで動作していたようなリッチなコンテンツも高速に処理できるようになりました。 スマホサービスでは必ずと言っていい程CSSやjavascriptでのUI・演出アニメーションが組込まれています。 そうしたアニメーションの表現力を引き上げる方法の一つとしてリアルタイム3Dを紹介します。 リアルタイム3Dを扱う言語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Promiseに関するパターンや命名規則 - Qiita
Contracts.js
JavaScriptユーティリティライブラリの紹介
Node.js のセキュリティの話
