軽量RustフレームワークTauriでデスクトップアプリ開発をはじめよう | gihyo.jp
TauriはRustで書かれた軽量なGUIフレームワークで、Windows、macOS、Linux向けのデスクトップアプリを開発できます。2022年6月に最初の安定版であるバージョン1.0がリリースされました。 Tauriでは、メインプロセスはRustで記述しますが、UI（User Interface）にはWeb技術を利用します。ReactやVue.jsのようなJavaScriptフレームワークがそのまま使えるので、インタラクティブで見栄えの良いUIを簡単に構築できます。同種のフレームワークにElectronがありますが、後発であるTauriにはインストーラのサイズを小さくできるなどの強みがあります。 Tauriのロゴは、おうし座の二重星であるシータタウリ（θ Tauri）をモチーフ[1]にしており、Webとネイティブアプリの相互作用を意味しています。 図1 Tauriロゴ 本稿では、Ta
React×Firebaseでちゃんと開発するときの環境構築手順と解説
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
React 初心者が Material-UI で今どきの Web フォームを作ってみた（yup編） | DevelopersIO
React 初心者が、Material-UI と React Hook Form v7 を活用して今どきの Web フォーム開発に挑んでみました！ つい先月、React（+ React Hook Form）と Material-UI を組み合わせた Web アプリ開発を始めました。アプリ開発初心者でも簡単に、かつ今っぽい Web フォームを開発することができたので、少しコードを交えてご紹介してみたいと思います。 なお本記事は、前の記事（react-hook-form編）に続く形式となりますので、お時間あれば下記の記事も合わせてご参照いただけますと幸いです。 作ってみた 前回の記事で作成した Web フォームの基本項目（Basic.js）というフォームに下記の yup という JavaScript schema builder を利用してバリデーションの機能を追加していきたいと思います。 バ
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
ユーティリティーファーストとTailwind CSSのススメ - Qiita
Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a
[React] カスタムフックを作るときにこころがけていること | DevelopersIO
カスタムフックを作るときに、私が気をつけているいくつかのことを例を用いながらその理由を書いていきます。 私がカスタムフックを作るときにこころがけていることがいくつかあります（こうするべきだ、と主張するものではありません）。 React の Hooks にスタイルを合わせる - https://sbfl.net/blog/2020/08/21/use-react-hooks-easy/ 関数は useCallback で包む - https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/ テストをできるだけ書く React の Hooks にスタイルを合わせる React のカスタム Hooks をカジュアルに使ってコードの見通しを良くしよう 上記の記事に非常に影響を受けました。とてもすばらしい記事なので先に読んでおくことを
Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代
どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。 今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。 まずは最初に Next.js ボイラープレートアプリを作りましょう。 作成できたら、まずは TypeScr
Reactアプリケーション内でGoogle Analytics計測をする際、react-gaを使わず、gtag.jsを利用した方法とその選択理由｜Dentsu Digital Tech Blog
Reactアプリケーション内でGoogle Analytics計測をする際、react-gaを使わず、gtag.jsを利用した方法とその選択理由 電通デジタルのエンジニア、西山です。 この記事は、電通デジタルアドベントカレンダー2020の3日目の記事です。前回の記事は「2020年に作ったDevOps内製ツール」でした。 この記事ではReactでGoogle Analyticsの計測コードを埋め込む方法についてお話しします。他のブログなどですでに何度も紹介されているテーマですが、ブログによって用いられる手法は様々で、どれを採用すればいいか迷う人も多くいるのではないかと思いますし、中には情報が古くなっているものもあります。 そこで最新の状況を調査した上で、私たちが採用した手法を紹介しますので、ReactでGoogle Analytics計測コードを埋め込む際の参考にしていただければと思います。
「Redux よさようなら」最強の React 実装
useState, useContext を使った状態共有 graphQL BFF + Codegen + Apollo Hooks で型安全なデータ取得 Redux の型定義、Loading 状態の運用、エラー処理、等々煩雑なコードがなくなる 1日一つ強くなる中西とは https://ja.reactjs.org/ React 日本語公式ドキュメントのトップページの翻訳を担当 Apollo Japan User Group 主宰 / 公式ドキュメントチュートリアルを翻訳しました Hasura Japan User Group 主宰 / チュートリアル公開しています JavaScript が中心となった生産性の高い Web App 開発チームの運用、及びその普及活動が今のテーマ => https://apollographql-jp.com/makeMoneyTS/ 毎月 JavaScri
新型コロナダッシュボード爆速リリースの舞台裏 〜小さく始めて大胆に変えるフロントエンドプロジェクト〜 - JX通信社エンジニアブログ
JX通信社CDOの小笠原(@yamitzky)です。 JX通信社は「今起きていることを明らかにする報道機関」というミッションの元に、新型コロナリアルタイムダッシュボードを 2月16日 から提供し続けています。今回は、「新型コロナプロジェクト」の発足から現在に至るまでの、プロジェクトの進化についてご紹介します。 プロジェクト発足 そもそものプロジェクトの発足としては、2月14日の下記のツイートが発端でした。およそ 2 日でリリースしたことになります。 日本の感染者増えているので、もうそろそろ中国がやってる地域別まとめページ作っても良いのでは？https://t.co/6gSg3s16Nw pic.twitter.com/TyNeP44NbO— けろっと (@kerotto) 2020年2月14日 当時は、東京都のような自治体公式の特設サイトや、国内全体の動向をまとめたサイトはほぼありませんで
Testing JavaScript をやってみたら学びがあって良かった話 - Adwaysエンジニアブログ
こんにちは。リファクタリングが大好きなフロントエンドおじさん梅津です。 自信を持ってリファクタリングするには信頼できる自動テストが必要ですよね。 じゃあ信頼できる自動テストとはなんだろう？どう書いたらいいんだろう？と考えていました。 とくにコンポーネントを含む UI テストに対しての悩みが強かったです。 そんなときに出会ったのが Testing JavaScript です。 この記事ではその Testing JavaScript の紹介をしたいと思います。 Testing JavaScript とは Testing JavaScript は PayPal のエンジニアである Kent C. Dodds によって作成された教材です。 ページを開いてすぐ目に飛び込んでくるテスティングトロフィーが特徴的ですね。 Testing JavaScript では、ここに記されている Static, Un
React アプリケーションのボイラープレートを作った | nabeliwo blog
僕が個人で何かのアプリケーションを作るとき、最近は手癖で TypeScript + React でとりあえず始めている。 Redux を入れるかどうかは性質を考えてから決めているけれど、先の2つに関してはほぼ無思考で入れている。 それが良いか悪いかは別として、毎度環境を作るのにめんどくさかったのでボイラープレートを作った。 create-react-app とかもあるんだけれど、個人的にああいうツールは完全に自分の思想とマッチするわけではないのでどこかしら妥協したり後から手直しすることになるので、それだったら自分で用意したものを使う方が良いという判断。 アプリケーションの性質によって変わるのでとりあえず2つに分けて作った。 static-site-boilerplate-with-react-ts-webpack prettier-eslint-stylelint-boilerplate
Real World GraphQL on Next.js SSR
tl;drNext.jsはv9.3.0以降Initial Loadingの扱いが変わったクライアント側ではApolloを利用することができるが、Authorization Headerを設定するなら一工夫必要SSR時にはfetchによるシンプルなAPIリクエストをすると良い昨今のWebフロントエンド昨今のWeb開発において、React、TypeScriptとかのベース知識は当然として、やはりNext.js(あるいはNuxt.js)のような、SPA/SSR両方のニーズを汲み取りながら、dynamic routingを提供してくれたり、ビルド環境を高速に整備してくれるフレームワークが重宝されるようになってきていると感じます。 また、Reduxもアリですが、スキーマ駆動開発が推進できるGraphQL、特に尋常じゃなくステート管理が用意になるHooksとApolloクライアントの組み合わせは、フロ
アプリ開発にReact Nativeを使うメリットをスタートアップ目線で書いてみた｜rayray_pyのブログ｜note
弊社では、現在iOS、AndroidアプリをReact Nativeで運営しております。 最近、知人のスタートアップやベンチャーの方からReact Nativeってどうなの？みたいなことを聞かれることが多くなってきたので、曲がりなりにも１年弱くらいReact Nativeで開発してきて思ったことを、書き記したいと思います。 ですので今回は技術的な部分に踏み込みすぎず、あくまでスタートアップの事業開発におけるReact Nativeの有用性についてのみとさせて頂きます。 TL;DR 少数精鋭ならReact Native, 安定性と質を重視するならネイティブ言語を使うのが良いと思います。 目次 ・React Nativeとは ・React Nativeを採用してよかったこと ・React Nativeを使わない方がよいパターン ・まとめReact NativeとはReact NativeはFa
React Hooksとカスタムフックが実現する世界 - ロジックの分離と再利用性の向上 - Qiita
はじめに React HooksはReact 16.8 で追加された新機能であり、state などの React の機能をクラスを書かずに使えるようになります。 React Hooks以前は、ロジックの再利用がコンポーネントに依存してしまいロジック単独でのモジュール化が難しいという問題がありました。 しかしReact Hooksのカスタムフックという独自のフックを作成する機能を使うことで、Viewに依存することなくロジックだけを再利用することができるようになります。 この記事では、v1からv6まで改善していく様子を見て頂くことでReact Hooksの利用方法を紹介します。 今回の実例ではコンポーネントのコード量は以下のように削減されます。 実例紹介 コンポーネント間のページネーションを実装するuseLocalHistoryカスタムフックを作成します。 ブラウザのhistory APIのよ
React Hooks + Redux Hooks + TypeScript で SPA を構築する（追記あり） - 30歳からのプログラミング
2020/05/31 追記 勉強や経験を重ねた結果、この記事を執筆した時より知識が増え、コードの書き方にも変化があります。 サンプルアプリも同様で、以下のプロダクトのコードのほうが、今の自分の考えが反映されていると思います。 github.com 追記終わり 2019/07/14 追記 ディスカウント後の価格みたいな導出項目はselector (reselect)を使うとよいのでは https://redux.js.org/recipes/computing-derived-data - YonmanHasse のブックマーク / はてなブックマーク というコメントを頂き、確かに便利そうだったので導入した。 それに合わせてこの記事の内容もアップデートした。 追記終わり タイトルに書いた組み合わせで SPA を作るときにどのような設計にするのか、現時点での考えを記録しておく。 チュートリアル
A Complete Guide to useEffect — overreacted
You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues. “Great job”, they said. But sometimes when you useEffect, the pieces don’t quite fit together. You have a nagging feeling
React開発において便利なTypeScriptの型まとめ - Qiita
React開発において個人的に便利だなーと思っているTypeScriptの型をだだーっとまとめてみました。私自身もまだまだTypeScript修行中の身ですので、新たに気づいたものがあったら随時追記していきます。みなさんも「こういう使い方できるぜ！」みたいなのがあったら、ぜひ教えていただければと思います。 対象とする読者 最近ReactにTypeScriptを導入し始めた人 ReactにTypeScriptを導入してそこそこ経つけど、いまいち使いこなせてる気がしない人 TypeScriptにあまり詳しくない人でもわかるように説明しているつもりではありますが、以下の記事がTypeScriptの入門用に素晴らしいので、そちらを先に読むとスムーズに読み進められると思います。 TypeScriptの型入門 Partial React開発においてよく定義する型としてコンポーネントのpropsの型があ
Progressive React
Performance advocates, like myself, spend a lot of time “advocating” for faster sites. At times however, we don’t cover framework-specific optimizations that can be important to consider if you use a particular framework for your site. This article will cover a number of performance optimizations you can add to your React sites. The key idea here is to ensure your site performs well enough so that
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
REACT-VFX - WebGL effects for React! #REACTVFX
