JavaScript: フレームワーク React/Vue/Angularについて
フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの要素(DOM)をデータと関連づけて(データバインディング)、データの変化に応じた動的なページ構成を行います。 DOMの操作には、かつてはjQueryが用いられました(今だに、使われていることは少なくはないでしょう)。けれど、モダンブラウザが対応するECMAScript 2015(ECMAScript 6)以降でしたら、標準JavaScriptでもDOMの操作は難しくありません。 動的にページを構成するコンテンツの典型は、シングルページアプリケーション(S
現場から届けるReactプロジェクトの悩みと改善
Transcript ݱ͔Βಧ͚Δ3FBDUϓϩδΣΫτͷ Έͱվળ� 6*5���ਐԽ͢Δ�3FBDU�KT wTBLJUP !@@TBLJUP@@ � w'SPOU�&OE�&OHJOFFS� w3FBDU XFCQBDL (BUTCZ+4� w&WFOU� w#POpSF�'SPOUFOE� w'SPOUFOE�5SBJOJOH�.FFUVQ� w3FBDU�NFFUVQ� w*OTJEF�'SPOUFOE� ࠂ None *OTJEF�'SPOUFOE��� �����݄��։࠵ʂ✨ IUUQT���JOTJEF�GSPOUFOE�DPN� $'1ืूͷకΊΓ ໌ �݄����࣌�� ·Ͱʂ ·ͩؒʹ߹͏ʂʂʂ ࠂऴྃ ݱҰͭҰͭʹ3FBDUʹؔ͢Δ͕͋Δͱ͓ͬͯΔ ࠙ձͰͦΜͳͰΓ্͕Γ͍ͨ ͷ3FBDUϓϩδΣΫτͷݱͰվળ
🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする - Qiita
来たる 2 月 4 日、ついに React 16.8 の正式版がリリースされます。この React 16.8 には、アルファ版が公開されて以来常に React ユーザーたちの関心をほしいままにしてきたReact Hooksが正式版となって追加されます。 ※追記：アメリカ時間で 2 月 5 日になっても React 16.8 がリリースされませんでした。事前情報で 2 月 4 日と言ってたのに……。いつになったらリリースされるのかはよく分かりません。2 月 6 日に React 16.8 がリリースされました！ 熱心な React ユーザーの方は、当然 React Hooks の情報を常に追っており正式版がリリースされたらすぐにでも自分のコードで使いはじめる準備ができていることと思います。しかし、この記事をご覧の方々の中には React を使っているにも関わらず「React Hooks のこ
雰囲気でやってる人向けの Redux 再入門
ng-kyoto Angular Meetup #9 での発表資料です。 https://ng-kyoto.connpass.com/event/113358/
突撃！ 弊社のpackage.json 〜eurekaを支えるJavaScriptライブラリたち〜 – Eureka Engineering – Medium
この記事はeureka Advent Calendar 2018 18日目の記事です。 そろそろ2018年も終わりかけですが、皆さんいかがお過ごしでしょうか。Webチームの竹内(a.k.a. BOXP)です。 もう今年も終わりということで、この記事では我々Webチームが今年新たに導入していったJavaScriptのライブラリを紹介がてら振り返りたいと思います。 目次1. normalizr2. reselect3. redux-thunk4. webpack-bundle-analyzer5. jest6. renovate最後に1. normalizrnormalizr はReduxやFluxのStoreに格納するデータの正規化を行うライブラリです。 抽象的な言い方をしましたが要するに同じIDを持つオブジェクトを簡単に共通化出来るもので、例えば以下のようにオブジェクトを正規化します Be
React Nativeで作った新アプリについて(5日間連載) - クックパッド開発者ブログ
こんにちは投稿開発部の丸山@h13i32maruです。 今日から5日間、本ブログに投稿開発部メンバーで連載記事を書かせていただきます！ いきなり「投稿開発部で連載記事」と言われても何のことかわからないと思うので、まず投稿開発部について簡単に紹介させてもらいます。 投稿開発部は「クックパッドに投稿されるコンテンツ全般」について責任をもっている部署なのですが、中でもレシピ事業の根幹であるレシピ投稿者向けのサービス改善に力を入れています。レシピ投稿者向けのサービス改善は「どうすれば継続的に投稿したくなるのか？」「どうすれば投稿をはじめてみたくなるのか？」の2点に答えを出すことを目標に日々サービス開発に励んでいます。 そこで、本連載では投稿開発部が今年メインで取り組んでいる「クックパッド MYキッチン」という新しいアプリについて5人のメンバーで紹介させていただきます。 1日目(vol1)では「クッ
Top 10 Best React Libraries | SoftMediaLab
Almost 70% of Stack Overflow users say that React is their best loved tool and that they want to work with it on their future projects. But React doesn’t go it alone. It is followed by React UI component libraries. It is a challenge to pick the best tool. But why? And how do you solve this challenge? Let’s find out. Source According to surveys,React’s popularity significantly increased during 2017
Stateless な React Component の記法をまとめてみた - Qiita
はじめに React Component には様々な書き方があるので、自分の理解のため整理してみました。 var CommentBox = ... ReactDOM.render( <CommentBox hello="Hello, world" name="CommentBox" />, document.getElementById('content') ) 以下、CommentBox に hello と name という props を渡す stateless なコンポーネントを前提とします。 基本型 チュートリアルに出てくる書き方で、誰しもが真っ先に覚える書き方かと思います。 https://facebook.github.io/react/docs/tutorial.html var CommentBox = React.createClass({ render: functio
ReactJSとReduxの単体テストを'きちん'と書く - Qiita
React ComponentとRedux（action、reducer）のテスト ReactのComponent周りとReduxのaction周りのCIテストを行いたいと思ったので Jest+Enzymeで単体テストを書いてみました。 JestはFacebookが開発しているReactJS単体テスト用のライブラリです。 単体テストに加え、Reactのレンダリング結果をスナップショットとして保存することもできるため、 レンダリングの差分テストを行うこともできます。 EnzymeはAirbnbが開発しているReactのUnitテスト用ライブラリです。 propsにパラメータを渡したり、stateの変更を行ったりできます。 ReactJSを実践で使う時は Redux、 Matarial-UI、 redux-formを組み合わせることが多いと思います。 今回はMatarial-UI、redux-
Build a Simple Web App with Express, React and GraphQL
GraphQL and React have both become quite popular in the last few years, and it’s safe to say they go together like avocado and toast. A GraphQL server can be written in Node and lets you easily create a flexible API using JavaScript classes and functions. When a frontend developer queries the server, only the information asked for gets processed. This means you can make the backend as robust as yo
オブジェクトベースなUIデザインに取り組むための心構え｜usagimaru ⌘ Satori Maru｜note
オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す
『実践 Redux Saga』 – React, FLUX, Redux, Redux Saga – // 第21回社内勉強会 #sa_study
こんにちは。エンジニアの吉田です。 2017年1月27日（金）に開催された社内勉強会#21で、『実践 Redux Saga』というお話をしたのでブログにもまとめたいと思います。 スライドはこちら。（Slideshareにアップするとフォントが欠落してイマイチな見た目になってまう…） 要約 プロダクションの案件でRedux Sagaを導入したのでそのお話 Redux Sagaの話の前に、jQuery、React、FLUX、Redux をおさらい Redux Sagaを使うと非同期処理を取り扱えるが、その反面、データフローが複雑になる System&User Action と Reducer Action を分けることで複雑性を軽減した Action の命名規則、React, Redux, Redux Saga の責務を明確にするガイドラインをつくった みなさまがより快適なフロントエンドライフ
The Rules of React · GitHub
The Rules.md The Rules of React All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it. What Functions Are "Pure"? A number of methods in React are assumed to be "pure". On classes that's the const
Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること： actionType、action、reducerが散らばっててつらい 結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget
ReactNative + fireBaseなら爆速で開発できそうな件 - Qiita
クライアントから、SNSアプリを作りたいんだけど、と相談を受け、なるべく初期の負担を減らしつつ、素早くサービスリリースするにはどうしたらいいか調べたら、ReactNative + fireBaseが良さそうだったので、調査内容をまとめます。 とりあえずauth機能でログイン、cloud firebaseでリアルタイムチャット(react-native-firebase＋react-native-gifted-chat)の機能は、モック作って確認ずみです。 React Nativeとは React NativeはFacebookが作っているJavaScriptだけでクロスプラットフォームアプリを作れるフレームワーク。 Reactを使ってJSXでネイティブのViewを記述できる。JavaScriptでレイアウトを構成、WebViewではなくSafariと同じJavaScript Coreで動作
これからReactを勉強する人が最初に見るべきスライド７選
React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。 そこで今回は、 「Reactって最近よく聞くけど一体何？」 「jQueryと何が違うの？」 といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。 ＊もし、「このスライドもおすすめ」というものがあったら教えてください。 Reactとは？ なぜ人は必死でjQueryを捨てようとしているのか なぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンド
2015年に向けたJavaScriptアプリケーションアーキテクチャ Part 1 | POSTD
私はかつて自分はアーキテクトだと名乗ったことがあります。これを裏付けるため、今やウソだらけの複雑な話を設計しなくてはならなくなっているので、ある意味これは本当のことですね。冗談はさておき、2015年を目前としてJavaScriptコミュニティのアプリケーションアーキテクチャの状況について目を向けてみるのは有益なことだと思います。合成、関数型の境界、モジュラリティ、不変データ構造、CSPのチャネルと、その他に関連するいくつかのトピックについて書いてみたいと思います。 合成 アーキテクチャのレベルでは、JavaScriptで大規模なアプリケーションを作成する方法に関してここ数年で少なくとも一つの根本的な変更がありました。機械の細かい違いにより生み出される単一指向性の データバインディング、不変データ構造と、仮想DOM （どれも興味深い問題ですね）などを除けば、多くの開発者が一つのキーコンセプト
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
Introduction to Facebook's Flux architecture
Introduction to Facebook's Flux architectureFebruary 21, 2015 The versions of Flux and React in this article are quite old - some of this may not work If you’re like me and you wanted to go further with React, you more than likely would’ve checked out Flux, had a glance, closed the tab and then reassessed your life as a Javascript developer. If you’re not familiar with React, please checkout my ge
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
redux (redux-saga) の設計にシーケンス図を用いてみた話 - DMM inside