ReactとAngular2の選択で迷ったときに考えたいこと - Qiita
まえがき 最近社内でLT大会がありまして、Angular2について発表したのですが（正式リリース直前でしたが）、結構内容的には、React vs Angular2みたいな内容になってたので、『（私が）ReactとAngular2の選択で迷ったときに考えたいこと』としてちょっと記事にしてみました。 ※1 この記事はあくまで両者を触ってみた『個人的な感想』になりますのであしからず。 ※2 そして、この記事は2016-09-18の時点での内容になります。 Reactはライブラリ、Angularはフレームワーク Reactが出始めた頃にはよく比較されることの多かったAngularですが、それは両者が似たような時期に盛り上がってきており、それでいてDOM周りの問題解決で謳っている機能がそれぞれちょっとずつちがっていたからかなと思っています。（それぞれDOMの構築とデータバインディングについての機能を
なぜReactなのか - しゅみは人間の分析です
なぜReactなのか React, Cyclejs, Reduxを学んだ上でこれらの技術が何を解決したのかまとめてみる。発想はオリジナルではなく、今まで私が読んだ記事から拝借した解釈などが含まれている。たぶんReact, Fluxを学んだ人にとっては当たり前の感覚を言語化しているだけの内容となる。 TL;DR Q: なぜReactなのか A: フロントエンドが自由度の高いGUIアプリケーションになった。既存の手法では自由度の高いGUI実装を人間にわかりやすく管理することが難しくなった。 自由度の高いGUIな世界 自由度(複雑さ)の低い時代ではrender済みのDOMの上にDOMを操作する(jQueryによる)UIを載せる設計でも十分だった 現代のwebフロントエンドではVisual StudioやXcodeで作るネイティブGUIと同等の複雑さを求められる時代になっている jQueryだけで
React勉強会1(2016-05-25) - Dolpenの日記
発端 やりたいと言ったら @mizchi がやってくれることになった。 今回の目標 weapons.json · GitHub メインクエスト : この json を使って、Splatoon のブキを一覧表示する機能を作る サブクエスト : 絞り込み機能を付ける サブクエスト : 検索フォームと一覧部分をサブコンポーネントに分けて、それらを管理するルートコンポーネントに state の更新内容を書き戻す 進捗 割と実践的で、構築しながら説明と言う感じだった。実際 GitHub - dolpen/react-tutorial のコミットログを見た方が何をしたかは分かりやすいのではないかと思うので大胆に割愛。 コンポーネントは何を与えられるべきか React 自体は data => view を担当するのが主機能なので、view を出力するコンポーネントの構築に、この data に当たるもの以
React v15.0 – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. We would like to thank the React community for reporting issues and regressions in the release candidates on our issue tracker. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15. As a reminder, we’re switching to major
いまどきのJavaScript事情とAngular2のはなし - UUUMエンジニアブログ
こんにちは、タナカです。 先日Angularのカンファレンスに参加させていただきました。 Angular2はもちろんですが、JavaScriptの進化についても興味深かったです。 本日の社内勉強会ではカンファレンスで得た情報を含めたいまどきのJavaScipt事情について共有させていただきました。 フレームワークはMVCからコンポーネント指向へ 一昨年リリースされたReat+Fluxが人気となり、フレームワークの注目はMVCからコンポーネント指向に変わってきました。 W3C標準化を進めているWeb Componetsにも追い風になっています。 また、昨今話題のマイクロサービスアーキテクチャーとも相性がいいです。 Web Comonentsのイメージ、各画面部品がコンポーネントとなる 引用元 Virtual DOMが流行 こちらもReactの影響ですがVirtual DOMが流行しています。
Web開発者が覚えておきたい、よく使うAngularJSのビルトインディレクティブ12選まとめ
連載目次 前回の記事、「AngularJSの理解で欠かせないコントローラーとas記法、データバインディングの基本的な使い方」では、AngularJSのコントローラーとデータバインディングについて紹介しました。今回はAngularJSが最初から持っているディレクティブ（ビルトインディレクティブ）について解説します。 なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。 AngularJSのビルトインディレクティブとは 以前の記事で解説しましたが、AngularJSではHTMLを拡張する仕組みが提供されており、これを使用して作成された機能を「ディレクティブ」と呼びます。 AngularJSには、デフォルトで多数の便利なディレクティブ（ビルトインディレクティブ）が用意されています（※以前使用した「ng-app」「ng-model」
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
TypeScript で React - present
今まで書いたサンプル程度の規模でも、 実行時に踏むまでバグに気付かないことが結構あって、 実際踏むと萎える。 React で規模の大きい SPA 作っていたらと思うとゾッとする。 コンパイル時に分かれば良いのに。 そうだ。 TypeScript で書いてみよう。 JavaScript のスーパーセットというアプローチが、 AltJS の中でも筋が良いと思っていたんだよな。 github.com TypeScript と、型定義ファイルを管理するための tsd をインストール。 npm install -g typescript npm install -g tsd React と React-DOM、 その他使っているライブラリの型定義ファイルをインストールする。 cd src tsd query react --action install --resolve tsd query rea
フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]
みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況
![フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/06141560504fa4e927919dd41de3eab52a11d032/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkoharusugiura%2F20151222%2F20151222103513.png)
バグハンターの哀しみ
MicrosoftのWebブラウザ、Internet Explorer/EdgeにはXSS攻撃からユーザーを保護するためのXSSフィルターという機能が搭載されている。XSSフィルターは、リクエストにXSS攻撃らしき文字列があり、ページ内にそれに対応する文字列が出力されている場合に、ページ内の対応する文字列の一部を書き換えることによりユーザーを保護する。この書き換え動作は安全に行われているのだろうか？答えはNoだ。今回私は、XSS脆弱性のないありふれたページで、XSSフィルターの動作を利用することで、保護するどころかXSS脆弱性を作り出すことができる手法を発見した。本講演では、XSSフィルターを利用したXSS攻撃の可能性について技術的な詳細を述べるとともに、サイト管理者はこのXSSフィルターの悪夢とどう向き合うべきかについて提案する。
Polymer v1.1のAPIまとめと周辺リソースの紹介
Googleが開発するWeb ComponentsのライブラリPolymerのバージョン1.1が、2015年8月13日にリリースされました。本記事では、Polymer v1.1のAPIの主要なAPIを解説しつつ、その参考情報を紹介していきます。 また、この記事は「Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic」を事前に読むと理解が深まりますが、これからPolymer v1.1を始めてみるということであれば、本記事単体でも参考にしてもらえればと思います。 Polymer v1.1までの変更点 v0.5からv0.8にかけての差分は前回の記事にて紹介しましたが、その1週間後にv0.9がリリースされ、さらに2週間後にv1.0がリリースされています。 0.8 released! – polymer blog 0.9 released! – po
React 0.13 日本語リファレンス | js STUDIO
このサイトについて Reactの日本語リファレンスです。 Reactの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 JUST THE UI 人々の多くはReactをMVCのVとして使用します。 Reactは他の技術スタックについて想定を行わないため、 既存プロジェクトの小規模の機能でこれを試すことは簡単です。 VIRTUAL DOM ReactはDOMを論理的に取り出し、シンプルなプログラミングモデルとより良いパフォーマンスを提供します。 また、ReactはNodeを使用するサーバー上でも描画可能であり、 React Nativeを使用したネイティブアプリも動かすことが可能です。 DATA FLOW Reactは一方向のReact
Getting started with React
The version of React used in this is quite old - certain things may be done differently in recent releases React is an insanely powerful framework by the amazing developers over at Facebook. Implementing a virtual DOM, it allows us to render components super fast whilst removing any unnecessary overhead from DOM operations. React is often said to deal with the “V” out of the MVC architecture, howe
React.jsのEventについて - Qiita
今回はDOMのイベントの扱いについて書きたいと思います。 SyntheticEvent React.jsではDOMをVirtualDOMとしてwrapしているようにDOMのイベントについてもSyntheticEventとしてwrapしていて、クロスブラウザ対応されています。 I/Fはこんな感じです boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented Number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() void stopPropagation() DOMEventTarget target Date timeStamp String type この通り、preve
Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita
Chrome 43およびそれ以降のバージョンにおいて、DOMの属性（値）がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日本語訳をしてみました。心当たりがある方は、ぜひ以下の内容を読んでいただいて、コードの修正などに取り込んでいただければと思います。 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性は今後プロトタイプチェーンに Chromeチームは、最近「DOM属性をプロトタイプチェーンに移動しています」とアナウンスしてい
最近のJavaScriptフレームワークの評価とか - albatrosary's blog
最近JavaScriptフレームワークについて色々指標のようなものを提示するブログが流行っているようだ。適材適所のもと、これは大規模向きとか小規模向きとか早いだの遅いだの。加え「gitなんか覚えなくたって死なない」とか、UXうえい！みたいな話だと思いきや内容がUIに限ったこととか。 一体最近のフロントエンドはどうなってるんだ？という雰囲気になってきましたので、少しメモ的に書きました。 JavaScriptフレームワークについて JavaScriptフレームワークの状況を見ると（フレームワークかライブラリかの議論は置いておき） DOM Web Components Virtual DOM に分かれます。JavaScriptフレームワーク初期の頃はDOMを直接操作するものが多く出現してきましたが、レスポンスなど扱いに難しい面もあり、他のアプローチが考案されました。それがWeb Compoent
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
TypeScript で実現する MVP アーキテクチャパターン - Hatena Developer Blog
こんにちは、アプリケーションエンジニアの id:nanto_vi です。先日行われた Hatena Engineer Seminar #4 で、「TypeScript で実現する MVP アーキテクチャパターン」と題する発表を行いました。当日は皆様ご清聴いただき、また懇親会でも活発な質疑をいただきありがとうございました。 内容としては、TypeScript を用いたクライアントサイド Web プログラミングの話、及び既存の JavaScript フレームワークを採用せず、MVP (Model-View-Presenter) アーキテクチャパターンにのっとり開発を進めた事例の紹介となります。以下に発表資料を加筆修正して公開するのでご参照ください。 自己紹介 id:nanto_vi (外山真) アプリケーションエンジニア JavaScript、Perl アジェンダ 少年ジャンプルーキーでの T
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう
