プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
こんにちは、 フロントエンドエンジニアの @nabeliwo です。 弊社には SmartHR というプロダクトの他に SmartHR の従業員 DB を利用して開発・提供される SmartHR Plus アプリ (以下、 Plus アプリ)というものがあります。 SmartHR CTOが語る中長期戦略。徹底的なアプリ開発とAPI対応で「プラットフォーム化」促進へ - SmartHR ガイド 既に多くの Plus アプリがリリースされており、そのほとんどのプロダクトのフロントエンドは React x Redux という技術スタックで構成されています。 オンライン雇用契約 カスタム社員名簿 ラクラク人事レポート etc Plus アプリは毎回新規でプロジェクトを立ち上げて開発していくことになります。 とはいえブランディングの観点から見ると、基本的なトンマナや UI パーツは SmartHR
A-FrameとReact.jsでWebサイトのVR化を試みた話 | CyberAgent Developers Blog
こんにちは。サイバーエージェントのAmeba Ownd(アメーバ・オウンド)というサービスでエンジニアをしている@fushikkyです。 最近までフロントエンドの開発を担当していましたが、現在はサーバーサイドを担当しています。ですが今回はVRの話をします。 今流行りのVRをAmeba Owndで作られたWebサイトに適用して、「WebサイトのVR化」をエイプリルフールの施策として試みた事についてまとめます。施策の売りとしては、「自分の作ったWebサイトが自動でVR化される」というところですね。 Ameba Owndは、無料でオシャレなホームページやブログが開設できるホームページビルダーです。ポートフォリオやネットショップ作成など用途は幅広いので、興味のある方はよかったら使ってみてください。 https://www.amebaownd.com/ さて、Ameba Owndでは例年エイプリルフ
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
なぜ React×TypeScript の（薄くない）本を書いたのか in #技術書典5｜大岡由佳｜note
「なぜ React×TypeScript の（薄くない）本を書いたのか - くるみ割り書房ブログ」に移動しました。
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+TypeScript+Webpackで環境構築 - よちよち開発の日々
今回はReact+TypeScript+webpackの環境構築をしていきたいと思います。公式のドキュメントを参考になぞってみました。是非、一読してみてください。 前提としてnodeとnpmはインストール済みで進めていきます。 作業ディレクトリを作成してください。 以下のディレクトリ構成で進めていきます。 proj/ ├─ dist/ └─ src/ └─ components/ ここでは、まだdistフォルダを作成しなくても良いです。 後述しますが、webpackが自動で作ってくれます。 プロジェクトディレクトリ直下でnpm init -yと実行してください。 そうするとpackage.jsonが生成されます。 webpackのインストール まずグローバルにwebpackがインストールされているか確認してください。 まだインストールがされていなければ npm i -g webpackと実
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
React starter with 9 lines html
Save this code as index.html and open by your (modern) browser. <div id=root /> <script type=module> import React from 'https://dev.jspm.io/react@16' import ReactDOM from 'https://dev.jspm.io/react-dom@16' ReactDOM.render( React.createElement('h1', null, 'hello'), document.querySelector('#root') ) </script> Enjoy! How it works This is shorthand html file without <html>, <body> and so on. Just <div
React とGUI 設計論、あるいは新世代のホームページビルダー - Qiita
注意。実装はまだないです。思考実験的な意味合いが強いです。 持論 Reactやredux/Rxのデータモデリング手法の発達で、ツリー構造の末端に渡すまでのデータモデリングが主戦場になりつつあります。これはロジックを注入する部分と、プレゼンテーショナルなものが明確に分離されてきたことを意味します。 僕は個人的に、 GUI にまつわるものは、本来GUIで設計したい、という気持ちがあります。そう、僕が作りたいと思っているのは、悪名高きホームページビルダーです。 とはいえ、プログラミング抜きでxxxできる！というものではありません。むしろプログラミングとGUIを横断するイメージで、Unity や UnrealEngine のような開発環境を想定しています。 今やりたい理由 ブラウザの仕様が安定してきた 色々と使えるパーツが増えた JS で複雑なツールを作れるようになり、インブラウザな開発ツールが作
イマドキWebフロントエンド環境とReactを触りながらサンプルを10本書いてみた
はじめに Webフロントエンドの知識がjQueryで知識が止まっていたので、モダンなWebフロントエンドに触れてみた。そのメモ。 良かった点 「今はこうなっているのかー」と分かった。今後はナウい記事を読んでもビビらないと思う。 Reactのすごさ 触ってみて下の記事のいうことが理解できた。何がすごいの？と聞かれたら下の記事を掻い摘んで説明したい。 Reactを使うとなぜjQueryが要らなくなるのか 触ってみたもの ES6 Yarn Webpack Babel Sass/SCSS React とりあえずエディタ開いてHTMLを書くぞというタイプの人間だったので、フロントエンド開発にまずはコマンドラインを打って環境を構築する点が新鮮。自動化できるところはツールで共通化してラクできるところはラクをする、というのは分かった。Reactは使うか分からないが、Webpack/Babel/SCSSは絶
さいきんReact, Reduxでやっている設計 - しゅみは人間の分析です
はじめに ブラウザでGUIアプリケーションを作らなくても良い牧歌的な時代は終わりつつあります。個人的な意見としてはブラウザはドキュメントビューアのままでいて、複雑なGUIアプリケーションはネイティブアプリケーションとして実装されてほしいのですが、そうは言ってもお仕事で人間にとって負担の低いUIを作っていく必要があるのです。 Railsでサーバアプリケーションを書きつつ管理画面はネイティブでなんてことはコスト的に実現できません。かといって長期的に運用されるシステムを作ると、システムを運用するためのUIが操作しやすいに越したことはありません。Bootstrapを使っててきとうなフォームを並べただけの画面を作って怒られた経験はありませんか？ たとえサーバ開発者だとしても、我々は使いやすいUIを求め続ける必要があります。 react, redux 複雑なGUIを作るためのフレームワークも乱立の時代
FluxとDDDの統合方法 - かとじゅんの技術日誌
おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i
新規Railsアプリに小さく導入するReact - Speaker Deck
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088
UWP アプリ開発に TypeScript + React を導入することの検討 (Node.MSBuild.Npm の紹介) - ひだまりソケットは壊れない
こんにちは！ 株式会社はてなにて、主に 「はてなブックマーク」 Android アプリの開発を行っている id:nobuoka です。 この記事は、「はてなデベロッパーアドベントカレンダー 2015」 の 14 日目の記事です。 昨日は id:hatz48 による 「TypeScript だけで Web アプリケーションを作る」 でした。 今日は、昨日に引き続き TypeScript の話題となります。 主にクライアントサイド (特に UWP アプリ) での TypeScript と React の組み合わせについて検討したいと思います。 (この記事の内容は、UWP アプリへの導入を目的としたときの TypeScript + React の環境の一例であり、ベストプラクティスではありません。 より良い方法などがありましたら教えてくださいませ。) UWP アプリと TypeScript +
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
Kobito for Windows をリリース + 技術的な補足, package.json の公開 - Qiita Blog
Kobito for Windows をリリース + 技術的な補足, package.json の公開 Kobito for Windows開発の @mizchi です。 開発開始から約半年、ソロ作業の期間も長かったのですが、ようやくリリースできました。 Kobito for Windows – ソフトウェア開発者のためのMarkdownによる情報記録・共有ソフト というわけで、今日はKobito for Windowsの開発コンセプトとElectronやReactを採用した理由について書いていこうと思います。Rails界隈ではGemfileを公開する文化があるようですが、今回はnode.js / npmのそれであるpackage.jsonを公開します。 Kobito on Electronの開発コンセプトWeb技術でKobitoを実装してWin/Macでソースを一本化既存のKobitoの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