This Week In React #129: useEffectEvent, Storybook, OpenNEXT, React Email, Remix, Next.js, Pointer-Events, Expo-MDX...
This Week In React #129: useEffectEvent, Storybook, OpenNEXT, React Email, Remix, Next.js, Pointer-Events, Expo-MDX... Hi everyone! This week is pretty busy for an end of the year 🤪 I'll let you discover it all. My episode for the React Round Up podcast is online. It's about the latest React 18 features, MDX or even Docusaurus. 👋 Last edition of the year. The newsletter will be back on January 1
この記事は何か？ バージョンが 0.59 よりも前 の React Native アプリに、 Lottie を利用して Adobe After Effects で作成したアニメーションを組み込んだときの話をまとめた記事です。 対象読者 React Native アプリにアニメーションを組み込みたい方 React Native アプリにアニメーションを組み込もうとしてハマっている方 React Native アプリに Adobe After Effects で自作したアニメーションを組み込んでもらおうとしている方 ※ ここでいう React Native は、バージョンが 0.59 よりも前のものを指します。 ※ 動作確認は Android 端末でしか行なっていません。 ※ iOS 端末だと動作しない可能性があります。後ほど iOS 端末で動作確認を行い追記します。 この記事のゴール バージ
本記事では React Nativeはオワコンなのか？ について解説していきます 「React Nativeはオワコンだ」 という意見を耳にしますが 大手web企業エンジニアの見解 を述べます ↓
Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, and a point further to the right means more users want to learn it; or have used it and would use it again. X-axis rangeNegative opinionsPositive opinionsY-axis rangeHave usedHave not usedReactReactReact. Velocity: 39.2. Overall more negative opinions and/or less usage over time.2016react, 2016:Mostly
GraphQL採用アンチパターン - algonote
GraphQLは銀の弾丸か 前口上 Webやアプリ開発において、サーバー間やサーバークライアント間でデータを受け渡す方式には色々なものがあります。 古くはSOAPやXML、最近のWEB APIはほとんどの場合JSONのREST API、マイクロサービスならProtocol BuffersでgRPCが多いところでしょうか。 GraphQLはFacebookによって開発されたAPI用の言語です。一般に少ないリクエスト回数で柔軟にデータを取得できるのが利点とされています。一方で、使い所を選ぶツールでもあるので今回取り上げてみます。 GraphQLの基本構造 まずJSON API とGraphQLを比較してみましょう JSON REST APIの例 GET /posts/1 request params なし response { "user": { "name": "user1" } "titl
記事を書くことに意味を感じなくなったのと色々考えた
2023年になったので、今ままでのことを振り返る 今日は、普段の仕事とか僕の最近の悩みを言語化しようと思いました。 そもそも僕は、国語が弱いので、言語化って言葉も去年知りました。 普段から、Flutterのアウトプットを続けて、Zennの記事をいっぱい書きました。しかし、それをやったからといって僕の評価が変わることはなかった… 最近無駄だから、全部記事を消そうとも思った。記事書いても僕のスキルが伸びていたわけではない。中身がないと思う人もいるから、それ感じて記事を書くのをやめようかな〜と思いつつもついつい書いてしまう。 最近の楽しみは、普段やらないビジネスロジックを書いたり、他の言語で書いているコードをDartで書くことですかね。Dartで書いてるのをSwift、Kotlinで書いたりもします。 🗒️そもそも何で記事を書くのを始めた? 元々、Qiitaで記事を書いてました。でも、Zenn
UdemyでセールをやっていてReactNative1に触ってみたかったので今回はUdemyで見つけたReact Native入門：ニュースアプリを作りながら覚えよう/Hooks対応 2020年という講座を受講してみました。 感想 講座ではexpoを使った開発とstate2を便利に使うRedux3とRudux-React4を体験することができました。 私はReactはチュートリアルで触った程度、Reduxに関しては知識ゼロでしたが、講座内の説明がわかりやすく 苦なく理解することができました。また、実際に環境構築からアプリストアのリリースまで丁寧な口調で説明して くださるので、今後のアプリ作成のフローが理解できました。 おすすめするポイント 実際にExpoのドキュメントを一緒にみたり、Reduxのドキュメントを見たりと講座終了後も学習が進められるように工夫されています。 ExpoやReact
Terms VirtualizedList: The component behind FlatList (React Native's implementation of the Virtual List concept.) Memory consumption: How much information about your list is being stored in memory, which could lead to an app crash. Responsiveness: Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, inste
firebase firestoreで非同期でデータを取得する(Javascript,reactnative) - Qiita
firebase firestoreで非同期でデータを取得する(Javascript,reactnative)JavaScriptFirebaseReactreactnativeFirestore 背景 ReactnativeでAndroidアプリ開発をしています。 本当に初学者なので間違えている点あると思いますがご了承ください、、、 firebase & Reactnativeでの開発をしていてタイムラインを実装しようとしたときに 1.まずPostをcollectiongroupとして取得 2.そのPostそれぞれが持つuidを元にPostを投稿したUserを取得し、User情報と一緒にListにぶち込む 3.そのListをsetListとしてstateを変更してFlatListで表示する という実装をしたかったのですが、FlatListをScrollViewの中に入れてしまったりすると
React (Typescript) + react-three-fiber + three-vrmでVRMモデルを表示してみる - Qiita
react-three-rendererというのもあるが凍結しているようで、開発陣も「代わりにfiber応援してネ」って言ってる。ちなみにreact-three-fiberはReactNativeにも対応しているらしい。 そもそもVRMファイルとは ドワンゴが作った、人型3Dデータ用のファイル形式です。 最近VRChatを始めいろんなところで3Dモデルの需要が増えている中で、ソフトごとに形式が違ってはせっかく作った3Dキャラもったいない！ということで作られたフォーマットらしいです。画像の jpgとかpngとか、ハードウェアで言うならUSBとかと同じですね。 共通フォーマットができたことで、Vroid Hubみたいな、有志の方が作成した3Dキャラを手軽に見ることができるようになったり、中には無償で配布されているVRMファイルもあります！ やってみる 0. React環境を作る create-
Kotlin Multiplatform Mobile(KMM)によるロジックの共通化と、Reduxベースによるマルチプラットフォームアーキテクチャ - MONEX ENGINEER BLOG │マネックス エンジニアブログ
こんにちは。ferciを担当しているマネックス ラボの佐藤です。今回は、一年後を見据えてiOSとAndroidのアーキテクチャを考えるとするならば、どうするのが良いのかについて書きたいと思います。 なお、モバイルアプリのアーキテクチャは規模や要件次第であるため唯一の正解はないことと、本記事執筆時点ではStableではなくベータ版であるKotlin Multiplatform Mobile(KMM)についても言及していますので、あくまでご参考にしていただければと思います。 ferciのプロジェクトで起きている問題 ferciは2019年2月に開発をスタートしていることから、当時主流だったアーキテクチャで実装されています。非同期処理にはRxを使い、MVVMを意識した構造になっています。 UIにこだわりたいことと、ライブラリのアップデートに巻き込まれることを避けるために、ReactNativeや
[ReactNative/Expo] Paper と Navigation v5 で Twitter Clone アプリを作成する〜初心者向け〜
条件Expo: 36.0.0 / Expo-cli : 3.13.1macOS の Expo 開発環境でアプリを作成します。テキストエディタは Visual Studio Code を利用します。VScode の設定がまだの方は VSCode に乗り換えてはじめてやること！〜初心者向け〜 記事をご参考ください。別のテキストエディタでも構いませんが VSCode でショートカットキーをよく利用します。作成するファイルは JavaScript を使用 ( TypeScript は使用しない ) します。Android Studio エミュレータ・iOS シミュレータ使用します。アプリの動作確認は、Android/iOS のデバイスとシミュレータで行いました。React のフックの知識があればより理解しやすくなります。 → 主に、React.useState、React.useCallback、
![[ReactNative/Expo] Paper と Navigation v5 で Twitter Clone アプリを作成する〜初心者向け〜](https://cdn-ak-scissors.b.st-hatena.com/image/square/460b972a070fa14751b58874bf2dd787e118180a/height=288;version=1;width=512/https%3A%2F%2Fwww.jacepark.com%2Fwp-content%2Fuploads%2F2020%2F02%2Fscarf-4849441_1920.jpg)
Firebaseを採用したサーバーレスのプロダクトでGitリポジトリをちゃんと管理しようとすると、多数のリポジトリが生まれてしまうことって、あるあるなのではないかと思います。あまり話題にはなりませんが、少なくとも私の経験上はそうなりがちです。 私の場合、Firestoreなどのセキュリティルールを管理・テストするリポジトリ、Cloud Functionsで実行するサーバー処理を管理するリポジトリ、マスターデータやマイグレーションスクリプトを管理するリポジトリ、Firestoreのバックアップなどを走らせるWorkerのリポジトリ、Webアプリのリポジトリなどを作成して、複数リポジトリを管理していたときがありました。 いまでは、Firebaseを利用したアプリケーションを開発する際には、lernaを採用したMonorepoでプロダクトを設計しています。Monorepoは、Firebase開発
2021年に触った技術
この1年も、いろんなものを作っていろんなことを経験してきたのでまとめます。何か新しいこと勉強したいな〜みたいな人の参考になったり、これをきっかけに僕に仕事をお願いしようみたいになってくれる人がいると嬉しいです。 2020年に触った技術をまとめた記事はこちらになります。よければこちらもどうぞ。 はじめましての方向けに軽く自己紹介しておくと、法人として動いてはいるものの実態としてはフリーランスエンジニアとして、新規サービスの開発・運用をお手伝いしています。Web/アプリ、バックエンド、インフラまで、サービスの立ち上げに必要な技術的なことは一通りできるように頑張っています。以下に上がっているものを見ると「色々やりすぎでしょ」みたいな感想になるかもしれないですが、僕の方針として サービスを作る上で必要なものは全部勉強して身につける なので、ある意味こうなるのは仕方ない感じなので許してください。 開
マイベストを支える技術とサービス構成
こんにちは。マイベストでCTOをしている @miraoto です。mybest BlogKaigi 2024の1日目を担当させていただきます。 マイベストは、一部の国（日本、アメリカ）の商品を実際に購入して自社の施設で比較検証したり、専門家を中心としたクリエイターが自らの愛用品やおすすめ商品を紹介しているサービスです。 自社で検証した情報をデータ化し、それを汎用的な選択UXとして提供することで、ユーザーの選択に関する課題を解決しようとしています。 マイベストは日本を含む9の国と地域で展開しており、日本では月間3000万を超えるユーザーの方にご利用頂いております。 この記事では、マイベストを作るにあたり、どういった技術、アーキテクチャを選定したのか、その背景と意思決定をまとめて共有したいと思います。 Ruby/Rails マイベストはサービス開始から7年運用されており、そのすべての期間でバッ
はじめに 今回は、ReactNativeで地図を表示させる場合に使用するライブラリである、react-native-mapsについての紹介記事です。 インストール自体は簡単ですが、GoogleMapを使う場合は少しだけ手間がかかるので、そのあたりについても解説します。 react-native-mapsとは ReactNativeにおける地図コンポーネントライブラリです。 個人的には地図を表示させるならこれ一択かなと思います。 インストール 以下の環境を前提とします。 react-native@0.63.3 react-native-maps@0.27.1
こんにちは、最近フロントエンドと仲良くなってきたむっそです。 もともとバックエンドばかりやっていたのですが、仕事の都合でフロントエンド(React/React Native/TypeScript)も触ることが多く、今回は 便利そうな画像/ファイル圧縮ライブラリを調べてみました。 (にわか仕込みで大変恐縮です) はじめに フロントエンド側で大きめなファイル(画像やPDF/CSVなど)を受け取った時に以下のような流れでシステムを組むことが多いのかなぁと思います フロントエンド ⇒ バックエンド(圧縮処理) ⇒ インフラ(S3など) ただ個人的に 「ネットワークがボトルネックになることが多いので、極力ネットワークを経由したくないし、早めに圧縮したいなぁ」 っていうのが正直な気持ちです。 となると、理想的な流れは以下のような感じかと思います。 フロントエンド(圧縮処理) ⇒ インフラ(S3など)
Modal · React Native
The Modal component is a basic way to present content above an enclosing view. Example Reference Props View Props Inherits View Props. animated Deprecated. Use the animationType prop instead. animationType The animationType prop controls how the modal animates. Possible values: slide slides in from the bottom, fade fades into view, none appears without an animation. TypeDefault
扇形を描画したい初心者の格闘日記〜SVG vs Canvas〜 - 医学生わくばの欲張り技術ブログ
どうも、わくばです！ ReactNative アドベントカレンダー10日目です！ アドベントカレンダーは初投稿で、拙い内容かもしれないんですが箸休め程度に楽しんでいただければと思います。 プログラミングはまだ始めて半年も経っていない初心者ですが、エンジニアの方々ともっと絡みたいと思って今回アドベントカレンダーに参加させていただきました。 Twitterやってるのでぜひぜひフォローお願いします！！ Follow @PYEcracker99 概要 こんな感じのUIを作るために、SVGとCanvasを用いて扇形の描画を検討してみた記事です。 完成イメージ 目次 自己紹介 動機 扇形の条件 使用を検討したツール SVGを用いた扇 メリット デメリット Canvasを用いた扇 メリット デメリット まとめ 自己紹介 現在医学部5年です。医療分野においてもITリテラシーが重要だというのはヒシヒシ感じ
最近、本業で動画制作を行う機会があり、Adobeでモーションを作成したりしていました。 そこで作成したモーションをWEBでも再生できないかと思いやってみました。 今回はlottieというライブラリを用いて行います。 サイト本体はGatsbyを使用しましたが、React環境であれば同様の方法で試せると思います。 lottieとは Airbnbが開発したライブラリ。AfterEffectsで作成したモーションをAndroid,ReactNativeなどで再生できるようにしてくれます。。 WEBではlottie-webというライブラリを使用します。 lottie lottie-web 動画制作AfterEffectsを用いて行いました。 bodymovinというライブラリを使用することで、AfterEffectsで作成したモーションをJSON形式で書き出すことができます。 詳しくは解説しませんが
機能 Native Modules 出来ること ・関数の作成 ・イベントの通知 ・コールバック Native UI Components 出来ること ・Viewの作成 ・Viewのイベントの通知 Native Modules ダイアログを表示するModuleを例にします。 [機能] 1, Androidのダイアログを表示する。（関数の作成） 2, ダイアログの"OK"ボタンがクリックされたらコンソールに"true"が表示される。（イベントの通知） 3, "DATE"ボタンがクリックされたら現在時刻が表示される。（コールバック） public class DialogModule extends ReactContextBaseJavaModule { // コンストラクター public DialogModule(@NonNull ReactApplicationContext react
【LINE DEVELOPER DAY 2021】言語を書き換えるプロジェクトの知見、ReactNativeアプリ開発の舞台裏【イベントレポート】
LINE株式会社 Kyoto Developer Division Client Engineering Team Software Engineer 植松 啓誠 2019年入社。LINE証券・LINEほけん等の金融サービスでフロントエンド開発に従事。現在は出前館で、React Nativeアプリの開発を担当。 最初に紹介するセッションは、2018年新卒入社でPerlやKotlinのコードを書いているソフトウェアエンジニア大原康平氏による「8年続くPerlプロダクトをKotlinに書き換えた話」だ。 今回Kotlinに書き換えたPerlプロダクトは「LINEポイントクラブ」。LINE Payでの支払いや、LINEの各種サービスの利用などで貯めることができるLINEのポイントサービスである。 LINEポイントクラブには「貯めるタブ」と「使うタブ」があり、貯めるタブは動画を見たり、アプリをイン
こんにちは！React、Vue、Angularの説明をする時にゼニガメ、フシギダネ、ヒトカゲに例えるとウケが良いことに気づきました。Mizutani(@sirycity)です。 今日はReactとvueそのものの比較ではなく、そいつらを使ったフレームワークとかライブラリの比較です。沢山あるから自分の確認含めてざっくり書いてきますわ。項表題をクリックすると公式に飛べるで。 初心者向け reactとかvueを初めて触る人によく勧められるフレームワーク？です。機能はそんなにないけど分かりやすいやつ。 create-react-app react初心者にぴったり。まずはここから始めよう！ってやつ。僕もフロントエンドエンジニア2年目でこれやった。 逆に言えば、これは完全に学習用にした方がいいです。ルーティングやSSR等、本番運用しようとすると欲しいものがないです。ここでreactの基本を理解したらg
【TS】今さら聞けないreduce
はじめに JavascriptもしくはTypescriptで配列を操作する際に、reduceを使ったことがありますか？ 「コアな部分で使っているのは見たことあるけど、どんな関数なのかはイマイチ分からない」という方もいるのではないでしょうか。 私自身の話になりますが、ReactやReactNativeの開発プロジェクトをいくつか経験したことがあります。 たまに新入社員の方がアサインすることもあり「まずはJSやTSを知ろう」といったレベルから教えることもあります。 皆さん配列に関しては最初「forやforEachをグルグル回して処理する」というアプローチを取り、そこから段々とmapやfilterなどを用途に合わせて覚えていきますが、大概reduceでつまづきます。 なぜなんだろう？と考えた時「filterやsomeに比べてreduceという名前が直感的でない」や「reduceは何でもできてしま
要約 StoreKit2 or RevenueCatどちらで実装するか悩んだが、RevenueCatを採用 ※どちらも実装経験無し 個人開発レベルでは、実装からリリース/運用までRevenueCatで全く問題なかった🚀 情報収集 iOSでのサブスクリプション実装は、StoreKit フレームワークを使って実装する iOS15以上に限るが、StoreKit2を使うことでかなり楽に実装できる（サーバーサイドの実装工数が不要） RevenueCat (StoreKitのバックエンドとwrapperを提供) を使うことでも楽に実装できるっぽい StoreKit2 vs RevenueCat どちらでサブスクリプションを実装するか？技術選定した 技術選定方針 学習コスト 工数 メンテナンス性 金 わくわく感 StoreKit2 WWDCの動画を一通り見て雰囲気を掴む https://develop
関東梅雨明けは8月からだそうです。こんにちは柏木です。まずは完成したものをご覧ください。 AWS Amplifyとは? （以下Amplify） ”Amplify とはサーバーレスなバックエンドをセットアップするための CLI、フロントエンドで利用できる UI コンポーネント、 CI/CD やホスティングのためのコンソールを含む Web およびモバイルアプリ開発のためのフレームワークです。” 引用 CLIでコマンドをぽちぽち打てば簡単にバックエンドがセットアップすることが可能なサービスですね。 概要 この記事ではAWS AmplifyとReactNative（Expo）を使用してリアルタイムチャットアプリ作成の簡単な流れを紹介できたらなと思います。 チャット機能を作成する上で用件があると思いますが、今回はログイン認証した後、それぞれにチャット部屋があり、そこで複数人がメッセージを送信できるよ
【ReactNative】Expo製アプリが本番でのみクラッシュする問題を調査・解決した。【adb logcat】コマンドの使い方メモ - メモメモメモ
状況 Androidで特定画面を開くとクラッシュすると報告があった 本番環境でのみ発生し、エミュレーターでは発生しなかった Sentryにissueは報告されていなかった ※これはまだ謎 原因追求方法 adb logcat を使った。 adb logcatとは adbコマンドは、 Android Debug Bridgeの略でデバイスと通信するためのコマンドです。今回のように実際に目の前の端末内で何がおきてるのかを知りたい場合のデバッグに重宝します。 adb logcatコマンドは、その名の通りlogをcat(catenate)するコマンドで、接続した端末ののデバイスログを表示できます。 adb logcatの使い方 Android端末をUSBでつなぐ adb devicesでちゃんと端末が認識されているか確認する adb logcat -cで一旦ログをクリアする（しなくても良いが、該当ロ
Maestroって何？ サンフランシスコにあるmobile.dev incが作ったモバイル向けUIテストフレームワークです 対応プラットフォームは iOS, Android, ReactNative, Flutter 公式の説明によると Maestroは、最もシンプルで効果的なモバイルUIテストフレームワークです。 （原文をDeepL訳） とあり、「最もシンプルで効果的」と言い切ってるところに興味を持ちました テストシナリオはyamlでかきます 公式Exampleがわかりやすかったので、イメージとしてのせておきます 公式から読み取ったメリット 最もシンプルで効果的😇 対応プラットフォームが多い（iOS, Android, ReactNative, Flutter） OSS（Apache License 2.0） セットアップ（Mac） Maestro cli を以下のコマンドでインストー
Theme 第 112 回のテーマは 2023 年 1 月の Monthly Ecosystem です。 Show Note State of JS 2022 https://2022.stateofjs.com/en-US/ 2022 JavaScript Rising Stars https://risingstars.js.org/2022/en State of CSS 2022 https://2022.stateofcss.com/en-US/ First-class Support for TypeScript https://reactnative.dev/blog/2023/01/03/typescript-first React Native が TS デフォルトサポートになった これにより @types/react-native が不要に vite@4 https:/
この記事はReact Nativeアドベントカレンダーの2日目の記事です。 どうも！ハムカツおじさんという名前でtwitterやってます(@hmktsu)🤘 自分でだったり弊社でだったりなどReact Nativeでの開発を行う上でExpoを使っています。 なので今日は去年に引き続きExpoの2019年の動きについてまとめたいと思います。 ちなみにExpoについてというのは大体の人が知っている前提で話をしてしまいます。 知らない人は「react native expo」でググると色々と記事が出てきますのでそちらをご覧ください。 2019/01 v32リリース Expo SDK v32.0.0 is now available v31のリリースから約二ヶ月後の2019/01/08にv32がリリースされました。 バックグラウンドロケーションやジオフェンシングに対応 プッシュ通知がカテゴリやア
どこの決済サービスを利用するかは悩ましいところですが、業界標準のStripeはいずれにしてもおさえておきたい・・・ということで調査。意外と苦労したのでメモ。 前提知識 ネットに多くの情報がありますが、仕様が変化していて最新の情報を見つけるのに苦労しました。 事前に知っていればもっと楽だったことをまとめてみます。 Stripeのサービス Stripeが提供するサービスはいろいろある。 PAYMENT（ま、普通の決済） BILLING（月額課金） CONNECT（プラットフォーマー用） ここの記事では PAYMENT を扱います。 他にも色々ありますが、日本では使えないものもあるので注意（Issuingとか）。 PAYMENTの中でもいろいろ １つのサービスの中でも自サイトへの埋め込み方法やAPIの種類など複数あります。 埋め込み方 Checkoutを利用する（Stripeが用意した決済画面を
iOSアプリの開発ではMVCやMVP、MVVMなどのGUIアーキテクチャが採用されることが多いが、宣言的UIフレームワーク（同様のフレームワークでJetpackComposeやFlutter、ReactNativeなどがある）であるSwiftUIの登場により、SwiftUI時代に合ったアーキテクチャを検討する必要が出てきた。今回はSwiftUI開発で使えるThe Composable Architectureというアーキテクチャを簡単に紹介する。 宣言的UIとは？宣言的UIでは、アプリのステータスに応じて、どのようなUIになるべきかを宣言的に記述する。また、リアクティブなデータバインディングで実現されるため、データドリブンな方法と言える。そのため、データの流れやステータスの管理が重要になり、モデル層以下がしっかり設計されたアーキテクチャが必要となる。 The Composable Arch
axiosを使っていて、リクエストのヘッダーに常時トークンを保持させたい時があるのでその時の便利な設定ファイルを書きました。 axiosはこちら どのような時有効か 例えば、React Native⇄Railsでアプリを作っていて、ログインユーザーの認証はトークンベースで行う時。（Railsでdevise token auth使ってたりする時） この場合ログインユーザーがサーバ側にリクエストをする時ヘッダーにトークンを持たせると思います。 デフォルトのaxiosをそのまま使えば毎回のリクエストのヘッダーに埋め込む必要があるのでこれを常時埋め込んだ状態にしてそれを使おうって話。 interceptorsを使う コードはこちら。 //axios.js import axios from "axios"; import authTokens from "./authTokens"; const
Theme 第 137 回のテーマは 2023 年を振り返る Yearly Ecosystem です。 Show Note 今年のキーワード Jxck Rome to Biome RSC Next App Router React - Next のごちゃごちゃ感 Hono + JSX CSS in JS -> Modules Rust 化 Sakito Rome と Biome AI UI ツール周りの進化 Figma とか AI とか Storybook 連携とか Storybook コピペで利用できる UI ライブラリが増えそう Hiroppy RSC, Server Actions toolchain の変化 bundler Bun rspack turbopack vite (esbuild, rollup + rolldown) linter, fmt oxlint biome
FlutterKaigi 2021に登壇しました - Continuity is The Father of Success
11月29日と30日にFlutterKaigiが開催されました。 楽しかったー！ flutterkaigi.jp プロポーザルを出したところ、30日の17時15分から登壇する機会をいただきました。 www.youtube.com 今回はセッションの準備を忘備録的に残しつつ、セッションの時間内に話せなかったことやTwitterをみていて思ったことなどをまとめます。 登壇まで セッション FlutterのElementなどのTree構造との関連 なぜモノレポではないのか 登壇を終えて 登壇まで Tweetを遡ってみたところ、9月3日に2つ21日に1つプロポーザルを提出していました。 FlutterKaigi、もう一個出そうかな……。— Koji Wakamiya(だぐりば) (@D_R_1009) 2021年9月13日 twitter.com FlutterKaigiに3つ目のプロポーザル出し
回答 (2件中の1件目) この2つは明らかに対象プラットフォームが違うかと思います。 Electronはデスクトップアプリ向けですし ReactNativeはスマホやタブレット向けです。 もしかしてReactNativeでデスクトップアプリが作れるようになったのかと思ってググっちゃいました。 React Native for the desktop, cross compatible 一応ありましたけど、別プロジェクトになってますね。 つまり結論からいうと対象プラットフォームで選択ください。ですね。 一応説明するとUIの実現方法がElectronとReactNativeで全...
こんにちは。 sasumasa です。 僕は Web エンジニアとして働いており、主にサーバーサイドで使用する言語の 1 つに Ruby があります。 僕が Web プログラミングを始めた時に最初に学んだ言語も Ruby であり、最初に学んだフレームワークは Ruby on Rails でした。 今回はその Ruby を使ってオブジェクト指向設計をするときに使えるノウハウをまとめた本である『オブジェクト指向設計実践ガイド』の序盤についてまとめていけたらと思います。 なお、本記事では「オブジェクト指向設計とは何か」とかについて言及はしません。 ただ本の内容をまとめるだけでなく、僕の経験を踏まえてまとめていきたいと思います。 なぜ設計するのか 先に述べたように本書はオブジェクト指向設計についての本ですが、エンジニアはなぜ設計するのでしょうか？ 本書の言葉を借りるとその答えは「変更の容易性を確保
ExperienceUsed it: Respondents who have used an item.Heard of it: Respondents who have heard about an item, but haven't used it.Never heard of it: Respondents who have never heard about an item.SentimentPositive: Respondents who are interested in learning more about a technology; or are willing to use it again.Neutral: Responents who did not indicate any sentiment about a technology.Negative: Resp
はじめに 前回 M1 Macbook Pro の開発環境の構築までをこちらの記事で紹介しました。 Docker のインストールまでをやりましたね。 今回は React Native の実行環境を作り、 iOS シミュレーターと Android シミュレーターを起動するところまでやっていきます。 つまり、以下のように作ったプロジェクトが動くところまでになります。 うまくいかないことが多かったので、まだ継続して調査中のものもあるかもしれませんが、今後加筆していく予定です。 どなたかの参考になれば幸いです。 ReactNativeの実行環境を作る 本家の environment-setup を眺めながらやってみたのですが、 Intel 版ではこちらで問題なくセットアップできるのですが、 M1 版はそうはいきませんでした。 なので、そこの差異を書きながら React Native を動かすためのセ
bosyuでフルリモートでReactのお仕事を探した時のお話です。 本来なら、bosyu作るときに意識したことから書くべきですが 先にお礼がしたいので、Twitterから書きます！ ■bosyuのツイートをする際に意識したこと・要望をリンク踏まずとも最低限理解して欲しい ・エゴサ意識(フロント React)、検索ワード想定 ・自分のレベル感が分かるものが存在することの記述 ・それを下のツイートにぶら下げる ・#拡散希望 のハッシュタグをつける ・固定ツイートにする ・何度も自分で再RT 【リモート希望】フロントエンドエンジニアとして雇ってください！ https://t.co/EgqdKwFkJs #bosyu #フロントエンドエンジニア #デザイン #React #typescript resumeのURLに詳しい技術的な話とか経歴とか書いてあります。 React書きたいです、拡散よろしく
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lottieを使ってReactNativeアプリにアニメーションを追加する - Qiita
【2024最新】ReactNativeはオワコン？→価値あり（Swiftと比較)
The State of JS 2021: Libraries
UdemyでReactNativeを学んでみた - 何かやってみるブログ
Optimizing Flatlist Configuration · React Native
Firebaseを利用したサーバーレス開発にはMonorepoが向いている - takuwan's blog
【ReactNative】react-native-maps基本編
ウェブ/モバイル(React/TypeScript)での圧縮ライブラリ 簡易まとめ - Qiita
Gatsby × lottieでアニメーション | Ryusou Blog
ReactNative AndroidのBridge解説 - Qiita
【JS】React系とVue系のフレームワーク色々比較まとめ | JavaScriptに関するお知らせ
【SwiftUI+RevenueCat】個人開発のiOSアプリにサブスクリプションを実装したメモ
AWS Amplifyでリアルタイムチャットアプリが簡単に作成できるらしいので試してみた話
Maestroは本当に最もシンプルで効果的なのか - Qiita
ep112 Monthly Ecosystem 202301 | mozaic.fm
Expoのこの1年間の動きと自分の動き(2019年) - Qiita
(2020年元旦時点で最新の）Stripeの決済をReactで使う - Qiita
The Composable Architectureを使ってみた｜TAAT
axiosのヘッダーにtokenを埋め込んで常時使えるようにする | hirozak
ep137 Yearly Ecosystem 2023 | mozaic.fm
ElectronとReact Nativeはどちらを使うべきですか？それぞれに向いた開発などを教えていただけませんでしょうか。
オブジェクト指向設計実践ガイドを読む No.1【設計の目的と実践】
State of JavaScript 2023: Libraries
M1でReactNativeのセットアップ備忘録（2021/12）
bosyuでTwitter転職の際に意識した点とフルリモート正社員になる話｜maco