New Network Provisioning System Leveraging Kubernetes and Cloud Native Open Source
React HooksとGraphQLで社内レガシーサービスを巻き取ってみたらものすごくはかどった話
New Network Provisioning System Leveraging Kubernetes and Cloud Native Open Source
レガシー React Project で実践してきたこと - Qiita
はじめに この記事はギルドワークス Advent Calendar 2019の21日目の記事になります。 現在、約3年以上開発を続けているReactのProjectに関わっているので、ここ半年で取り組んだカイゼンの内容についてここにまとめたいと思います。 改善前(半年前)のProjectの状況 以下が半年前のProjectの状況です。 現在と構成が変わっていない部分はあります。 Rails + Webpacker + Reactの構成 React.js v16.4.x Redux v4.0.0 ただし状態管理はreduxのstoreを使っていたり、Componentのstateを使っていたり統一感がない状態 非同期処理のmiddlewareには redux-saga を使用 UI補助ライブラリとしてmaterial-uiとbootstrapを併用 Component単位で依存しているUI補
いまからはじめるReact - Qiita
この資料は 11/16(土)開催の勉強会 いまからはじめるReact の資料になります。 React未経験者/初学者向けに チュートリアルを通してReact(およびHooks)について学ぶためのものです。 そのため、サンプルコードには例外処理などが不十分な箇所があります。ご注意ください。 Reactとは？ Reactとは Facebookが中心となってオープンソースで開発されている ユーザーインターフェースを構築するためのJavaScriptライブラリです。 (2019/10/30現在、v16.10.2 が公開されています) React – ユーザインターフェース構築のための JavaScript ライブラリ https://ja.reactjs.org/ コンポーネント(部品)を作成し、これらを組み合わせることでSingle Page Applicationのような複雑なユーザーインター
Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための
Reactのべからず集 - Qiita
Reactは便利なライブラリですが、ライブラリの想定を外れる使い方をするとうまく動かないとか、進化が続いているのですでに古くなってしまった書き方とかが存在します。 ここでは、そのような、Reactでやるべきでない書き方についてまとめてみました。 ★★★★ この「★★★★」は、「守らないと正常動作しなくなる」レベルのものについて扱います。 JSXを使うファイルでReactを用意し忘れる JSXはReact.createElementに変換されますので、直接アクセスしているように見えなくても、名前空間内にReactが必要です。 eslint react/react-in-jsx-scope コンポーネント内部からpropを書き換える あくまでpropsは親から子へ渡されるものなので、子の側で書き換えることはReactの枠組みの想定外となります。 setState以外の手段でstateを書き換え
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
React 未経験から運良く3案件連続で React に触れたので React 初心者あるある2018言いたい - Qiita
はじめに ACCESS Advent Calendar 2018 の23日目です。 18日目ぶり @naohikowatanabe です。無事いきなりステーキゴールドカードになりました。 注 ※社内勉強会の内容転記です。 ※もちろんお客さんの情報部分は削除しています。 2018/07/24 渡邉直彦 動機 React 初めて触って結構悩んだので、次初めて触る人が少しでも楽になれば。。！ 勉強時間は減らせないだろうけど悩む時間は減らしたい React 上級者の方へは 「最近の初心者はこの辺で悩んでいるのか」と感じていただければ。。 正確性より分かりやすさ重視にしたので温かい目で見て頂ければ幸いです 復習：React って何だっけ？ Facebook 謹製 UI ライブラリ https://reactjs.org/ JSX という「HTML と JS が悪魔合体」したスタイルらしい 初心者ある
React×ReduxにおけるTypeScript入門
昨日01/21に【サポーターズ】React×ReduxにおけるTypeScript入門(https://supporterzcolab.com/event/679/) というイベントで登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。 内容はTypeScriptの基本的な部分とReactやReduxの経験者向けのTypeScriptでの書き方の説明をサンプルコード付きでさせていただきました。 TypescriptとはTypeScriptをはじめる方法 TypeScriptの型について 一緒に入れると良いライブラリ ReactのComponentを書く Reduxのフローを書く TypeScriptを導入してみて
Angular 2/4が狭量で遅すぎる理由 | POSTD
(注：2017/08/30、いただいたフィードバックを元に翻訳を修正いたしました。) TL;DR — AngularJSのアイデアは、2012年には妥当と言えましたが、2017年においてはそうとは言えなくなっています。JSのエコシステムは、成熟度、柔軟性、および生産性の面で、あっという間にAngularの前を通り過ぎてしまいました。現在では、webpackやフロントエンドのNPM、成熟したツールとライブラリのエコシステムを背景として、 大型チームを有する企業であっても、 ReactやVueなどの軽量なJSライブラリを使用することで、大規模で柔軟性のあるSPAを、適切な設計で維持することが容易になっています。 加えて、Angular 2/4の問題が散見された3年の開発期間や議論の余地があるアーキテクチャの決定方針が、多くの企業にこの新しいフレームワークの採用を躊躇させているようです。 201
React ＆ TypeScriptを用いた業務システム開発 - Opt Technologies Magazine
先日、オプトからFeed Terminal というツールがリリースされましたので、主にフロントエンドについての大まかな全体像と技術的な拘りをご紹介しようと思います。 あいさつ Feed Terminal とは フロントエンド設計 管理画面の要件 アーキテクチャ選定 チームへの共有 実装・設計の中身の紹介 全体像（package.json） TypeScriptとの付き合い方 reduxの使い方 開発時の動作確認の仕方 テストやlintとの付き合い方 まとめ あいさつ こんにちは。uryyyyyyyです。 社内では遊撃手的ポジションにおりまして、今回のReact ＆ TypeScript案件であるFeed Terminalでは、フロントエンドの基盤設計やUIデザインなどを担当していました。 Feed Terminal とは Feed Terminalとはデータフィードマネジメントツールと呼ば
Twitterトレンド入り！ 「#React反省会」登壇資料一挙公開！ | Wantedly Engineer Blog
先日、5月10日(水)に行われた、Reactを運用する上で得た知見や失敗を共有する「React反省会」に登壇いただいた方々の資料を一挙大公開！ Twitterのトレンドにもランクインするほど大盛況だったイベントの登壇資料、見逃すと損するかも...? 1人目：天野 祐介氏 サイボウズ株式会社 グローバル開発本部 kintone開発チームリーダー 2人目：石井 光次郎氏 株式会社マネーフォワード UIテクノロジー部 3人目：鈴木 健太氏 株式会社クラウドワークス プロダクトDiv クライアントサポートG 4人目：外村 和仁氏 株式会社クックパッド サービス開発部 兼 人事部 5人目：泉 将之 ウォンテッドリー株式会社 エンジニア（インターン） 6人目：森脇 健人 ウォンテッドリー株式会社 エンジニア Wantedly feedチームリーダー 7人目：zuckey氏(飛び込みLT枠 8人目：na
React + Redux + TypeScriptの最小構成 - Qiita
※更新履歴 webpack2-rc & TS2.1 & @types対応 webpack2 & TS2.3 対応 React16-beta & TS2.4 対応 こちらの記事の続編です。 http://qiita.com/uryyyyyyy/items/63969d6ed9341affdffb 問題提起 今時、型のない言語とか使いたくないですよね！（2回目） ReactといえばRedux（flux実装の実質デファクト）。 ということでTypeScriptでReduxのサンプルを作ってみます。 （reduxのおよその仕組みは他の記事を読んでください。） 環境 NodeJS 8.2 React 16.0-beta TypeScript 2.4 $ tree . . ├── index.html ├── package.json ├── src │ ├── counter │ │ ├
サービスの成長を支えるフロントエンド開発 #denatechcon
1. Copyright © DeNA Co.,Ltd. All Rights Reserved. サービスの成長を 支えるフロントエンド開発 February 10, 2017 Naoki Endo x Takefumi Yoshii DeNA Design Strategies Office DeNA Co., Ltd. 2. Copyright © DeNA Co.,Ltd. All Rights Reserved. AGENDA ■ 自己紹介 ■ サービス運用におけるパラダイムシフトとの最適な付き合い方 ■ 直近の業務における選択 - React を選んだ観点 - ■ 直近の業務における選択 - Vue.js を選んだ観点 - ■ 中長期的にサービスを支えるコンポーネント設計 2
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
This document summarizes a presentation about React Native given at DroidKaigi 2017. It discusses how React Native allows building native Android and iOS apps using React by rendering UI components to native platform views. It describes how React Native maps React components to native platform views, implements native modules to access platform features, and uses the JavaScript bridge to allow cal
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ
みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう
React/reduxでつくったSPAがリリースされたので学んだことを晒す - Qiita
時系列順に書いているので、話題がアッチコッチいきますが 現場のライブ感を重視しています！ プロジェクトの後半で、すごい優秀な方が入ってきてくれたのでそこからの受け売りも結構混じっています。神様ありがとう。 プロトタイピング 何は無くともまずはプロトタイプを作成しました。 今回はUIライブラリとしてMaterialUIを採用。 superagentを使って外部JSONファイルを読み込んで、Reactコンポーネントとして表示するだけ。 この時点でのコードレビューでの話題は主に、CSSをどうするのか問題。 MaterialUIにコンポーネント自体のstyleは既に定義済みだが、それだけでは足りないレイアウト調整が発生しそうという懸念でした。 結論は、コンポーネント内に直接定義してしまってOK。 実際作業を進めてみたところ、最初の想定よりは補助的なCSS記述は不要でした。 reduxの導入 作成す
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート 小林徹 2016年9月3日に東京電機大学で開催された「HTML5 Conference 2016」のセッションを特集する第二弾は筆者である私、小林徹が登壇した「 Reactの最新動向とベストプラクティス 」の内容を解説します。 Reactの現状 Reactは、2013年にFacebookが公開した、Viewを作るためのJavaScriptのライブラリーです。 https://facebook.github.io/react/ 現在のバージョンはv15.3.2です。 v1.0.0からv14.0.0までのバージョンはありません。 「すでに安定していてプロダクションでも利用できる」ことや「セマンティック・バージョニング（パッチ.マイナー.メジャー）に準拠している」ことを示すために、v0.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers
Reactで学ぶ！いまどきのWeb開発
WantedlyにReact + Reduxを導入した話
