この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
JavaScript - Client Side - - Qiita Advent Calendar 2013 - Qiita
ブラウザやスマートフォンのWebView上で動作するJavaScriptについてのアドベントカレンダーです。 クライアント側で動くJavaScriptの事であれば、AltJSやJSライブラリ、将来のバージョンについての話題、スマートフォンのWebViewについての話題などでもokです
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
Introduction | Human JavaScript
Human JavaScript By: @HenrikJoreteg Build powerfully simple browser apps. You can read the entire book free online or buy the ebook for $39. Video tutorials are available at: learn.humanjavascript.com. If you find it valuable, please consider buying it or giving it to a friend to support our ongoing efforts. If you have questions or feedback ping me on twitter or hop into the Ampersand.js project
ベストなユーザエクスペリエンスを実現するJavaScriptの課題と可能性 - ワザノバ | wazanova
https://www.youtube.com/watch?v=p2F-128e3sI 1 comment | 2 points | by WazanovaNews ■ comment by Jshiike | 33分前 Socket.ioのクリエーターとして知られるGuillermo RauchのBrazilJS 2013での講演です。理想のシングルページアプリをつくろうとすると、JavaScriptが損なってしまうケースはあるとしながらも、一方で、多いに可能性を感じさせるトレンドもあるとして、最優先であるユーザエクスペリエンスを向上させるポイントを紹介しています。 1) 課題 スクリプトやCSSにブロックされることで、レンダリングの際にブランクページを表示してしまう。 Webスクレイピングというコンセプトを壊してしまう。サーバレンダリングしない限りは、フロント側はスムーズにスクレイピ
【JavaScript】 MutationObserverの使い方 個人的まとめ - はりをきば
DOMの変更を検知するイベントが非推奨になり 代わりに新しく作られたMutationObserverなるもの。 MutationObserver - Web API インターフェイス | MDN https://developer.mozilla.org/ja/docs/Web/API/MutationObserver DOM変更検知は結構よく使うもの（特にユーザースクリプト）なのに 日本語の解説サイトが↑のMDNとMSDN、ここくらいしかなく その都度ググったり手探りで片っ端から試すのが面倒なので以下に自分用にまとめる。 コンストラクタ まずインスタンスを作る。 window.MutationObserverコンストラクタの引数に、DOM変更を検知した際に実行する関数を渡す。 function omega(data1, data2) { alert("ﾜﾚﾊﾒｼｱﾅﾘ"); consol
[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
React.js and Dynamic Children - Why the Keys are Important
React.js and Dynamic Children - Why the Keys are Important … and check why 5600+ Rails engineers read also this React.js and Dynamic Children - Why the Keys are Important Recently I’ve been building a pretty dynamic interface based on google analytics data for one of our customers. There was a bug that I couldn’t quite figure out because of my wrong understanding of how react works. In the end it
Ideal Image Slider - Quite simply the ideal Image Slider in vanilla JS
HTML5 (SEO optimised), CSS3 transitions, Touch/swipe support, Responsive, HiDPI (retina) support, ARIA support. Need I say more?The aim behind the Ideal Image Slider was to create a slider which has just the right amount of features, with no bloat and be easy to extend so that more features can be added as "extensions".
サーバサイドエンジニアでも押えておきたい！コアJavaScriptの基本知識 - Qiita
はじめに WEBアプリケーション開発において ブラウザ側 で何かをしたい場合、ブラウザで唯一動作する言語といっていい JavaScript を触らざるを得ません。ただ JavaScript は理解してしまえば難しくないものの、 サーバサイド側の言語と違う特徴 (特に関数まわり) があるため、慣れないうちは混乱することが多いのかなと思います。 私もまだ JavaScript を学び始めて日が浅く（本職はサーバサイド側のエンジニア）、また JavaScript での業務経験もそれほど豊富ではないのですが、 サーバサイドエンジニア側の視点 で、とっかかりとして これだけ知っていれば 理解が捗るだろうというものを挙げてみました。 ですので必ずしも網羅性はなく、ブラウザに関する機能（クライアントサイドAPI）についても触れていません（対象はコアJavaScript言語《ECMAScript5相当》）
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
AltJSの選び方フローチャート - Qiita
JavaScriptわかる - YES 型がほしい - YES Flash/ActionScript3が青春だった - YES Haxe - NO DeNAに勤めている - YES JSX - NO TypeScript - NO Ruby or Python が好き - YES coffee-script - NO クラスはほしい - YES EcmaScript6(Traceur Compiler) or CoffeeScript - NO JavaScriptの文法に不満がある - YES https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS - NO JavaScript書けよ - NO 関数型わかる - YES 自分の好きな言語に深く精通している - YES 好きな言
Why does React scale? - JSConf 2014
JavaScript: Past, Present, and Future - NDC Porto 2020
OSCON - React Architecture
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
ちょっとしたフロントエンド開発のセットアップ - Qiita
最近だとGrunt使ったりgulp使ったり、またはGoogleのWeb Starter Kit使ったりしてセットアップすることが多いと思います。 ただ、何かを新しいフレームワークを試したりしたいだけのときにこれらの設定ファイルとか無駄に増えるのもイヤだなと思ったりしていて、最近はbrowserifyとbeefy使ってやっています。 https://www.npmjs.org/package/browserify https://www.npmjs.org/package/beefy 各種変換とLiveReloadが出来れば十分なので。 例はこんな感じ。 https://github.com/koba04/react-boilerplate 設定ファイルがpackage.jsonだけになるのでシンプルです。 package.json 設定はこんな感じでしておくだけです。scriptの設定をし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
angular・backbone・knockoutの比較／印象まとめ - Qiita
大規模 JavaScript その設計と実装と現実
For Sale! ampersandjs.com
Nyle Engineering Blog
Tristan (T4T5)
