React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する React Nativeは、クロスプラットフォーム開発を行うためのツールの1つです。JavaScript言語の中で、UIフレームワークのReactを用いてUIの記述と状態管理を行うことで、アプリの動作を組み立てます。本記事では、React Nativeの導入やモバイルアプリ開発の現場で起きがちな課題を解決する手段としての強みについて解説します。 ReactとReact Native Reactとは／React Nativeとは／React Nativeの正体 React Nativeの環境構築 npm文化圏の流儀にのっとったワークフロー／スタイル定義／npmのライブラリ使用／リッチな機能を追加 広がるReact Nativeの世界 Windows向けのMS公式実装／ブラウザ向けの逆輸入／
私がReactを始める前に知っておけば良かった事
AmazonでStoyan Stefanov, 牧野 聡のReactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門。アマゾンならポイント還元本が多数。Stoyan Stefanov, 牧野… というか、自分のWebアプリ開発に対する考えというのが従来のサーバー側で全てを用意するものだ、という考えがこびりついており、「Webアプリ開発とは、DBからデータを取ってきてHTMLタグ内に入れ込むだけの簡単なお仕事だ」の考えを止めないとReactの仕組みは理解できないと感じた。 “ReactがJavaScriptでDOMと画面を生成するのは分かったけど、HTMLはどのサーバサイド言語が動的に生成するの？” これは誤解であり、まさかUIの描画はすべてWebブラウザ側のJavaScript(React)でやってしまい、HTMLなんてindex.htmlのみ、サーバ側といえばJSファイル
Laravelで部分的にReactを使う方法
Laravelで部分的にReactを使う方法 Laravelアプリケーションで完全なSPAじゃなくて部分的にReactを使ってみたいと思います。 投稿日2019年05月08日 更新日2019年05月08日 Vue.jsからReactに切り替える LaravelのデフォルトのJSフレームワークはVueですが、簡単にReactに切り替えることができます。 新規プロジェクトを作成したらartisan preset reactコマンドを実行するだけです。 $ composer create-project laravel/laravel laravel-react $ cd laravel-react $ php artisan preset react 切り替えたらnpmインストールします。 $ npm install これでReactを使用する準備が整いました。 下記コマンドでJSファイルの保
Laravel 6 でVue.jsやReactを使う - Crieit
Laravel 6 が先日リリースされました。Laravel 5 との違いとして、プロジェクトの初期化時にVue.jsのリソースが自動生成されなくなりました。そのため、引き続きLaravel 6でも使用したい場合は追加で導入する必要があります。 laravel/uiをインストール まずはフロントエンドの初期化を行うためのパッケージとしてlaravel/uiというものがありますので、それをインストールします。 composer require laravel/ui --dev JavaScriptとCSSの生成 uiライブラリを使って各種JavaScript、CSSのファイルを生成します。 Vue.jsを使う場合 下記のコマンドで生成します。 php artisan ui vue packages.jsonにパッケージが追加されるのでインストールします。 yarn 念の為正常にビルドできるか
AirbnbがReact Nativeを諦めてネイティブアプリに方向転換したわけ - Roy S. Kim - Medium
なんと、AirbnbがReact Nativeを諦めてネイティブアプリに方向転換すると発表した！ facebookもネイティブアプリにすることに決めたので、React Nativeの支援軍の両大山脈がReact Nativeからの撤退を決めたことになる。Airbnbがその背景を長文の記事で公開していたので、要点だけ（「超」がつくほど簡単に）整理してみる。 採用の理由Airbnbは2016年度にReact Nativeを採用すると決めた。（色々カッコつけた採用の理由を言っているが）その背景には彼らが当時必要だったネイティブエンジニアを十分に確保できなかったことがある。要するに、スマホの使用率の増加に伴って迅速にアプリを作成・改善しないといけなかったのにネイティブエンジニアを適時に採用できなかったのだ。Airbnbはウェブのサービスを運用していたので、当時の社内にはウェブのエンジニアが沢山いた
【CTO meetupイベントレポート】JavaScript（Angular,React,Vue）～進化し続ける技術について～ | flexy（フレキシー）
技術の流れが速い中、どうやって技術選定をしている？ 案件のスピード感や企業規模によって異なる技術選定基準 小林：フロントエンドにはさまざまなトピックがありますが、今回はJavaScriptを中心にディスカッションしていきたいと思っていますので、よろしくお願いします。 まずは現在の技術の流れが速い中で、みなさんがどのように技術選定をしているのかというテーマですが、簡単に今までどのような技術を使ってきたのか、その選定基準などを教えていただければと思います。 林：管理画面系のフラットアプリケーションの構築にAngularを採用しました。いろいろな選択肢がある状態だったのですが、迷っているだけの時間がなかったことと、Angularに詳しいメンバーが多かったという要素が採用の大きな理由です。 古川：僕の場合は3年前に開発を始めた案件でReactを採用しましたが、完全にタイミングでした。 まず、リクル
Laravel5.5 + React 超入門チュートリアル その１ - 今からお前んちこいよ
ToDoリストを作ってみる 私はフロントのエキスパートではないので、 あくまでも動くものを作る超入門のチュートリアル。 API編は別記事なので、そちらも参考にどうぞ。 ＝＞ Laravel5.5 で REST API 入門チュートリアル - 今からお前んちこいよ Laravel + React プロジェクトの作成 プロジェクトの作成 $ composer create-project laravel/laravel laravel-react-example "5.5.*" $ cd laravel-react-example $ php artisan preset react $ npm install resources/views/welcome.blade.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta
React Native開発のつらい点まとめ – MMiyauchi Blog
React Native v0.42で開発していて、つらい点を述べていく。良い点はあったかもしれないが、忘れてしまった…(良い点含めたより公平な意見は、あらためてまた今度書く 2018年2月28日追記: 書きました!!→ React Native開発の良い点と注意点まとめ)。 なお、製品でReact Nativeを運用されている方で、他にもつらいとおっしゃっている方もいるようなので、自分がReact Nativeに対して感じているこのつらさは間違っていないと思う。 大前提として「React Nativeは、Viewしか扱わないReactがベース」である これがそもそものReact Nativeがつらいと思える根本的な原因かもしれない。React Nativeのコンセプト通り、React Nativeではたしかに、Reactの知見をほとんどそのまま流用してReact Nativeではアプリ
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
ヒカ☆ラボでReact導入の話と商品検索改善の話をしてきました | Enigmo Life
こんにちは。エンジニアの山本です。 5/23に開催された、【 ヒカ☆ラボ 】大規模サービスがリスクをとってまでモダンな開発環境にリプレイスした理由～ここだけの苦労話や手法を交えお話します～ というイベントに参加 & 登壇してまいりましたのでレポートします。 今回のイベントのテーマは レガシー改善 という、長年継続しているサービスでは避けては通れないものでした。 弊社のサービスである BUYMA もローンチから10年以上経ち、溜まりに溜まった技術的負債を日々返済しています。 Reactを導入した話 弊社からは2人登壇させて頂きまして、私、山本は “React導入時の苦労話とこれからについて” と題しまして、ある機能のリプレイスプロジェクトでReactを導入した話をしました。 既にデファクト・スタンダードになったと言えるReactですが、導入当時の一年前は大規模なサービスに導入したという事例も
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
【react】jqueryメインの非SPAシステムの特定ページでのみreactを導入してみたのでメモ - とりあえずphpとか
はじめに 以前に自分が作ったシステムで主にjqueryを使って作ったものがありました。 基本的には困ることはなかったのですが、特定のページだけ複雑になってきていじるのが嫌になってきました。。。 作りたい画面のイメージとしてはこんなかんじ メイン画面 モーダル1 モーダル2 ・画面の中央にリストがある。 ・「追加」ボタンで追加するデータの種別選択画面モーダルをひらく ・「次へ」ボタンで種別ごとに設定画面があるのでそれらへ遷移 ・「登録」ボタンでモーダルを閉じてリストへ反映 リストへの登録を繰り返して、すべて登録できたら「サーバーへ送信」ボタンで登録が完了するようなイメージの画面。 最初はそこまで複雑でなかったのだが、種別が増えていって種別によっては2ページ、3ページかけて項目を入力するものはでてきた。。。 jQueryで作っていたのだが、さすがに1つのHTMLにすべてを書いてしまっていたので
「Reactの難しさ」を分解しよう - タオルケット体操
他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 「テンプレートエンジン」として捉えて、シンタックスを攻撃するのをやめよう ライブラリとしてのReactはとても簡単 Reactの思想を理解するのはチョットムズカシイ 環境構築が難しい JavaScriptそのものが難しい GUIが難しい jQuery時代からのパラダイムシフト フレームワーク関係者の情報量が多い SPAはとりわけ難しい まとめ ずっと感じてたもやもやを書き連ねたら長くなってしまったが、ぼんやりとReactとかなんか難しそうだしめんどくさいから新規案件だけどjQueryでやろっかなどうしよっかなーと迷っている人の指針になってくれればうれしい。 他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 出た時から延々と言われ続けているものの、やっぱり今でもjQueryとRe
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
普通のRailsアプリケーションにReactを導入する | DevelopersIO
次にreactをインストールします。 $ npm install -S react react-dom package.jsonは以下のようになりました。 { (中略) "devDependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "webpack": "^1.14.0" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", }, (中略) } ビルド設定 webpackでビルドできるように設定ファイルを作ります。 clientディレクトリにwebpack.config.jsファイルを作成し以下の内容
あなたはReduxを必要としないかもしれない – You Might Not Need Redux by Dan Abramov | mae's blog
今回は、エンジニア向け読み物サービス「Mybridge」のMybridge AIがランク付けした2016年9月のReactに関する記事の1位だった記事を翻訳して紹介します。Reduxの作者Dan Abramov氏の記事です。内容は、簡単に言うと、「無理してReduxを使わなくてもいいよ」という話です。ただ、使わなくてもいい理由をReduxの特徴を挙げながら述べてくれているので、Reduxについての理解も深まる内容になっています。原文がだいぶフランクな感じで書かれているので、日本語に訳すのが少々難しく、わかりにくい部分もあるかと思いますが、是非読んでみてください。 当記事は、You Might Not Need Redux – Medium (Sep 20, 2016) by Dan Abramovを日本語に翻訳したものです。 人々はReduxを必要とする前からReduxを使おうとします。「
仕事で片手間に JS を書く人間が React + Redux 触ってみた感想 - 聞かれてもいないことを喋る
今更だけども。仕事で使ったわけでなく、「仕事で使うに耐えるか」をちゃんと判別したくて 1 ヶ月ちょい前から余暇を使ってちまちまと触っていた。 ちなみに自分の本職はサーバーサイドで、JS は片手間に書いている。 勉強のために作ってみたものはこれ。 → GitHub - Cside/unread-manager: はてブの未読整理をする Web アプリ 良いと感じた点 Redux に限らず Flux 系フレームワーク全般に言えることなのだろうけど、Flux Way に乗って書くだけでコードが疎結合に組み立てられるため、テスタビリティは鬼のように高くなる。 テスタビリティが高いのでテストを書く心理的障壁が低く、テストをガンガン書ける。結果いつのまにかテストが充実して、リファクタリングも安心してできる。 一度慣れてしまえば、イベント依存地獄にかなりなりにくい、メンテナンシビリティの高いコードが書け
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React のユーザーから見た今後のフロントエンドの予想
KUNINORI Log Ver 2