新規事業開発での技術選定の意思と意図 (フロントエンド編) - Sansan Tech Blog
こんにちは、関西支店で新規事業開発室に所属するソフトウェアエンジニアの加藤です。Bill Oneという新規サービスの開発に携わっています。 バックエンド編の続きとして、フロントエンドで私たちが使用している技術やライブラリを振り返って、どんな意志と意図があるかを確認していきます。 Bill Oneは今年の1月ごろにピボットし、それまで開発してきたフロントエンドを全て捨て、1から作り直しました。ピボットの際に改めて技術選定を行い、それまで使っていたライブラリ等を見直したので、本稿ではピボット前後で変化した箇所を中心にフロントエンドの技術選定を紹介します。 前提 改めて前提です。私たちのチームで開発しているBill Oneは今年の5月にローンチしたばかりのサービスで、チームのエンジニアは5名です。開発しているアプリケーションはSingle Page Application (SPA) で、エンジ
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
QuipperにおけるReact Native活用事例 - スタディサプリ Product Team Blog
この記事はReact Native Advent Calendar 2017の5日目の記事です。 こんにちは。モバイルエンジニアの@hotchemiです。 今回はQuipperにおけるReact Native活用事例に関して紹介したいと思います。 目次 導入の背景/効能 開発におけるメリット/デメリット リリースサイクル 技術スタック おわりに 導入の背景/効能 Quipperが開発しているスタディサプリでは合格特訓プランという現役大学生コーチによる学習伴走サービスを提供しており、コーチとユーザーのコミュニケーションをより円滑にする為にメッセージ機能をベースとした業務補助iOSアプリの開発を実施する事になりました。 最初のバージョンこそSwiftで開発を進めていたものの以下の組織的・技術的な課題に直面した為、React Nativeを用いた開発に方針転換し現在では運用が軌道に乗っています。
TypescriptとReact HooksでReduxはもうしんどくない - Qiita
🏔背景 Reduxはしんどい、だるい、でかい、というイメージが定着して久しいですね 😭 僕も3年ほど前にどっぷり触ったときは「こいつぁなかなか」という感想でした。 しかしながら状態管理ライブラリやらFlux思想やらの流れとしてReduxが不可避の存在だったために、おつらい経験をされた方も多かったのかなとお察しします。 時代は巡り2019年末、令和元年のご時世ではすっかりTypescriptによる型安全、正式提供されたReact Hooksによる脱Class component・HOCフリーな省エネ設計などが定着してきており、この両者を前提とした構築がもはやスタンダードとなってきています。 諸兄の人柱的知見も相まって最近は敬遠されがちなReduxパイセンですが、この度久方ぶりにがっつりと向き合ってみると、上述した両者の恩恵を受けてなんだか垢抜けた感じになっていました。知ってましたか？
利用者調査「State of JavaScript」最新版が公開、2万人強が参加
JavaScriptの利用動向に関する年次調査「State of JavaScript Survey」（2019年版）が発表された。JavaScriptを開発に利用する2万1717人の回答を集計、分析したものだ。全世界の100以上の国から回答を得た。回答が多かった上位5カ国は米国（23.7％）、英国（6.4％）、フランス（5.5％）、ドイツ（5.1％）、カナダ（4.0％）。日本からも118人が回答した。 開発者の属性は4種類に分かれている。フルスタック（48.3％）、フロントエンド（36.6％）、Web（11.7％）、バックエンド（3.4％）だ。 勢いのあるフレームワークやツールは？ 調査結果のハイライトは次の通り。レポートでは、2019年のJavaScriptエコシステムの全体像をさまざまな角度から示している。 図中の個々の線は、JavaScriptのフレームワークやツール、拡張について
React Native 2019年の振り返りと今後について - Qiita
この記事は React Native アドベントカレンダーの 3 日目の記事です。 どうも、Naturalclar(@natural_clar) です。 普段の業務では、Expo ではなく react-native init で作成された、いわゆる素の React Native で開発しています。 先日のハムカツさんの記事が今年の Expo に対する振り返りをやっていたので。 自分の方は素の React Native についての2019年の振り返りと、React Native の未来について語ろうと思います。 2019/01 1/25 React Native v0.58 リリース v0.58 が今年最初のReact Native のリリースとなりました。 この辺から React Native でも TypeScript のサポートが増えてきた感触です。 今年は日本で TypeScript
react-redux v7.1＋TypeScriptでconnect, mapStateToProps, mapDispatchToPropsを撲滅する - 文系プログラマによるTIPSブログ
ついに例の定型文3兄弟を除去する事ができるようになりました〜 github.com 先日react-reduxがv7.1にアップデートされ、そこでhooks対応の関数がいくつか追加されました。 今回紹介するものは「useSelector」「useDispatch」の2つです。 react-redux v7.1の新機能 useSelector useDispatch connect関数は不要になる v7.1とそれ以前のコードの比較 v7.1以前のTypeScript + react-reduxのコード v7.1以降のTypeScript + react-reduxのコード 全部入りのサンプルコード 万能ではない点に注意 雑感 react-redux v7.1の新機能 useSelector ざっくり説明すると、mapStateToPropsをhooks対応したものです。 useSelecto
【SSRも】Fleur − 新しいFluxフレームワーク【イケる】 - pixiv inside
みなさんこんにちは！ VRoid Hubでフロントエンドエンジニアをしている花倉ミツカ (a.k.a. ラグ)です 🙌 今回のpixiv insideはちょっとだけお仕事から離れて(ガチ)アイスブレイクです。私が1年ほど開発しているFluxフレームワーク、Fleur (フルール, @fleur/fleur)について、その設計や使い方についてご紹介させていただきます！ 目次 どういうフレームワーク？ 実際の使い方 質問 まとめ どういうフレームワーク？ pixiv Sketchで採用されている Fluxible というFluxフレームワークを参考に、「書きやすさ」と「現代的な機能の採用」の二点を重視してTypeScriptでフルスクラッチしました。（Fluxibleは私が知ってる中で一番"整っている"フレームワークだと思っています♨） Fleurの大規模なプロダクションでの採用実績はまだあ
Vue.observable & TypeScriptで手早く安心できる状態管理を手に入れる - Qiita
Vue.jsにおける状態管理方法として何を使っているでしょうか。 dataにつっこむ ReduxとかMobXとか といった方法もありますが、もっともメジャーなものはVuexでしょう。 Vuex&TypeScriptがなかなか大変 フリーダムなフロントエンドに疲れたのか、最近はTypeScriptを採用するケースも増えているかと思います。型で保証されている安心感は一度味わうと抜けられないですよね。 しかし、実際やってみた方であれば実感するかと思いますが、VuexとTypeScriptを組み合わせるのはなかなかに大変です。 クラスコンポーネント化したVueコンポーネント内でのVuexとの接続に関しては、ktsnさんが公開されているvuex-classを利用することで可能となります（ありがたい）が、Vuex内部でのstate/getters/actions/mutationsの定義においてきっち
Conditional Types I/O
Roppongi.js #5 発表資料。redux-aggregate の 型合成テクニック https://roppongi-js.connpass.com/event/95936/
現場から届けるReactプロジェクトの悩みと改善
Transcript ݱ͔Βಧ͚Δ3FBDUϓϩδΣΫτͷ Έͱվળ� 6*5���ਐԽ͢Δ�3FBDU�KT wTBLJUP !@@TBLJUP@@ � w'SPOU�&OE�&OHJOFFS� w3FBDU XFCQBDL (BUTCZ+4� w&WFOU� w#POpSF�'SPOUFOE� w'SPOUFOE�5SBJOJOH�.FFUVQ� w3FBDU�NFFUVQ� w*OTJEF�'SPOUFOE� ࠂ None *OTJEF�'SPOUFOE��� �����݄��։࠵ʂ✨ IUUQT���JOTJEF�GSPOUFOE�DPN� $'1ืूͷకΊΓ ໌ �݄����࣌�� ·Ͱʂ ·ͩؒʹ߹͏ʂʂʂ ࠂऴྃ ݱҰͭҰͭʹ3FBDUʹؔ͢Δ͕͋Δͱ͓ͬͯΔ ࠙ձͰͦΜͳͰΓ্͕Γ͍ͨ ͷ3FBDUϓϩδΣΫτͷݱͰվળ
Redux はもう辛くない。redux-aggregate - Qiita
書き味の悪さは致命的なレベルだと思っています。この課題を解決するべく、ヒントを求めて様々な状態管理ライブラリを試しました。unistore や parket、Vuex、いずれもイベント駆動ですが、そこには書き味醸成のための共通点があることに気づきます。 それは、状態を変更する手続きが少ないということです。それらにインスパイアされた Reduxヘルパーが redux-aggregate です。考案にあたり気をつけたのは以下の点です。 既存のエコシステムを侵害しない 関数型で完結させる TypeScript による推論 0 dependencies で薄いこと なお、これは Redux を扱う上でのヘルパー（非middleware）のため、Redux の基本的な理解は予め必要です。 📝 コードの紹介 【Before】今までは「+1」のために、これだけのコードが必要でした。 const ini
漸進的型付け言語の時代に必要なもの - mizchi's blog
最近では、Gradual Typing、漸進的型付けと呼ばれる型システムを備えた言語(拡張)が増えてきています。 次のようなもの JavaScript: TypeScript / Flowtype Python: mypy / pyre-checker PHP: hack / php-storm flow/pyre-checker/hack と facebook 製が多いですね。 この記事は、それらを使う動機と運用について書きます。この記事の出発点として、 おそらく TypeScript/Flow で発生した問題が後発の言語で発生すると思っており、それらを使う方や、設計する人への提言でもあります。 自分は昔 https://github.com/mizchi/TypedCoffeeScript というAltJS作ろうとして、実装のツラミはなんとなく知ってるつもりです。ホビーレベルで作るもの
【Reduxに疲れた人のための】Undux入門 - Qiita
巷のフロントエンドではReact+Reduxの技術スタックがどちゃクソ流行ってますね！ とはいえ、Reduxだとやはりどうしてもひとつアプリを作る際のボイラプレートコードの多さや、ステートの更新によってトリガされる副作用処理のハンドリングをredux-sagaやredux-side-effectsなしではうまくやれないケースが多いです。 もし、Reduxとその周辺ライブラリのよせあつめにちょっとでもツラミを感じ始めたら、Unduxを試すチャンスです。 Unduxとは？ Dead simple state management for React Reactのための死ぬほどシンプルなステート管理ライブラリです。 特徴 TypeScriptやFlowなどでの型付けを意識した設計。 ReduxにおけるAction, Reducer, Dispatcher, Containerなどの概念を必要とし
Redux typed actions でReducerを型安全に書く (TypeScriptのバージョン別) - Qiita
はじめに Redux + TypeScriptな環境でAction typeに型を定義し、Reducerを型安全に書く方法をTypeScriptのバージョン 1.8 / 2.0 / 2.1 別にまとめてみた。 なお、試したサンプルコードは GitHub にあります。下記の通りTypeScriptのバージョン別にブランチで分けてあります。 TypeScript 1.8版 TypeScript 2.0版 TypeScript 2.1版 また、TypeScript 2.0、2.1はまだリリースされていないので、8/12時点の物を使って確認している(2.0はnpm i typescript@betaで、2.1はnpm i typescript@nextでインストール)。 サンプルの内容 +ボタンをクリックするとカウンタを1つインクリメント -ボタンをクリックするとカウンタを1つデクリメント テキス
RailsエンジニアがReactを始めてSSRとReduxとTypeScriptを導入するまで | bitjourney Kibela
RailsエンジニアがReactを始めてSSRとReduxを導入するまで Roppongi.rb #3 "Rails x Frontend-Tech" 自己紹介 github.com/gfx BitJourneyでKibelaを開発 Speee, Inc. で技術顧問をしてる Reactは現職で初めて触った（2016年8月~） 今日の話 Kibelaのフロントエンドの話です。 読みはキベラ Markdownで書けて、フロー情報（Blog）とストック情報（Wiki）を区別して整理できる情報共有ツール これまでの話 新規Railsアプリに小さく導入するReact // Speaker Deck （dex1t, 2016/09/05） 小さく導入して学びながら開発を進める ⭕ Interactive UI componentをReactで＆jQueryも併用 ❌ viewをすべてReactで実装
Reduxの概念をRxJSとTypeScriptで理解する(初心者向け) - Qiita
(2016/12/15追記) この記事はDeprecatedです。 Reduxの概念をRxJSとTypeScriptで理解する ver.2 が最新版になります。 GitHubリポジトリはこちら → ovrmrw/understanding-redux-with-rxjs git cloneしたらnpm installしてnum run tsですぐに動かせます。 (注: Reactの話は一切出てきません) Reduxとは Redux公式 アプリケーション全体で状態(state)を一つのJSONツリーの構造で持ち、それをActionがキックされる度に全体更新して配信するという概念。 僕は最初FluxとかReduxとかよくわからなかったけど、色々参考にしながら自分で書いてみたらようやく理解できました。 Middlewareという概念はよくわからなかったし今でもよくわかりません。 ロガーとか便利な
TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed - console.lealog();
そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。 React陣営は @koba04 & @yosuke_furukawa Angular陣営は @laco0416 & @armorik83 モデレータは @Shumpei メモは雑なので、漏れとか齟齬とかあるかもですよ。 トークバトル React / Angular 2の概要 スター数とかバージョンとか コードがだいたいこんな感じとか 開発言語 こば: だいたいBabel、TypeScriptでもやれる 会長: だいたいBabel使ってると幸せになれる らこ: JavaScript or TypeScript or Dart らこ: まあTypeScriptですよね らこ: Dartはリポジトリが分かれました はち: ReactやるからAngularやるからで開発言語を選ぶのはナン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
