概要 社内プロジェクトの大半がReactとGoで開発されています。 社内ライブラリが沢山増えてきたので、その中でもOSSをまとめてみました。 画面があるものはStorybookを使って「デモページ」として公開しています。 npm パッケージ @gemcook/table Reactのテーブルを簡単に作れるようにしたものです。 大量のデータをさばけるようになっていて、IE11でもサクサク動くように作っています。 7,738ダウンロードされておりよく伸びてるので、もっと開発に力入れていきたいです。 デモページ: https://table.storybook.gemcook.com GitHub: https://github.com/gemcook/table @gemcook/pagination Reactで簡単にページネーションを表示することができます。 データを流し込めばすぐにページ
この記事は クライアントサイドのモデルとは何か 前編 ~ クライアントサイド MVC の死 - mizchi's blog の後編。 前提として、今回の出す例で、「Web フロントエンドで、そこまで複雑な状態を考慮するなんてそもそも間違ってる」という意見があると思う。これに関して、そもそも「SPA というものが、いかに実現可能になったか」という視点の話であり、また、自分の経験上「フロントエンドなんて雑でシンプルでいいでしょ」というものが、複雑な構成を取っていくのを、何度も目にしてきた、という2つの前提がある。 適切な粒度に応じた適切な構成をとるべし、というのは別の話で、今回、対象が複雑なアプリケーションなのは前提とする。 Flux 以前 先の記事で ActiveRecord を前提にしたサーバーサイド ORM をクライアントで輸入しようとすると、クライアントでは Storage 層が存在し
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
Fluxの最大の特徴である単方向データフローは、ここにUIである「View」を加えて、図1の通り表されます。 図1 Fluxの単方向データフロー 状態の更新指示内容である「Action」を関数である「Dispatcher」で「Store」に伝えて状態を更新し、その結果を「View（React）」に伝える、といった流れです。 実際にアプリケーションに組み込んだ場合には、ユーザーが画面を操作したイベントに応じて新たなActionを発行（dispatch）して、状態と画面を更新していく形になるので、次の通りになります。 図2 ユーザー操作を考慮したデータフロー 図2に沿って初期化後の処理を一つひとつ見ていくと、次のことをしています。 ユーザーがViewを操作する（ボタンを押す、文字を入力する、など） 更新したい事柄をActionの形にまとめて、Dispatcherに渡す Dispatcherから
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ
SSR as a Service の Renderly というサービスを地道に作っていましたが、先日 Try it out を公開して機能がプレビューできるようになりました。 SSR のこと、普段はあまり考えたくないです。しかし取り扱う情報がパブリックなものであれば対応しておきたいところです。 とはいえ Web Components の中で Shadow DOM を使っている場合、Shadow DOM は文字列にシリアライズするのが難しい1 ので、そもそも完全な SSR はできません。 Isomorphic JavaScript として開発していれば skate js/ssr を使って ブラウザ側で Shadow DOM にリプレイスされる HTML+Script を使うという選択肢もあります。しかし個人的には、ブラウザで動かすためのコードを書いているのであってサーバ側では極力テンプレート
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
Reactの新機能「Time Slicing」と「Suspense」をFacebookが紹介。非同期レンダリングを活用しUXをサクサクに向上 Reactの最新バージョンである「React 16」以降に予定されている新機能は、Reactの新コアアーキテクチャとしてReact 16から採用されたFiberによって実現される非同期レンダリングなどを活用。CPU能力が低いデバイスやネットワーク帯域が十分でない環境でもサクサク反応するアプリケーションが開発できるものになると、FacebookのReact開発チームに在籍するSophie Alpert氏がReactブログに投稿した記事「Sneak Peek: Beyond React 16 - React Blog」で紹介されています。 その新機能が「Time Slicing」と「Suspense」です。 マウスやキーボードなどの操作がブロックされない
はじめに 今回は、ReactのComponentやprops、state、Lifecycle Methodsなどについて書いていきたいと思います。 基本的には公式を参考にしています。 また、前回の内容を前提としているため、まだ読んでいない方は、下記のリンクより前回の内容を確認することをおすすめします。 webpack4 + React.jsでHello worldするまで JSX JSXとは、JavaScriptを拡張した言語です。 流れとしては、JSXでReactElementを生成し、ReactDOM.renderで実際のDOMに反映するイメージです。 （個人的にReact要素は、DOM要素の仮想的な表現ぐらいの認識です） 以下のようにHTMLタグも記述することができます。 import React from 'react'; import ReactDOM from 'react-d
Are you thinking of building a cross-platform app or a native iOS app for your business requirement? How do you choose the right technology that will lend your app a unique interface? We got it covered! This blog compares Swift vs React Native – two technologies that are popular for building native iOS applications. But before we get into it, here’s a question developers often face. Let’s take a d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く