Mui

どうも〜、エージェンシー事業のエンジニアチームでユニットマネージャーをしていますぬまちゃんです！ 前回はAWS AuroraからGoogle CloudのDatastreamを用いてBigQueryへデータをレプリケーションした話 をしました。 今回は打って変わってフロントエンドのお話をしようと思います！ 背景・きっかけ 話を始める前に アップデート作業の概要 大変だったこと ■ 開発案件と並行して作業をしなければならなかった点 ■ 見た目の確認 学び ■ バージョンアップは放置しない ■ 案件と大きめの改善を並行しない ■ コンポーネントの共通化をする まとめ 背景・きっかけ 自分が担当して…

この記事は techtekt アドベントカレンダー2023 の11日目の記事です🔥 今年もさまざまな記事が投稿されていく予定ですので、興味がある方は#techtekt Advent Calendar 2023で検索してみてください！ # はじめに こんにちは。 テクノロジー本部 エンジニアリング統括部 Miraiz開発本部でエンジニアをしている kanekoです。 # 自己紹介役割：アプリ系 iOS Swift Android Kotlin Flutter dart Vue React / 最近はエンジニア全体の開発効率化や雑務に追われる日々 UXDigチーム としても活動中。 # この記事は…

初めまして！ミツモアのエンジニアの佐藤（@satoman）です。 簡単に自己紹介をすると、今年から学生の頃からインターンでお世話になっているミツモアで新卒（？）のエンジニアとして働いています。 僕は現場仕事に特化したオールインワンSaaS「MeetsOne」の開発に携わっています。 meetsone.com エンジニアとして働くのは入社してからが初めてでわからないこともたくさんあるのですが、先輩方に教えてもらいながら結構楽しく働けています！ 階層構造が必要になった背景 さて、僕のトピックは「MUI で階層構造を作る方法について」です。 情報を管理する際に何かの情報でグループ化してまとめたい！と…

react-modalとMaterial UIの導入と使い方を簡単に解説します。

はじめに CSSライブラリのMUIはとても便利で結構利用します。 MUIのTabsの下線の色を変更する機会があったので備忘録として記載します。 デフォルトの下線色 Tabsタグのデフォルト色は以下の緑枠のような感じです。 背景色を濃いめの赤にしているため、デフォルトの下線では少し見にくいな～という感じだったので変更してみます。 TabIndicatorPropsを利用する 下線の色を変更するにはTabsタグのpropsの一つであるTabIndicatorPropsを用います。 Tabs API - Material UI 型はオブジェクト型なので以下のようにコードを書きます。 <Tabs Ta…

概要 現在、JavaScript のライブラリである React を利用した Web アプリの開発はとても人気があります。 私自身も実際に React を利用して Web アプリを開発しています。 Web アプリを開発しているとやはり気になるのが UI の構築で、簡単にきれいな UI ができるのが理想的ですよね。 今回は React で UI をきれいに整えることができ、さらにとても簡単に実装することができる OSS 「MUI」を紹介します。 利用手順 React で利用するライブラリのため、以下のように npm または yarn を用いてのインストールとなります。 // with npm n…

中央寄せ htmlで作成したUIを中央に寄せるときに使用する記法。 MUIのstyledのなかでの記法になる。 margin:"auto", これだけでは中に文字を入れている場合(タグで文字を挟んだ場合)その文字には中央揃えは適用されていない。文字に中央ぞろえを適用させるためには以下のように記述する。 textAlign:"center", cssをあまり触れずにReactを触っているため、cssに対するあいまいな知識や知らない知識が多い。忘れたころに戻ってこれるように簡単に記述しておいた。

はじめに みなさん、こんにちは torihaziです 今日は午前中にはauthorization付きのリクエストを送ってそれを元に diaryの一覧ページを表示させることを完成させ、午後からは crudのページ関連を作り込んでいこうと思います。 技術選定 [frontend] Nextjs(pages router) => App Routerの理解に苦しんだため MUI => 調べたランキングでtopだったため react-hook-form => フォーム管理と言ったらこれでは？ zod => 少しだけ使い慣れてるから axios => httpリクエスト送るのはこれでは？ recoil …

はじめに おはようございます！ torihaziです 今日もやっていこうと思います 昨日の宣言通り、diaryのcrud画面とそのapiくらいは作りたいと思います！ 技術選定 [frontend] Nextjs(pages router) => App Routerの理解に苦しんだため MUI => 調べたランキングでtopだったため react-hook-form => フォーム管理と言ったらこれでは？ zod => 少しだけ使い慣れてるから axios => httpリクエスト送るのはこれでは？ [backend] Rails 7 => 使い慣れているため devise => 定番だから …

はじめに 昨日は寝落ちしました。 技術選定 [frontend] Nextjs(pages router) => App Routerの理解に苦しんだため MUI => 調べたランキングでtopだったため react-hook-form => フォーム管理と言ったらこれでは？ zod => 少しだけ使い慣れてるから [backend] Rails 7 => 使い慣れているため devise => 定番だから devise-jwt => devise-token-authが古いらしいのでこっち [github] GitHub - torihazi/diary_front GitHub - tor…

