Microsoft、「Web Template Studio」を早期プレビュー 〜「VS Code」でWebアプリの雛形を／“Microsoft Garage”のインターンで開発された「Windows Template Studio」の弟分
CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog
CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出された。 ある程度の期間を経ていくつかの着目すべきアプローチが見えてきた。これから僕はどのようにセレクタと関わっていくべきかという視点で記してみたい。 擬似スコープ 通常CSSのセレクタにはスコープはないが、HTMLやCSSにハッシュ値を付与して特定のコンテキストを擬似的に閉じてしまおうというアイデア。実装としては、Vue.jsの単一ファイルコンポーネント、Angularのコンポーネントスタイル、styled-jsxなど。関連するウェブ標準技術としてShadow DOMがある。 例え
クライアントサイド(React)で日本語PDFを出力する。
前書き Reactの案件の中で日本語のPDFを出力する必要があり、 そのためにクライアントサイド(React側)のみで日本語PDFを出力する方法をまとめたので記事にしました。 前準備 今回は、pdfmakeというクライアントサイドでPDFを出力するJavaScriptライブラリを利用します。 npmパッケージでも存在するのでコマンドでインストールできるのですが 日本語フォントを利用するため、Githubからjsファイルを落とします。 bpampuch/pdfmake 上記のリポジトリから以下のファイルを落とします。 pdfmake.min.js vfs_fonts.js 日本語PDF出力の準備 pdfmakeは、そのまま利用すると日本語フォントが利用できません。 そのため、独自に日本語のフォントを利用できるようにする必要があります。 ダウンロードしてきた、vfs_fonts.jsに日本語フ
Redux 再考 - mizchi's blog
今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる
React製のSPAのパフォーマンスチューニング実例
定量と定性で見る！デザイナーが実践するユーザー理解へのアプローチ【プロデザ！BYリクルート第26回】 2025.09.03 デザイン デザインディレクター プロダクトデザイン
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
実はReact Native公式ドキュメントでReact Native for Webが使われている - Qiita
2019年8月追記： Expo SnackがWeb対応したことを受けて、React Native公式ドキュメントのライブプレビューはreact-native-web-playerからExpo Snackに戻りました。 http://facebook.github.io/react-native/docs/activityindicator 記事の内容は古くなってしまいましたが、React Native for Webが内部で使われていることに変更はありません。 React Native公式ドキュメントのプレビューを支える技術 React Nativeの公式ドキュメントでは、コンポーネントの実際の表示をWeb上で確認できるプレビューが用意されています。 少し前まではAppetize.ioが使われていて、実機のスクリーンキャストらしきものを見ることができていました。今でもExpo Snackは
もうReactのフォームで消耗したくないので、HoCベースのフォームライブラリを作った
2017 年。React のフォームに消耗しました。 いくつか良さそうなフォームライブラリはありますが、個人的に満足のいくものが無かったので、とあるプロジェクトで実装したものをベースにしてライブラリにまとめました。 作ったもの# react-drip-form という、HoC ベースで React のフォームコンポーネントを構築するライブラリを作りました。元となるコードを書いている時、「さくっとフォームの実装を済ませてゆっくりコーヒーでも飲みてぇ...」という気持ちがかなり高まってたので、コーヒーを連想させる名前にしてみました。 wadackel/react-drip-form https://github.com/wadackel/react-drip-form ドキュメントのページでは、Create React App を使った Quick Start もあるので、さくっと試すことが出
今からはじめるReact.js〜スタイルの適用〜 - Qiita
前回→今からはじめるReact.js〜コンポーネントをまとめる〜 [2016/05/18追記] 上記のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では 今からはじめるReact.js〜React ver0.14〜 で記載のように実装する必要があります。 スタイルを適用する classNameとstyle サービスを実装するにあたり、基本的なスタイルを独自に定義することになると思います。 React.jsでは全ページとしては統一感をもったスタイルを適用するとともに、コンポーネントごとにスタイルを指定することができます。 前段階として、 htmlに直接cssを適用する場合、 <button class="btn btn-default"/> のようにclassを指定する方法が一般的な方法としてあげられますが、 React.jsのJSXで定義する場合、clas
Reactのコンポーネントのスタイリングをどうやるか - Qiita
この記事は KIT Developer Advent Calendar 2017 の 18 日目の記事です。 はじめに React で作成するコンポーネントにスタイルを適用する方法は大きく分けて以下の 4 つがありますが、どの方法にもメリットやデメリットがあり、一概にどれが優れているとは言えないのが正直なところです。本記事ではそれぞれの手法を紹介し、比較します。 クラス名によるスタイリング インラインスタイル CSS Modules CSS in JS 扱う構文 本記事では以下の仕様・構文を扱います。 ES2015, ES2016, JSX オブジェクトを受け付けるスプレッド演算子 (Stage 3, Proposal) クラスの public フィールド (Stage 2, Proposal) 現在は private フィールドの提案とマージされて class-fields(Stage
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub
CakePHP3とReact.jsを共存して動かす - Qiita
CakePHPとReact.jsを共存させる 最近流行りのフロントサイドレンダリングですが、CakePHPと合わせてどうしても使いたい場面に遭遇します。 ようは、決済処理などはクライアントに見えない形にしたいのでバックエンド（CakePHP）で、残りはフロントサイドみたいな。 今まで拝見した記事だとnpmと別途で動かしているものが多いので需要があるのではないかと思って記事にしてみます。 あと個人的にMaterialUI (http://www.material-ui.com/) を動かしたかったのもあるので。 とりあえずCakePHPを入れる。 下記の記述のようにCakePHPをインストールします。 https://book.cakephp.org/3.0/ja/installation.html PHPのインストールは省きます。Apacheなどを含めてyumやapt-getなどでインスト
2週間半のReact Nativeアプリ開発を振り返る - c-bata web
React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 作者: 松澤太郎出版社/メーカー: マイナビ出版発売日: 2018/08/29メディア: 単行本（ソフトカバー）この商品を含むブログを見る ここ2週間ちょっとReact NativeでiOSアプリ書いてました。 サーバサイドをメインでやってきた自分にとって面白い技術で、今後も趣味で使ってみたいなと思えているのでTipsや所感を残しておきます。 目次 選定理由 Tips エラーハンドリング・状態管理 入力欄をキーボードの出現に合わせて動かすアニメーション 今回使ったライブラリ react-native-focus-scroll react-navigation react-native-vector-icons react-native-camera react-native-vid
react-native-web はクロスプラットフォームを加速するのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? A Glimpse Into The Future With React Native For Web という記事を読み、react-native-webというプロジェクトを知りました。 本記事では、この技術の概要と自分の意見を書きます。 react-native-webの概要 より抽象化されたViewでWebアプリを書ける React Nativeで書いたコードはiOS、Androidに対応する。 このコードがそのままWebで動くとよいのでは？という発想で作られたライブラリ。 *「ReactはもともとWebの技術じゃないか」*というな
React Nativeのインストールとweb版からの移植ではまったこと - Qiita
今回流行りのreact nativeを試してみたく私用Macマシンと会社用Macマシンの2台にインストールしてみたのだが、片方は10分もかからずにインストールが終わってめでたくhello worldが拝めたものの、もう片方はがっつりハマったのでそのときのトラブルシューティングやらを少しまとめてみました react-native-cli: 2.0.1 react-native: 0.44.2 xcode: 8.3.2 react-native run-iosでこけた どきどきわくわく、初の起動コマンド！ だが、しかし、、、、 port8081が使えないために落ちる こんなエラーが吐かれる ** BUILD FAILED ** The following build commands failed: PhaseScriptExecution Start\ Packager ${PROJECT_
ReactとReact Nativeでコードを共通化し，web / android / iOS (+PC)クロスデバイス開発 - Qiita
React, React Native, Reduxを使って，web, android, iOSアプリのコードを出来る限り共通化します． ReactとReduxを組み合わせて使う場合，見た目を司るPresentational componentとロジックを司るContainer componentにコードを分離します( http://qiita.com/tuttieee/items/a3ca7d9d415049d02d60 )． そこで，Presentational componentは各デバイス固有のコードにし，Container componentは共通化することでロジックをデバイス依存のコードから切り離し一つにまとめます．actionやreducerなども共通化できるので，結果としてロジックはすべて共通化され，Viewのみがプラットフォーム固有のコードになります． ここでは，よくある
Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。 目次 目次 この記事のゴール 想定読者 はじめに 今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc
スゴイのが登場！アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーション ライブラリ -React Spring | コリス
最近のWebサイトやスマホアプリのUIにアニメーションを実装する際、CSSだとeasingやdurationなどが欠かせません。しかし現状CSSだとそこが限界です。 アニメーションの原則に基づき、パフォーマンスにも優れたアニメーションをシンプルなコードで実装できるReactのアニメーション ライブラリを紹介します。 React Spring -GitHub React Springはanimatedのフォークで、物理シミュレーションベースのanimatedやReact-Motionとは異なり、アニメーションの原則に基づいて構築されています。フレーム単位でコンポーネントをレンダリングするのではなく、DOMに直接コミットしアニメーションさせるので、一見複雑そうな動きでも非常にシンプルなコードで実装でき、パフォーマンスにも非常に優れています。 WebサイトやスマホアプリのUIにぴったりなReac
jQuery学習者にReactも学習してほしい3つの理由と学習方法まとめ
jQueryの初版が登場して10年が経ちました。 jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。 時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。 そうした中、昨今注目されているのがReact.js(React)です。 今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。 Reactとは？ Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。 Facebookが開発の主導となっており、
仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita
なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使ってみて、そのノウハウを公開したり、今年前半は色々とアウトプットをしていましたが、後半はSpecificなアプリケーションドメインを記述することが多くて、あまりアウトプットする内容がなくなってました。 取り敢えずは、新規のプロダクトなら採用してもよい、という雰囲
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
