Ruby on Rails の View に React 製社内デザインシステムを導入した話（freeeサイン） - freee Developers Hub
はじめに by @solt9029 freeeサインの開発に携わっているソフトウェアエンジニアの塩出（@solt9029）です。 freeeのプロダクトには、freee会計やfreee人事労務をはじめとし、非常に多くのものが存在します。このような状況下で、各プロダクトがそれぞれ独自のデザインを採用してしまうと、プロダクト間で似たような操作に微妙に異なるデザインや体験が採用されてしまい、ユーザーの認知・学習コストが不必要に増加してしまいます。 そこで、ユーザーがプロダクト間で類似する操作や体験が統一的に行えるように、社内では「vibes」や「標準UI」といったデザインシステムが開発されてきました（vibesや標準UIの導入背景や詳細などについては、デザインシステム “Vibes” の育てかたやデザインシステムを拡張し、プロダクト開発の共通基盤を目指すをご参照ください）。 freeeのプロダク
Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点から
先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定的です。的外れな議論をしているかもしれません。あくまでもRuby on Railsアプリを書くときと同じ気持ちでNext.jsのアプリを書いたとき、セキュリティ上で気になった点を挙げているだけです。私が見落としている点や誤っている点等ありましたら、コメントやX等で教えていただけると大変ありがたいです。 その１：データ漏洩の危険性 この問題についてはムーザルちゃんねるが紹介しています。またNext.jsの公式ブログでも対策が紹介されて
Next.js 13は新たなRailsとなるか？+ Supabase x Vercelによる爆速フルスタックWeb開発【個人開発】 - Qiita
tl; dr Next.js 13 でフルスタックアプリを作った Supabase と Vercel はインフラを任せてしまおう DB, 認証, デプロイをボタンポチポチで完結 Supabase, Next.js用の helper ライブラリ が すっっごい便利 Next.js (RSC)は 少し昔の Rails になる フロントからバックエンドまでこれ一個で完結する 作ったもの ひとり用のSlack, Twitterのように、作業ログを時系列に記録できるアプリが欲しかったので作った。 slackで分報 xx_times をやってる人におすすめ。 マークダウン記法に対応, codeやリストでメモれる。 ハッシュタグで関心ごとで分離 Google アカウントでログイン 投稿前に、1つ以上タグを作る必要があります。(TODO fix) ソースコード コード公開します リファクタリングのアドバイ
初学者によるubuntuでのRails + React で駅案内システム作り③～Scaffold機能を使わずCRUD～ - Qiita
前回までのあらすじ API通信が出来るようになったよ！ やったね！ 記事一覧 初学者によるubuntuでのRails + React で駅案内システム作り①～下準備編～ 初学者によるubuntuでのRails + React で駅案内システム作り②～Rails＋ReactでAPI通信編～ 初学者によるubuntuでのRails + React で駅案内システム作り③～Scaffold機能を使わずCRUD～ 今回はこちら！ 初学者によるubuntuでのRails + React で駅案内システム作り④～１：１、１：ｍで対応したモデルの登録更新、JSON出力～ 新規テーブルのCRUDを実装 前回の記事で駅一覧のCRUDをScaffold機能でサクッと作成しました。確かに便利ではあったんですが、不要なjbuilderファイルが入っていたりとセキュリティの観点からひやひやしたので今回は地道にrai
オフラインイベント「Cookpad Tech Kitchen #27 Rails/Next.js/IoTによる食品流通」を開催しました！ - クックパッド開発者ブログ
買物プロダクト戦略部の勝間（@ryo_katsuma） です。6/30に「Cookpad Tech Kitchen #27 Rails/Next.js/IoTによる食品流通」をWeWork リンクスクエア新宿で開催しました。 イベントではクックパッドの新規事業「クックパッドマート」の流通を開発するエンジニアをはじめ、ECアプリケーションエンジニアやCTOも参加し、クックパッドマートの流通を中心とした最新の状況や組織についていろいろお話させていただきました。今回は当日の様子を発表資料も交えて紹介させていただきます。 クックパッドマートの失敗したデータ設計 Before / After 大放出 by 奥薗 まず、１番めのトークとして、奥薗（@mokuzon）から流通開発におけるデータ設計の自分たちの知見についてお話させていただきました。 「営業日」という比較的馴染みのある概念から、商品が「動く
Next.jsのSSG・SSR・CSRについてRailsと比較しながら調べた - Qiita
あまり自信なし。 2. Next.jsの機能 Zero Config WebpackやTypeScriptの設定が基本的に不要。 File-system Routing ページのルーティングはファイル名によって決まる。 Image Optimization / Font Optimization / Script Optimization Core Web Vitalsに沿うパフォーマンスの最適化をフレームワークとして提供している。 Pre-Render(Hybrid: SSG and SSR) SSGやSSRによるプリレンダリングなど、様々な方法でデータの取得とコンテンツのレンダリングが可能。 SSG(Static Site Generation) HTMLをビルド時に生成し、それをCDNでキャッシュすることでリクエストごとにHTMLを再利用する方法。 Next.jsの公式ドキュメントで
【React】スケルトンスクリーンの実装方法 - Qiita
import { REQUEST_STATE } from "../constants"; export const initialState = { // GET APIの状態を表す fetchState: REQUEST_STATE.INITIAL, // APIから取得したデータを配列で受け取る usersList: [], }; export const usersActionTypes = { FETCHING: "FETCHING", FETCH_SUCCESS: "FETCH_SUCCESS", }; export const usersReducer = (state, action) => { switch (action.type) { // action.typeがusersActionTypes.FETCHINGであれば case usersActionTypes.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React + Rails + GraphQL で画像投稿機能をつくる！ - Qiita
React + Rails + AWS Fargate の構成を実現したい - 05 バックエンドのテスト整備編(RSpec) - Qiita
React + Rails + AWS Fargate の構成を実現したい - 01 バックエンド環境構築編(Docker + Rails) - Qiita
[React/Rails] WebSocket connection to 'ws://localhost:3000/ws' failed が発生してレスポンスが受け取れない - Qiita![[React/Rails] WebSocket connection to 'ws://localhost:3000/ws' failed が発生してレスポンスが受け取れない - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6cefaaadc64d4ab982be556f12bf5a38a557104/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmVhY3QlMkZSYWlscyU1RCUyMFdlYlNvY2tldCUyMGNvbm5lY3Rpb24lMjB0byUyMCUyN3dzJTNBJTJGJTJGbG9jYWxob3N0JTNBMzAwMCUyRndzJTI3JTIwZmFpbGVkJTIwJUUzJTgxJThDJUU3JTk5JUJBJUU3JTk0JTlGJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgzJUFDJUUzJTgyJUI5JUUzJTgzJTlEJUUzJTgzJUIzJUUzJTgyJUI5JUUzJTgxJThDJUU1JThGJTk3JUUzJTgxJTkxJUU1JThGJTk2JUUzJTgyJThDJUUyJTgwJUE2JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iMGQ3MzE3ZDZlNWVlY2M5YTY2ZjNhZDdiYTliM2MwZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBLYW1lZ3J1ZW9uJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mMjBiZjg0MzRjYmFkMDIzZWJmZWMxYzFkNmQ5YWFiZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da4a22a74d9b0da95dd1cf4ff2dc064ed)
Rails API + React による開発ではまった点 - Qiita