Angular 2とReact Nativeの組み合わせSpring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う
最近周りでよく「AirbnbのJavaScriptスタイルガイド」が良いという話を聞くようになりました。ということで、自分もAtomに導入してみたんですが、これがなかなかいい感じです。多くの開発者の意見を取り入れられて作られているスタイルガイドで、特にReactやES6の構文チェックなどにも対応しているので、とても良い書き方の勉強になっています。けっこうお勧めだと思ったので、今回はAtom限定の話となりますが、ESLintを使った導入方法を紹介したいと思います。 ESLintとはESLintは、2013年6月にNicholas C. Zakas氏によってオープンソースプロジェクトとして公開されたJavaScriptの構文チェックツールです。個別にルールをon/offできたり、独自のカスタムルールを設定できたり、公開されている様々なプラグインを組み込んで使うことができたりします。 ESLin
Reactでユニットテスト #scripty05
2016/3/17の勉強会にて発表された資料です。 SCRIPTY#5 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/27752/Read less
native-css - スタイルシートをReact用オブジェクトに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactではスタイルシートをファイルのまま使うよりも、JavaScriptからスタイル要素に直接指定する方法が好まれます。ただ、その際に問題になるのは通常のスタイルシートと書き方が全く異なるということでしょう。 数年前まではデザイナーとエンジニアの作業分担が言われていたのですが、Reactではうまくいきません。そこで代替手段としてnative-cssを使ってみましょう。 native-cssの使い方 native-cssは以下のようにスタイルシートを指定して実行します。 $ native-css input.css output.js --react 元々のスタイルシートは次のようになっていたとします。 .taxi { background-color: #F8F8F8; col
React + Redux入門初歩 実際に一からアプリを構築してみる - Qiita
ReactとReduxが最近ホットということで、自分も触ってみようと思い、入門・チュートリアルと銘打っているドキュメントを読み漁ってみるものの、とりあえず動くものを作るにあたって何をすればいいのかが良く分からなかった。 いったん簡単なものを一から構築して、それから色々いじってみたほうが理論の理解も進む気がしたので、見よう見まねで公式サンプルにあるようなカウンターっぽいものを作ってみる。 必要なnpmパッケージ（2016/04/16現在） アプリ構築に最低限必要なパッケージはおそらく以下のような感じ。 react用パッケージ react react-dom redux＆連携用パッケージ redux react-redux その他、半必須 browserify (import文などを使うため) babelify (babelトランスコンパイル用) babel-preset-react（babe
MERN - Express/Reactを使ったWeb開発フレームワーク MOONGIFT
Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。 今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB + Express + React + nodeという組み合わせのアーキテクチャになります。 MERNの使い方 MERNのディレクトリ構成は次のようになっています。サーバサイドはMVCに分かれており、Reactを使ったサーバサイドレンダリングを行っています。 テストのサーバを立ち上げたところです。ブログエンジンとなっています。右側にReactで持っているオブジェクトの内容が確認できるのがユニークです。 データの詳細も確認できます。 クリックで画面は変わりますが、サーバへのアク
React,Redux,Express,Mongoのフルスタックなboilerplate - Qiita
reactjsでwebアプリを作成するにあたって、とても参考になりそうなreact-webpack-nodeというBoilerplateを見つけたので、中身を見てみる。 構成は、 React + Redux Express MongoDB + mongoose となっており、フルスタック。 jsのmodule bundlerはwebpackで、hot reloadにもserver side renderingにも対応。 ログインのサンプル実装まである上に、herokuへのdeploy手順まで記載されているので、 reactjsで何か作りたい時はこれを土台に単に機能を乗せていくだけで良い感が... まずは勉強がてらcommitされているファイルを軽めにみていく。 package.jsonをみてみる scriptsは、 "scripts": { "clean": "rimraf public"
React+Redux入門 - Qiita
※この記事を書いたのは2016年4月です。Qiitaでは記事をアップデートするとその日付のみが表示されていまうため、新しい記事のように見えるかもしれませんが、現代ではもっと進化していることにご注意ください。素直にReact Hooks を使いましょう。あと Redux は用法用量を守って気をつけて使ってください。なんならReduxは使わない方がいいでしょう。 最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか？それはただの誤解かもしれません。React+Reduxはそんなに難易度の高いものではありません。ただ単に、新しい概念で構成されているから、カルチャーショックのようなものがある、というだけのことです。React+Reduxに入門してみましょう。 僕自
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
ReactとRefluxJSを用いた快適View生活 - Qiita
はじめに Webサービスを作っている際に、サービスの規模が大きくなるにつれてviewで用いているjsの記述が煩雑で見辛く、保守が難しくなってきたなーと思った経験ありませんか？ 個人で開発している分には良いのですが、いざ他の人に改修を頼もうと思った際に、このDOMの操作に関わるjsはこのファイルに書いていて、あのDOMの操作に関わるjsのファイルはあっちのファイルに書いていて... なんでこのjsはhtmlファイルに直接書いてあるのに、こっちの部分はファイルに分けてあるの？と。 凄く極端な例で示しましたが、Webサービスの開発に携わられたことがあれば少なからず似たような経験をしてきたことがあるのではないでしょうか？ そのやりとり面倒くさいですし、開発の引き継ぎを託された側も修正に必要な関連ファイルをいちいち探すの大変ですし、そもそもjsの記述が多くなればなるほど保守もしづらくなってきますよね
サーバーサイドプログラマーのためのReact.js 入門 1. 開発環境の構築 - yuumi3のお仕事日記
最近、バリバリと jQueryベースのフロントエンドを React.js に置き換えています。 私も主に Ruby on Rails等の サーバーサイドエンジニアで、最近のフロントエンド開発を本格的に開発するのは初めてです。いろいろとつまずきながら進んできました。 まずは node.js をインストールし npm を知る 環境構築のためのツールは node.js の上で動きます、そこで node をインストールします。 ツールを動かすだけなので node のバージョンはあまり気にしなくて良いと思います。(2016-02-04日現在ではバージョン5.5.0が入ります) $ brew install node node をインストールすると npm コマンドもインストールされます。npmは node.js用ライブラリーと、その管理を行うコマンドです。 Rubyの gem に相当するものですが、
生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 *他に必要なのは React の使い方を説明してくれる人だけです。* 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、で
すべてのReact.js初心者が知っておくべき9つのポイント - Qiita
9 things every React.js beginner should knowを意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 私は約6ヶ月間React.jsを使用してきました。それほど長い歴史ではありませんが、あなたがひげの長老として扱われるようなJavaScriptフレームワークの目まぐるしい世界の大きな枠組みの中で、私は最近、React初学者のTipsで少数の人々を支援してきましたので、ここでより多くの人々にその内容を共有するのが良いアイデアであると思いました。これらは全て私が始めた時に知っておきたかったことか、もしくはReactを習得するために本当に役立ったもののいずれかです。 あなたが絶対的な基本を知っていると想定して話を進めますが、もしコンポーネント、propsやstateなどの言葉に馴染みがなければ、公式の入門やチュートリアルページを読むと
Spring Boot with JPA&React&Bootstrap4でWebアプリケーションを作ってみた - 今日学んだこと
進捗どうですか？ 新年を迎えてからしばらく経ち、皆様当初の目標からの進捗はいかがでしょうか？ 僕は全くダメです。 やりたいこと、やらないといけないなと思ってることは沢山あるんですが、「何をしようかなぁ」と考えているうちに、気づけば寝ていたり、気づけばデレステをやってる毎日です。マキノかわいい。 世の中にはタスク管理の手法は色々ありますが、それらはすべて「タスクをこなす意思がある人向け」であり、僕みたいな意思の弱い人間が、あれとこれをやりたいとリストアップしたところで、そのリストを前にした時点でうんざりしてしまうのは必然です。 リストを前にすると尻込みしてしまう。であれば、目に見えるタスクを一つだけにしてしまえばいい。 導入が長くなりましたが、そんなモチベーションから「タスクを一つ選び出すツール」を作ったお話です。 どんなアプリケーションを作ったか こちらになります。 https://gac
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ
技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta
Phoenix + React + Reduxでブログシステムを作る(1) - undefined
Elixir、Phoenixの勉強のための題材として、ブログシステムで作ってみることにした。飽きるまでのんびり改修していこうと思う。Elixir/Erlangの学習はすごいE本を並行して進める。 Elixir、Phoenixのインストールは完了しているものとする。 今回のゴール 記事の投稿ができる 記事の閲覧ができる 動作環境 Erlang 17.5 Elixir 1.2.0 Phoenix 1.1.4 node.js 4.2.1 プロジェクトの作成 プロジェクトを作成する。ただし、自分みたいなフロントな人間は真っ先に--no-brunchを付けたくなると思うんだけど--no-brunchを付けずにあとから手動で変更したほうが楽だという話しを聞くので参考にしてみる。 $ mix phoenix.new phoenix_redux_blog 参考にしたのは以下の記事。 qiita.com 以
Coffee, jQueryで書いていたElectronアプリをES6, React, Reduxで書き直した - k0kubun's blog
ElectronベースのTwitterクライアント: Nocturn ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun's blog の時にCoffeeScriptとjQueryで作っていたNocturnというTwitterクライアントがあり、これをES6, React, Reduxを使って書き直した。この記事ではその時に得た知見、感じた事を書いておく。 移行したスタックと移行時に感じたこと あらかじめお断りしておくと、僕は普段はRubyでサーバサイドの実装や運用をやっている人であり、JavaScriptに関してはほぼ素人の意見なので、以下はReactとかRedux興味あるけどまだ触ったことないですみたいな人向けの内容になると思う。 CoffeeScript → ES6 移行 参考: 春からはじめるモダンJavaScript / ES201
Step by Step Guide To Building React Redux Apps
Redux is becoming the de facto way to build React apps. And there are tons of examples that show how it’s done. But React-Redux apps have too many parts like: “Reducers”, “Actions”, “Action Creators”, “State”, “Middleware” and more). It could be overwhelming! When I started to learn it, I couldn’t find blogs that show “Which part of React Redux to build first?” or how to generally approach buildin
React & Flummoxチュートリアル - Give it a shot
Flummoxは、いくつもあるFlux実装のうちの１つです。 ドキュメントにはいくつかの特徴が挙げられていますが、 Isomorphicであること（サーバとクライアントのどちらでもOK!）、ES6記法に対応していることなどがあります。 今回は、簡単なTODOアプリを作りながらFlummoxの使い方を紹介しようと思います。 このチュートリアルでは、ReactやFluxの初心者を対象にしています。簡単な概要ぐらいは知っているけど、これから始めるために簡単なサンプルが欲しいというような人にちょうど良いと思いますが、React全く初めてでも順を追えばなんとなくやっていることがわかると思います。 ソースコードはこちらです。 <完成イメージ> 準備 コードを書き始める前にいくつか必要となるツールがありますので紹介します。 Gulp よく使われているタスクランナーです。この後でコードを変換する必要が出て
ES6記法とモジュール管理をするためにbabelやwebpackの設定を0から行うためのハンズオン - Qiita
Reactを開発するときに、babelやwebpackの設定をしますが、 すでに古い情報が多かったり、結局何のためにどの指定が必要なのかがわかりづらいため、改めて何を何のためにやっているのか整理します。 本記事は基本的にはReactの利用有無にかかわらず参考にできます。 また、セットアップ済みのプロジェクトはgithubに上げてるので試してみたい場合はそちらを。 https://github.com/haradakunihiko/devserver-boilerplate 前提 ES2015ベースで、webアプリ開発をしたいので開発環境を準備します。 ここでは以下のバージョンを使用します。 node@4 npm@2 babel@6 npm@2を利用している場合は特定のライブラリをinstallすると、それが依存しているライブラリは併せてインストールされますが、npm@3の場合は明示的に入れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
