150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
若手エンジニアの俺がフロントエンドのビルドを早くしてReactも導入しちゃった話 - SMARTCAMP Engineer Blog
またオレ何かやっちゃいました？ こんにちは！！！スマートキャンプでエンジニアをしている吉永です！ 自己紹介記事はこちら 前回の記事はこちら 弊社の主力サービスであるBOXILはリリースから時間が経っていることもあり、バックエンド・フロントエンドともに様々な技術的負債となる部分を抱えています。 また、その負債の中には普段の業務時間では手をつけにくいものもあるため、定期的に薪入れと呼ばれる開発改善日を設けています。 先月行われた薪入れはいつもよりも長い1週間の期間が設定されており、今回の記事ではその中で私が行ったフロントエンド改善の内容や、そこに至った経緯について説明します。 やったこと ビルドフロントの短縮 Reactの試験導入 BOXILのフロントエンドについて 現在のフロントエンドを改善するに至った経緯とその背景 フロントエンド負債の認識のすり合わせ 負債を話し合う会の開催 理想を話し合
フロントエンドの消失 - または戦争が激しくなる話
React Server Components に感じたフロントエンドの消失という記事に端を発する一連の議論だが、実際この記事で書かれていることはそうだろうなと思う。話の流れとして誤ってる部分はないと思うし同意する。 この記事ではフロントエンドエンジニアとして、この件についての僕の見解を書く。もちろんフロントエンド（とは？）の総意ではない。 元記事と重複する部分多いが、そこは同じ問題を取り扱う以上避けて通れないため、ご容赦いただきたい。 同じ領域を取り扱ってる以上、開発戦争は激しくなる 様々な理由によりユニバーサルが求められている ※この記事でいう「戦争」とは、お互いの領域を食い合う開発が、活発化することを「戦争」と称しているだけです。それ以上の意図は全くございません 領域がかぶっている 最近のフロントエンド系ユニバーサルエコシステムは、たしかに PHP や Rails の領分を侵そうとし
作ろう！自分だけの Figma コード生成機✨
こんにちは。Figma プラグインを愛し、Figma プラグインに愛された男、そう、我こそは seya と申します。 先日 Figma から React のコードを生成するプラグインを公開しました。 そして、これのソースコードをこちらのレポジトリにて公開しています。 面白いと思ったらぜひ Star お願いします！⭐️ 上記レポジトリは React を生成するためのものですが、React 以外にも色々な形で View を書いているところがあるでしょう。なのでこの記事では、上記レポジトリのコードを拡張・編集して「自分だけの Figma コード生成機」を作れるための解説を書きます。 ちなみにですが、 Fork して作っていただいたものでもご自由に Figma Community に publish などいただいて大丈夫です。何か文句を言うことは一切ありません。ただ「作ったよー」とご報告いただける
脱Reduxを試みて失敗した話、その原因と対策について
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんの Next.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです
デザイナーとエンジニアで考えるReactコンポーネント設計 - KitchHike Tech Blog
コンポーネント設計がReact Nativeの開発速度に直結する CTOの Shoken です。キッチハイクでは1年半前に0ベースからReact Nativeでアプリ開発を始めました。React Nativeアプリを長期的に開発・メンテナンスする際に重要になるのがコンポーネント設計です。1年半の開発を通して、デザイナーとエンジニアがコンポーネント設計での共通認識を持っていることが、機能追加・修正などの開発速度に直結するという学びを得ました。この記事では、キッチハイクアプリのコンポーネント設計の考え方を紹介します。 コンポーネント設計がReact Nativeの開発速度に直結する Atomic Designという共通言語 コンポーネントを構成する4つの要素 "デザインとしての構造性" と "コードとしての再利用性" ButtonはAtomなのかMoleculeなのか問題 Atomic Des
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 Native Meetup Portlandでハイブリットアプリ開発について話しました - tomoima525's blog
先日React Native Meetup Portlandという勉強会でReactNativeとNativeのハイブリットアプリ開発について発表をしてきました。アメリカの自社開催以外のの勉強会で発表することは初めてだったので、知見と反省をメモしておこうと思います。 経緯 会社のオフィスは現在サンフランシスコとポートランドにあります。ポートランドは今アメリカで一番人気な街と言われているのですが、実はスタートアップやIT企業も数多くあります。React Nativeは今人気なフレームワークで、つい先週もReact ChainというReact Native(React.jsでない)のカンファレンスが開催されたばかりです。色々な経緯でそんなポートランドのReact NativeのMeetupグループにオフィスを提供して勉強会を開くことになり、自分が発表者の1人として登壇させてもらうことになりまし
どんなチームがReact Nativeによる開発に向いているか - Boostnote
はじめに 最近はアプリ開発にReact Native（以下RN）を使用するケースも増えてきているようですが、RNはネイティブアプリを開発する最強のライブラリというわけではありません。 メリットをうまく利用すればとても良いアプリができると思いますが、失敗すると、さらに倍の時間をかけてSwift、Javaで作りなおし、、、といったことも発生するかもしれません。 特徴や他社事例をよく調査し、チームの状況に応じて、採用するかどうか判断することがとても大事です。 この記事では、どういった状況に置かれたチームが、RNで開発するのに適しているか、僕なりの考えを書きますので、参考にしていただければと思います。 RNがどういったものであるかの説明や、実装方法については書きません。 目次 はじめに 目次 1. なるべく早くリリースしたいチーム 2. iOS/Androidで仕様・見た目を揃えたいチーム 3.
FRONTEND CONFERENCE 2017でReactハンズオンを開催しました - マルシテイア
speakerdeck.com 2017-03-18 (土) 梅田で開催された FRONTEND CONFERENCE 2017 で、Reactのハンズオンを開催しました。 kfug.jp 今回のハンズオンでは Reactアプリケーションの開発を身体で覚える React開発環境におけるトレンドを体験する の2つを目標に、Next.jsを利用した簡単なReactアプリを作成しました。 この記事では、ハンズオン開催にあたって考えたことや、工夫した点などについて書いていきます。 ハンズオンの方向性 Next.jsを採用 ハンズオンの流れ 工夫した点 お手本ブランチを用意する コード修正の指示をdiff形式で書く 自己紹介よりも前にセットアップをお願いする 反省した点 gitが手元にない人は git checkout できない お手本ブランチ作るのしんどい…… 皆様の反応 ハンズオン 資料 感想
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】そろそろ技術ブログで setCount(count + 1) と書くのはやめませんか