Introduction ECMAScriptとは何か？ECMAScriptの嘘は嘘と見抜けるように results matching "" No results matching ""
Introduction · ECMAScriptとは何か？
Introduction ECMAScriptとは何か？ECMAScriptの嘘は嘘と見抜けるように results matching "" No results matching ""
flux/ReduxのStoreの持ち方について思う事 | scratchpad
fluxもReduxもどうデータを持つかについてはあまり多く説明されてない気がします。もちろんアプリケーションによって持ち方は異なるとは思うんですが、自分用のメモとして改めて考え方を整理しておきたいと思います。 Store分割の単位：画面 vs ドメインモデル Storeを画面毎に分割すべきかドメインで分割すべきか否かという議論があると思います。個人的にはドメインモデル毎に分割して整理すべきだと考えています。過去にfluxでフルSPAを一人で開発した時は最初はある程度画面毎にStoreを分割してたんですが、すぐきつくなってきてドメインモデルで分割し直しました。 画面毎に分割すると画面が増える度にStoreを増やすことになります。しかし画面が増える度にドメインの概念やデータの種類が増えるわけではないので、この場合明らかに重複した無駄なコードを書いてる事になると思います。 もちろんアプリケーシ
ドメイン駆動Vuexで複雑さに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。走ることが楽しくなりすぎてフルマラソン完走が当面の目標です。 今回は私達が進めているUIリニューアルプロジェクトにおける、フロントエンド設計の心臓部についてご紹介したいと思います。盛り上がりつつあるものの、まだまだ実践的な情報が少ないVue界隈に少しでも貢献できましたら幸いです。 画面駆動Vuexの頃プロジェクト始動当時は私含め大規模プロダクトにVuex（さらにその他Flux状態管理も）を導入して開発を進める経験も知見もほぼない状況でした。 そして開発していく画面デザインの大枠は出揃っている状態だったので、計画も実装も画面単位で区切って進みだしていきます。 こうした状況でVuexのstoreはどのような方針で実装されていくか。正確に表現するなら、特に方針なく実装していくとどうなるか。画面ファーストで、画面から使いやすく、画面ごとに専用なs
React-Reduxのメモ化が分からない人のためにメモ化が分かるまで説明を辞めない - Qiita
背景:React-Reduxを使うときに、メモ化が重要だと理解したので情報発信することにした 開発現場にReact-Reduxを導入しておきながら、チームメンバーから「 俺の実装したコンポーネントの描画遅いんだけどどうにかしてくれ 」と言われたので、「どうにかするのはお前の仕事だぞ♡」、と思いつつ、そうも言ってはいられない状況になったので、本腰入れてドキュメント読みました。React-Reduxのパフォーマンス改善にはどうやらメモ化が重要であると思ったので説明します。色々なサイトやドキュメントは明らかに冗長な説明が多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点
React-Reduxが分からない人のためにReact-ReduxのAPIを全部説明する - Qiita
import React from 'react' import { render } from 'react-dom' import { createStore } from 'redux' import { Provider } from 'react-redux' import Button from './components/Button' import rootReducer from './reducers' const store = createStore(rootReducer) render( <Provider store={store}> <Button /> </Provider>, document.getElementById('root') ) connect of React-Redux connectの主な役割は、Providerにセットされた、Red
[フロントエンド] ReactRouter(v4)で、ログインチェック付きのルーティングを行う - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はReact Routerを用いたルーティングにおいて、ページ遷移時にログインチェックを行う方法をブログに書きたいと思います。 目次 対象のバージョン React Routerはv4以上が対象です。 何がしたいのか React.jsでアプリケーションを作成した場合に、ルーティングはReact Routerで行うことがほとんどではないでしょうか。管理画面やマイページなどのログインが必要なページを開発している場合、画面遷移時にログインチェックを行いたいという要件は良くあります。そして、ログイン済みの場合にのみそのページを表示、未ログインならログインページにリダイレクトしたい、といった振る舞いを実装する場面があります。 それをReact Routerでどのように実現するのか、についてブログを書きたいと思います。 また、他のブログでは同期的なログインチェ
![[フロントエンド] ReactRouter(v4)で、ログインチェック付きのルーティングを行う - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/a83121f1bfbb3447391c5947b78aad7f21e5902a/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F581.jpg)
I created the exact same app in React and Vue. Here are the differences.
Having used Vue at work, I had a fairly solid understanding of it. I was, however, curious to know what the grass was like on the other side of the fence — the grass in this scenario being React. I’d read the React docs and watched a few tutorial videos and, while they were great and all, what I really wanted to know was how different React was from Vue. By “different”, I didn’t mean things such a
flowtypeのUtility Typeについて その3 - Qiita
この記事ではflowtypeのv0.50.0からv0.59.0にかけて追加されたUtility Typeについて記載しています。 それ以前のバージョンで追加されたUtility Typeについては下記を参照してください。 flowtypeのUtility Typeについて その1 flowtypeのUtility Typeについて その2 $ElementType $ElementTypeはTにObjectを指定して、stringにそのキーの文字列を渡すと対応した値の型を返します。 これだけ聞くと$PropertyTypeと同じように感じますが、$PropertyTypeではキーにString Literalのみの指定だったのが、$ElementTypeではキーにStringを指定できるため適用できる範囲が広くなりました。 # Try Flow declare function getOb
flowtypeのUtility Typeについて その1 - Qiita
flowtype v0.31.0がでましたね！（既にv0.32.0もでてますけど） CHANGELOG読んでみると Added a new "magic" type called $PropertyType. This utility extracts the type of the property 'x' off of the type T. magic typeなる気になる用語があるじゃありませんか！！ どうやら$から始まる定義済みの型のことを指してるようなのですが、公式のドキュメントや過去のCHANGELOGを見てもそんなものは一切出てきません。 仕方ないので実際にコードを見てみると https://github.com/facebook/flow/blob/master/src/typing/type_annotation.ml type_annotation.mlの中に$から始
Jest · 🃏 Delightful JavaScript Testing ドキュメント
スナップショット機能で大きなオブジェクトを容易に追跡できるテストを作成できます。スナップショットはテストと一緒に、あるいはインラインに埋め込んだ状態で表示できます。
JavaScriptで関数型プログラミング！Ramda.jsのはじめかた
本記事は、Yaphi Berhanu、Vildan Softic、Jani Hartikainen、Dan Princeが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 JavaScriptがおもしろいのは、関数型言語としての側面です。JavaScriptの世界では関数は当初から第一級オブジェクトとして扱われてきました。それにより、さまざまな方法でエレガントで表現に富むコードを書くことができます。 しかし、単に関数型プログラミングの能力を持っているからといって、自動的に関数型プログラミングになるわけではありません。Ramda.jsは、JavaScriptを使って関数型プログラミングを始めるサポートをしてくれる人気のライブラリー です（GitHubで4000のスターを獲得しています）。 はじめに Ramda.jsを最
switch(true) イディオム考察 - Qiita
本稿では，switch(true) イディオムの是非について論じて行きたいと思います．なお，話をややこしくしないために，本稿では JavaScript における switch(true) イディオムのみについて考察します．（当然ですが，言語によって switch のシンタックスおよびセマンティクスは大きく異なります．例えば ruby の case はいわゆる C-like な switch とは全く異なり，フォールスルーがない点や === 演算子による柔軟性がある点などにおいて同列に語れるものではありません．） 賛否両論の switch(true) switch(true) イディオムに関しては，様々な意見があります．記事の末尾に，各所から集めて来た意見をまとめておきますので参考にしてください．ここで私が述べたいことは，このイディオムに対しては とにかく賛否両論ある ということです． いっ
Kaizen AdにおけるSPAでのi18nへの取り組みと手法について - Kaizen Platform 開発者ブログ
こんにちは。フロントエンドエンジニアのaxrossです。この記事では、弊社のサービス「Kaizen Ad」で行った "i18n" (国際化) の取り組みについて紹介したいと思います。 Kaizen Adでは、サービス提供を行う地域として日本とアメリカを同時に見据えて開発をしてきました。そのため、プロジェクト発足当初から意識して開発を始め、(クローズドな) ファーストローンチの2週間後にはこの記事で紹介するようなi18nを取り入れています。 i18nとは "Internationalization" の略で、単語の最初の文字 "I" と 単語の最後の文字 "N" との間に18文字あることからこのように略されます。 i18nをどのように考えるか? まずは、Kaizen Adを国際化するにあたって考えたことについて話したいと思います。大きく分けて2つの点をチームで徹底して意識しながら開発を進めま
Testing Common Redux Patterns in React Using AVA - Semaphore
I'm a front-end designer/developer from Zagreb, Croatia. I got into coding when I was modding Warcraft (I'm not even kidding). One of my greatest passions is bringing content to life on the web. Introduction This is the second tutorial in our series on testing React and Redux applications. If you haven’t read the first part, we encourage you to do so. Redux is a library for managing state in React
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cyclic dependency issue · Issue #193 · jquense/yup
Redux-saga pattern: flow sagas and common sagas – Hacker Noon
[redux-saga]フォームに高速で入力するとガックガクになる問題 - Qiita![[redux-saga]フォームに高速で入力するとガックガクになる問題 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4c89a9c749e3e1beed43743ca77308706867f6aa/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCcmVkdXgtc2FnYSU1RCVFMyU4MyU5NSVFMyU4MiVBOSVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MSVBQiVFOSVBQiU5OCVFOSU4MCU5RiVFMyU4MSVBNyVFNSU4NSVBNSVFNSU4QSU5QiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSVBOCVFMyU4MiVBQyVFMyU4MyU4MyVFMyU4MiVBRiVFMyU4MiVBQyVFMyU4MiVBRiVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MiU4QiVFNSU5NSU4RiVFOSVBMSU4QyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZjI4ODlkNTg1ZTFmNjI5MzEzNjZhN2U4NTUyNTY0N2U%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoaXlhbWFtb3RvJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00YTAyOWUzZTdkOTdmMWVhNWY2YmExZWI0NmZlYjY4Mw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ko44OL44Kw44Oi%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dcbdd3ab98c1d980b1545a525aad94f49)
install.html
[archived] メンテナブルな React Component を目指すための小技集 - Qiita![[archived] メンテナブルな React Component を目指すための小技集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/53aad98d3dfe5b63766a927e2734b0d273c84ed6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNzMwNyUyRnByb2ZpbGUtaW1hZ2VzJTJGMTU3MDI3NjUyNT9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9YTkwNjQ1YjE1NWFiNjlhNTI3YjI5NmYyMjUyMjhjNmQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D7ff96656d4ab6eca3700fb115f167149%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCYXJjaGl2ZWQlNUQlMjAlRTMlODMlQTElRTMlODMlQjMlRTMlODMlODYlRTMlODMlOEElRTMlODMlOTYlRTMlODMlQUIlRTMlODElQUElMjBSZWFjdCUyMENvbXBvbmVudCUyMCVFMyU4MiU5MiVFNyU5QiVBRSVFNiU4QyU4NyVFMyU4MSU5OSVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFNSVCMCU4RiVFNiU4QSU4MCVFOSU5QiU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWQxZTUxYzRmZDljNDY2OWM3MGI2MmVkNzZmNDYyM2Vh%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0ZXJyaWVyc2NyaXB0JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZjVmNWI4NjYxNTcyODNmNzFiY2YzMWU5MTkyNWMzMzM%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dfcf2f06936d2cbe1bee08c78d26872ee)
Vue.js Framework Components - Vuesax