Fusic Tech Blog
Fusicエンジニアによる技術ブログ
#react
こんにちは。フロントエンドチーム「雅」のマッサンです。 今日は、e2eテストツールMaestroのご紹介です。 ## Maestroとは Maestroは、最もシンプルで効果的なモバイルUIテストフレームワークです。モバイルのテストフレームワークでは、appniumやdetoxなどがありますが、セットアップが簡単、かつ、テストパターンをGUIで作成出来たりと簡単に強力なテスト環境を作成できるフ...
## はじめに 前回は [Electron ForgeでReact + Vite + TypeScriptのデスクトップアプリ開発環境構築](https://tech.fusic.co.jp/posts/2023-05-22-electron-forge-react-vite-typescript-desktop-app-setup/) を行いました。 その際の問題点としてメインプロセスとレン...
## はじめに Electron Forgeはテンプレートからのプロジェクト作成や、アプリ配布のための便利なツールです。 今回はViteテンプレートを使ってTypeScriptとReact環境でデスクトップアプリを動かせるようになるまでの手順を紹介します。 ## 環境 - Node 18.7.0 - TypeScript 5.0.4 - Electron Forge 6.1.1 - Ele...
こんにちは IoT チームの松山です。 以前、私は [オンライン会議スペースを監視する IoT](https://tech.fusic.co.jp/posts/2022-04-13-satellite-bancho/) を作りました。 これは、個室に超音波センサーを設置し人がいるかどうかを監視し、 Web と Slack で表示するものです。 * Web での表示 
## はじめに Reat Native(TypeScript)アプリに画面上にバーチャルキーボード（テンキー）を表示させ、入力できるようにしてみます。 [react-native-virtual-keyboard](https://github.com/nshaposhnik/React-Native-Virtual-Keyboard) というライブラリが既にありますが、コード量的にもそこまで...
## はじめに 前回は[vite_railsをRailsに導入してReact/Vite環境を構築]([https://tech.fusic.co.jp/posts/2022-07-07-vite-rails-react/](https://tech.fusic.co.jp/posts/2022-07-07-vite-rails-react/))という記事を書いたので、次はLaravelにReac...
## はじめに Rails7になってから[jsbundling-rails](https://github.com/rails/jsbundling-rails/) が使われるようになり、esbuild/rollup/wepackなどJavaScriptをバンドルしてRailsアプリで配信する方法の選択肢は増えました。 これらを使うのも良いですが、より強力なフロントエンドツールであるViteを...
## はじめに RailsでRactを導入したい時の選択肢の一つとして[react_on_rails](https://github.com/shakacode/react_on_rails)があると思います。 今回はそのreact_on_railsでのHMR (Hot Module Replacement)を導入する方法をご紹介します。 HMRを有効化することで、Reactコードを変更する...
## はじめに React Nativeでピンチイン、ピンチアウトでズームできたり、ドラッグで移動できる画像表示ライブラリは色々ありますが、カスタマイズが必要になってくると既存のライブラリでは厳しい場合があります。 そこでReact Native Gesture Handler（以下RNGH）だけで画像ビュワーを作ってみようと思います。 ## 動作イメージ 
Fusicの清家です。 今回から気ままにAWSAmplifyのサンプル実装を行っていこうと思います。 # ReactをTypescriptのテンプレートで作成 [React & TypeScriptのプロジェクト作成](https://typescript-jp.gitbook.io/deep-dive/browser) ```bash npx create-react-app . --t...
弊社では社内システムが多く運用されています。そのうちの一つに私が開発・運用している「Nicole」というシステムがあります。 これは、いわゆるニコカレ(ニコニコカレンダー)をWebベースで入力・閲覧できるシステムで、今では社内SNS的な位置付けにもなりつつあります。  今回、このシステムをNext.jsとRuby on ...
## 時間がない人向け３行説明 - next-localization っていう Next.js 用のi18nがある - Pluralizationという、「単数形・複数形」をいい感じに切り替えれる機能がある - Pluralizationを行う際は、キーを辞書の最上位層に置かないと機能しない ## next-localization - [これです](https://github.com/St...
こんにちは。岡嵜です。 Reactを使っていて地味に悩んだ問題を先日無事解決できたので、Tipsとしてまとめます。 ## やりたいこと Reactコンポーネントにてテキストのオートリンクとemojiのレンダリングを両立させたいです。  GitHubを始め、世の中のtoDeveloper向けサービス...
こんにちは、岡嵜です。 本記事では「Railsにいいね機能をReactで実装する方法」を解説します。 Railsにいいね機能を実装する記事は既に巷に溢れていますが、Rails+Reactで実装するという記事は少ないです。 SPAとして作るわけではなく、あくまでRailsのViewにReactコンポーネントを埋め込む形で実装します。 このような方式を採用した理由についても言及したいと思います。...
[前回](https://tech.fusic.co.jp/posts/2019-10-30-react-native-expo-typescript-native-base/) はNativeBaseを利用して見た目部分を作りました。 今回はその続きで[React Navigation](https://reactnavigation.org/) を導入して画面間の移動を実現します。 #...
React Nativeの開発サポートツールであるExpoを使ってモバイルアプリを作っていこうと思います。 まずはExpo CLIを使ってプロジェクトを作成、見た目をいい感じにしてくれる[NativeBase](https://nativebase.io/) を導入するところまで書きたいと思います。 ## 環境 * Node.js v10.15.0 * Expo CLI v3.3.0 ##...