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と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ハイブリッドアプリへの挑戦 ~ Part2: 導入/Bridge ~ - スタディサプリ Product Team Blog
本エントリは3部作のPart2となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 Part1からすっかり時間が空いてしまい恐縮ですが引き続き弊社のReact Nativeハイブリッドアプリの取り組みについて語っていければと思います。 段階的なインテグレーション 前回のエントリでmonorepoへの移行とCIの整備について語りましたが、今回は実際にどの様にインテグレーションを進めていったかについて説明していきます。 新しい技術を採用するに辺り、ビッグバンリリースを避け段階的に導入を試みていくアプローチの方がリスクを避け柔軟に対応できると考えています。ですので一気に再構築プロジェクトを発令するのではなく、ある機能をリニューアルする際にその画面のみReact Nativeで書いてみ
Reduxは不要ではないか？ - Qiita
僕の本職はサーバーサイドなのですが、半年くらいReactとReduxを使ったフロント部分を触ったので、書きたいと思います。 先にReact.jsについてですが、本家がチュートリアルをしっかりと用意しており、学習コストも高くなく、悪くないものだなと思いました。 しかし、Reduxが入った途端、めっちゃ複雑になった印象があります。chromeのプラグインを入れて開発するのが普通とか言われたのですが、そんなものを使わないと作業できないくらいに複雑で辛いなぁという印象です（Javascriptは、console.logがあれば、ほぼ開発できる気がします。） ここから先は、こんなこと考える人も居るんだなぁ程度で見てください。Reduxが好きな人はすごく嫌な記事かもしれません。その場合は、ここでそっ閉じしてください。 Reduxはモダンだから採用した これよく聴くのですが、本当に辞めてほしいです。jQ
実は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ベースのフォームライブラリを作った - wadackel.me
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
React Developer ToolsでReactで作ったページをデバッグする - Qiita
React Developer Toolsとは Facebookから公式で提供されているデバッグ用ツールです。 React Developer Toolsを使うと、コンポーネントツリーの構造、各コンポーネントに渡されているPropsの値、現在のStateの値といったことが視覚的に確認できるようになります。 Reactで作ったページの状態をすぐ把握できるため、デバッグが捗ります。 React Developer Toolsは現在、３種類が提供されています。 Google Chrome拡張機能版 Firefox拡張機能版 Standalone版 Safariでデバッグしたい場合やReact Navtieをデバッグしたい場合はこちらを使用 この記事ではGoogle Chrome拡張機能版を元に解説していきます。 インストール方法 こちらからインストールをします。 追加するとアドレスバーの横にRe
電卓アプリで学ぶReact/Redux入門(実装編) - Qiita
はじめに React.jsとReduxを理解するために簡単な電卓アプリを作成しました。 今回はWelcome to Reactから始まり、実際にReact/Reduxで電卓アプリを作るまでの手順を説明したいと思います。 特にReduxのデータフローについては言葉や図だけではよくわからないと思うので、電卓アプリを実際に作成することで少しでも理解の助けになればいいなと思っております。 今回の記事では実装がメインとなっているため、React.jsやReduxの概念などについては省略しております。基礎的な部分を理解したい方は「Reduxの電卓アプリで学ぶReact/Redux入門(基礎知識編)」を読んでからこちらの記事を読むと理解がしやすいかと思います。 電卓アプリはcreate-react-appをベースに作成し、簡単のために加算の機能のみ作ります。 create-react-appについて ま
コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」
Reactの開発環境構築Reactの開発環境を構築することは当ブログでも以下の通り記事をアップしていますが、使う必要のあるツールがたくさんあり慣れてないとかなり大変です。 Reactを「webpack + babel-loader」でビルドする方法 – maesblogReactをnpmでビルドする方法 browserify (watchify) + babelify編 – maesblogざっとReactの開発に必要なものを挙げてみても、これだけあります。もちろんこれら以外にもまだあります。挙げたらキリがないくらいです。 これらのツールをReactのプロジェクトの度にインストールして、設定してとやるのは骨が折れます。ちょっとしたReactのコンポーネントを作って試したいという時も同様です。 今回紹介するcreate-react-appを使うと、これらのReact開発の度に発生する面倒な作
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
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の技術じゃないか」というなかれ。 <div>や<p>をそのままブラウザにマッピングするReactは、 <View>や<Text>をプラットフォームごとにマッピングし直すReact Nativeより、 抽象度が低い。 だから、<View>や<Text>を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 Nativeとは何なのか - Qiita
改めて、React Nativeについて書いていきたいと思います。 React Nativeとは何か？ ReactはFacebookが開発したJavaScriptのフレームワークであり、React Nativeはそれをモバイルで使えるようにしたものである。 React Nativeを使用することでネイティブに描画されるiOSとAndroidのアプリを作ることができる。１つのコードで、両方のプラットフォームで動くものが作れる。さらに、JavaやObjective-Cのライブラリを自分で書いてReact Native自体を拡張することもできる。WebでReactを使っているなら、ターゲットがモバイルに代わるだけなので簡単に使い始めることができる。 React同様、React NativeもJavaScriptと、JSXと呼ばれるXMLライクなマークアップを使って記述される。内部では、ネイティブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
