ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
これさえ見れば脱・JavaScript初心者！海外のYouTube動画を一挙大公開 - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、基本的なJavaScriptプログラミングが出来るようになった人向けに、さらなるステップアップを目指せる「YouTubeチャンネル」を厳選してまとめてみました！ 海外のプログラミング系YouTube動画は、有料でもおかしくない「質」の高さと豊富なコンテンツ量に魅力があり、確実にレベルアップが期待できるのでぜひ参考にしてみてください。 ■JavaScriptの勘所を勉強できるYouTubeチャンネル！ 【 Fun Fun Function 】 プログラミング動画とは思えない超ハイテンションなノリで、JavaScriptを学ぶうえで欠かせない勘所を分かりやすく教えてくれるのがコチラのチャンネル！ 「Spotify」の開発にも携わっていたというプログラマーの彼は、得意のJavaScript言語を分かりやすく伝えることに情熱を注いでおり、それは
JavaScript(React+Flux)のディレクトリ構成がガタガタになりそうだったので反省して改善する - コネヒト開発者ブログ
こんにちは。フロントエンジニアの@ry0_adachiです。 ここのところ、React + Flux Utils *1 の構成を選択することが多く、それ以外を選択することが少なくなってきました。特に大きな不満はないし、慣れてきたので良いかもな〜と思っていたのですが、開発期間が伸びてきて、アプリ自体の規模がそこそこになってくるとFacebook公式のサンプルコードのようにシンプルな構成だけではカバーしきれない状況が生まれることもあります。運用し始めてだんだんとその辺の辛さみたいなものが見えてきたのと、継ぎ接ぎな構成になるのは嫌だったので、このタイミングで1回整理して改善してみようと思いました。 Fluxについて Facebook提唱のアーキテクチャ、またはフレームワークです。データの流れを一方向にして、シンプルに状態管理が行えることがメリットとしてよく挙げられています。Fluxについてより詳
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
Reactの考え方 | React 0.13 日本語リファレンス | js STUDIO
これは、元はReactの公式ブログへ投稿されたものです。 個人的な見解になりますが、ReactはJavaScriptを使用した大規模で高速なWebアプリケーションを開発する、 最も優れた方法であると考えています。 これは、FacebookとInstagramにおいて、我々にとって良い結果をもたらしてくれています。 Reactの優れた点の1つに、アプリケーションの構築を、どのように考えさせるかという事が挙げられます。 このページでは、Reactを使用した検索可能な商品データのテーブルを構築する過程を通して、学んでいきます。 まずは、モック作りから ステップ1: UIをコンポーネント階層に分割 ステップ2: Reactの静的版の構築 ステップ3: UIステートの必要最小限構成 ステップ4: ステートを使用するべき場所の特定 ステップ5: 別(逆)データフローの追加 最後に まずは、モック作りか
jasmineでjavascriptユニットテスト 導入と基礎
JasmineとはJS用のテストフレームワークです。 Jasmineの他にもJ javascriptのテストフレームワークは色々な種類があります。認知度が高いのは以下のフレームワークでしょうか。 QUnit Mocha JsTestDriver 上記のフレームワークと比べてもJasmineは人気の高いフレームワークです。 現在案件でも使用しているので、Jasmineの導入から使い方までをおさらいしとこうと思う。 実際は、テストランナーやタスクランナーなどと組み合わせているけど、長くなりそうなので今回は基本のみ。 メリット 品質を担保できる 機能が追加された場合にエラーを検知できる メリットとしてはこんな感じ。それぞれの機能の品質は担保され、いろんな状況を考慮しながらテストを書くと変化にも強くなる。 「あの機能もつけてー」と意味分からない注文がきた場合でも、元の機能が死んでいないかを検知する
React-0.13でpropTypesを違和感なく記述する - R42日記
最近、とある業務システムの一部となるリッチ画面をReactで開発してます。 Reactは良く出来ていると思います。 できるだけステートレスにすることで安全なコードを記述するという思想は僕の好みです。 Fluxも同じく良い。『処理の流れは一方向。何も考えずにイベントを処理し続ければ良い』という、ある種のストリーミング的な発想により、非常に見通しの良い構成を実現できます。 Fluxのフレームワークは乱立気味ですが、色々比較した結果、僕はrefluxを選びました。 そんなに多機能じゃないので自分で魔改造しやすいところがナイス。 React-0.13から使えるclass構文 最近リリースされたreact-0.13からES6のclass構文を使えるようになりました。 reactに付属するJSXTranformerでパースできるようになったとは言え、 イマドキReactを使うような人は当然Babelで
JavaScript/jQueryでDOM要素が存在するか確認する方法
if ( document.getElementById("selector") != null ) { console.log("exist!"); } if ( $("selector")[0] ) { console.log("exist!"); } if ( $("selector").get(0) ) { console.log("exist!"); } if ( $("selector").length ) { console.log("exist!"); } if ( $("selector").size() ) { console.log("exist!"); } if ( $("selector").is('*') ) { console.log("exist!"); }
prototype と __proto__ - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20100929.html
檜山正幸のキマイラ飼育記 - プログラマのためのJavaScript (0)
ジジイの手習いで、JavaScriptを勉強中でございます。その動機は「結局、ブラウザベースRIAかよ」のようなこと。非ブラウザベースのリッチクライアントへの期待を失ってしまったんですね。短期的・現実的な策としては、Ajax的な手法によるRIAなのかなぁ、という気分。ただし、「短期的」が“1年”と“5年”ではえらい違いです。今のところ僕には、「短期的」の実際の期間はわかりません。 僕のJavaScript調査の結果は、「初心者でも使えてプログラマでも困惑するJavaScript 」などに書きました。これらの続きとして、「プログラマのためのJavaScript (*)」というタイトルで書こうかと予定してます。あくまで予定、気まぐれでモノグサな僕のことだから、…… “プログラマのための”というのは、C, C++, Java, C#など“普通の”プログラミング言語にある程度慣れていることを前提に
302 - JS.ORG
Dedicated to JavaScript and its awesome community since 2015
JS自動レビューツール"jswatchdog"を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone 開発チームの天野 (@ama_ch) です。すっかり春らしくなりましたね。 少し前に JS の自動レビューツール jswatchdog をオープンソースで公開しましたので、こちらで紹介させていただきます。 使い方 https://kintone.github.io/jswatchdog/ 上記の URL を開き、左側のエディタに JS コードを貼り付けるだけです。 右側に修正が必要な箇所が表示されるので、適宜修正します。 特徴 バリバリの開発者じゃなくても使いやすい一画面完結の Web インターフェース lint ツールでお馴染みの構文チェックの他、知らずに脆弱性を作り込むことを避けるため、XSS の可能性がある箇所にも警告を表示 内部的には、JS の静的構文チェックツールとして ESLint と JSHint を組み込んでいます。 さらに XSS の可能性があ
FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]
ピクシブ株式会社 Advent Calendar 2015、19日目の記事です。 qiita.com こんにちは、愛らしくも憎らしいJavaScriptを書いてご飯を食べている @geta6 です。業務では pixiv Sketch というサービスの開発や運営に携わっています。 pixiv Sketchでは、node.jsとReact/Fluxibleを使用してサーバーとクライアントを同じコードベースで動作させるIsomorphicな構成を採用しています。 このプロジェクトでコードレビューをしていて、チームメンバーがつまずきやすいと感じたのが『FluxにおけるActionとStoreのどちらに何を実装するべきか』という点でした。 そこで、本日は『ActionとStoreとの適切な責務の持たせ方』について話をしたいと思います。 ReactとFluxについておさらい 今年の4月にこんなスライド
![FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0da913cbf8a21a9b94e0b3b6024eb39bf6869768/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fg%2Fgeta6%2F20151218%2F20151218175826.png)
Web開発の未来 – React、FalcorおよびES6 | POSTD
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
React Redux Rails - (rudolph-miller)
React.js & Redux & Ruby on Railsでserver-side rendering. この記事はReact.js Advent Calendar 2015の10日目の記事であり、 仮想DOM/Flux Advent Calendar 2015の10日目の記事です. (欲張り.) Source codeはReact Rails Example. React Redux Rails See Also React Redux Rails React.js React.jsはFacebook製のJavaScriptのUI Library. Viewの状態管理をさぼれる. React.js 一人React.js Advent Calendar 2014 Redux Reduxは今一番熱いFlux architecture frameworkで状態管理をatomitにする.
JavaScriptフレームワークに対する、あるGoogle社員の争い | ReadWrite Japan
JavaScriptフレームワークに対する、あるGoogle社員の争い 開発者は楽になる、しかしそれはユーザーの負担と引き換えだ ソフトウェアの専門家マット・アサイは、JavaScriptフレームワークに対し次のように語った。 GoogleはモバイルWebを重視している。 だが、彼らはこれまでHTML5にあまりにも資金を投じてきておらず、今になってこれをカバーしようとしているところだ。 また、GoogleはインドのFlipkartの様な立ち位置が微妙なアプリをWebに引っ張り戻そうと、宗教的とも言える熱意を上げている。このことから、モバイルWebのパフォーマンス向上を劇的に向上しようとする意識についてはいうまでもない。 GoogleのモバイルWebへの関心は隠しようも無い中、これまでのモバイルWebアプリを形作ってきたJavaScriptフレームワークに対する彼らの姿勢を、我々は信じて
「JSオジサンに怒られない脱初心者JavaScript」に行ってきました - WEBデザイナー2年目
html5j-begin.doorkeeper.jp javascriptの勉強が一通り終わったので、参加してきました！ javascriptの勉強会に参加するまでの道のりが長かったぜ...(T_T) 話の内容 4名のJSオジサンからのありがたきお話＋質問タイムって感じでした。 一つずつ、つらつら書いていきます（※長文注意ですぞ！） 1.ソースレビューから学ぶ Javascript + 1 株式会社サイバーエージェントの、宗定 洋平さんのお話です。 speakerdeck.com ざっくりまとめると、以下の4点についてのお話でした。 レビューでみているポイント 「バグがない」という言葉の定義 関数名のつけ方 ステップアップするために必要なこと 印象的だったのが...ステップアップするために必要なこと...それは... 「情報処理技術者試験を勉強する」です。 な、なんじゃそりゃー！初耳です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iDangero.us
http://raphamorim.com/waterfall.js/
クロノドライブのコーディングガイドライン