はじめに 5日目です。今週土日リリース予定ですが、果たして。 とりあえず、現状です。 技術選定 [frontend] Nextjs(pages router) => App Routerの理解に苦しんだため MUI => 調べたランキングでtopだったため react-hook-form => フォーム管理と言ったらこれでは？ zod => 少しだけ使い慣れてるから [backend] Rails 7 => 使い慣れているため devise => 定番だから devise-jwt => devise-token-authが古いらしいのでこっち [github] GitHub - torihaz…

概要 MUI（Material UI）を使って、共通レイアウトを作っていく。 MUIとはデザイナーやアプリ開発者向けに作られたUIコンポーネントのライブラリである。Reactを用いてUIを構築する際にかっこいいモノができる。 実装方法 インストール まずはreactプロジェクトにMUIをインストールする。 npm install @mui/material @emotion/react @emotion/styled 参考： Installation - Material UI Drawerコンポーネントのコピー Drawerと呼ばれる、開閉可能なNavigationバーのようなものを共通レイ…

はじめに おはようございます！現在、朝の7時14分です。 昨日はLPの途中までしかできなかったので、 まずは午前中までにLPを終わらし、残りで認証画面(ログイン、新規登録)を作り backendも作るという流れでいこうと思います！ MUIについては少しずつ慣れつつあるので、今日は少しスピードが上がると信じてます ではltg 技術選定 [frontend] Nextjs(pages router) => App Routerの理解に苦しんだため MUI => 調べたランキングでtopだったため [backend] Rails 7 => 使い慣れているため [github] GitHub - to…

React での CSS の適用方法についてまとめました。 この記事は以下の構成になっています。 インラインスタイル CSS を別ファイルにしてインポートする CSS Module CSS-in-JS CSS フレームワーク コンポーネントライブラリ インラインスタイル インラインスタイルは HTML の style 属性で記述する方法とほぼ同じ。 ただし 以下のように React では HTML ではなく JSX なのでstyle="font-size: 16px;"とかかずに、style={{ fontSize: '16px' }}と書く。 export const Button = ()…

はじめに おはようございます torihaziです 現在、朝の7時24分です。 リリースまであと1週間ちょいしかないので実務と並行してやるしかありません 今日はテーブル構造とDocker立ち上げ、認証までをやりたいと思います 途中で技術選定も入れていきます。 技術選定 ここに追加していく感じです frontend Nextjs backend Rails 7 ディレクトリ構成 このプロジェクトのディレクトリ構成についてです top/ ├─ table/ │ ├─ Dockerfile │ ├─ table.pdf ├─ back/ │ ├─ rails_project/ ├─ front/ │…

はじめに やりたいこと 課題 原因 解決策 課題の詳しい説明 原因の詳しい説明 解決策の詳しい説明 まとめ はじめに ここでは「やりたいこと」、直面した「課題」、課題の「原因」、そして「解決策」に分けて、導入部分をざっくり書きます。 やりたいこと MUIのDatePickerのテキスト部分からの入力を制御したい。テキスト部分をキーボードから入力できないようにしたいというのが今回やりたいことです。 課題 AIや技術記事に書いてある通りにやったのに動かない。 いや、そもそもエラーになる。 原因 バージョンが原因。MUIのv5, v6では書き方が違う。v5で主に書かれていたものが、v6では廃止されて…

夏の自由研究でReact使って何か作ろうと思って少しやったが、つまづいてそのまま放置して夏END Versel Mac環境準備 Claudeで作ったものを載せる プッシュしても反映されない Versel Verselというのを使えばS3とかなくても簡単にデプロイできるらしいのでやってみる。 vercel.com Verselにアカウント作って画面にある通りにgithubと連携してNext.jsを選ぶと、githubにnext.jsの空のプロジェクトのリポジトリできたし、ページもできてた。すご nextjs-boilerplate-mocha-ten-44.vercel.app Mac環境準備 …

2マイル目の世界にいる話をしようと思い、そういう「マイル」ではないとは判っているけれどそもそもマイルって何メートルなんだと検索してみたら、国と陸と海とで違うようだ。 マイル - Wikipedia ちなみに「マイルとは」でGoogle検索したところ最初に出てきたのは飛行機に乗ると貯まるほうのアレだった。そうではない。そうだけど。 映画『ラストマイル』を観た。 アンナチュラル、MUI404の2作品を知人に勧められて、そこからの流れで公開初日に映画館へ行くこととなった。すっかり夢中になっているので知人は喜んでくれている。「あなたのスイッチを押してしまったのね」と笑っている。そのとおりだ、時には人に…

.entry-content { line-break: strict; text-align: justify; } .entry-content h3, h4 { padding-top: 1em; } こんにちは！ 株式会社ケップルの Product Development Section でエンジニア兼スクラムマスターをやっている芹田です。 2024年 8月、スタートアップデータベース「KEPPLE DB」で使用している UI コンポーネントライブラリ Mantine を、v6 から v7 に更新しました。 Mantine v6 と Mantine v7 の間で破壊的変更が多かったこと…