Mui

はじめに 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に対するあいまいな知識や知らない知識が多い。忘れたころに戻ってこれるように簡単に記述しておいた。

Avatar LINEやtwitterのアイコンのようなUIを作成できる。 まずはアバターのモジュールをインポートしておく。最低限これをインポートしておく。ここから各々必要に応じてインポートする。 import as React from "react"; import Avatar from '@mui/material/Avatar'; 画像アバター alt属性は画像が表示できない場合に代わりに表示する文字列。 srcに表示したい画像のパスを指定する。 <Avatar alt="You" src="/~/~/you.jpg" /> 文字のアバター 文字のアバター(ツイッターなどのアイコン)…

MUIの勉強記録 1 MUIについて勉強していくので、軽く使い方をまとめます。 間違い、要望あればコメントください。 MUIとは UIテンプレートの集まり。そのまま使うことも改良することもできる。 基本的にはググれば出てくる。以前は"material-ui"だったが、最近では新たに"mui"が使えるようになった。 これから MUIは豊富なコンポーネントを持つため、それぞれのコンポーネントについてまとめて行く予定。 初投稿かつ短い記事になってしまいましたが、今回はここで区切らせていただきます。次回以降も簡単にまとめるだけにする予定です。MUIを使いこなせるようになればUIで困ることが減りそうなの…

概要 MUI 公式 Example の中から Next.js (TypeScript version) を雛形とし、自分の作りたいサイトに改造する 4 回目です。 今回は、JEST と React Testing Library をインストールし、最後のほうで簡単なテストのサンプルを使って練習をしてみます。 Rails を使っていた頃は、少しはテストをしていたのですが、なんか面倒で積極的にやりたい気が起きませんでした。 テストに対する苦手意識を克服するためにも、なんとか頑張ってみたいと思います。 数回に分けて連載する MUI に関連する記事の全体像 その 1 -- anyenv インストール …

概要 MUI 公式 Example の中から Next.js (TypeScript version) を雛形とし、自分の作りたいサイトに改造する 3 回目です。 公式サイトの How to use に従って、作業を進めます。 github.com 前回の Node.js インストールについては以下の記事をご参照ください。 MUI の公式 Example の改造 その 2 -- Node.js インストール - Depending on the Time and Situation 数回に分けて連載する MUI に関連する記事の全体像 その 1 -- anyenv インストール その 2 --…

スコア スコアネーム 備考 申請店舗 分類 集計年月 1,345,659,440 香川県・岡山県ゲーマーに捧ぐ SPS 誌面上、タイプは空白。 個人申請 アミパラテクノランド A034 20021215 1,375,505,770 SDOH-No.069-ATS 個人申請 青山ロングラン（サムシング）（新潟） A035 20030119 1,514,878,060 SDOH-ATSξ 個人申請 青山ロングラン（サムシング）（新潟） A036 20030216 1,624,848,480 SDOH-ATSξ 個人申請 青山ロングラン（サムシング） A037 20030316 1,771,208,…

ヤバいヤバい、マジかと思った、 こんな会社無いわな(笑) 何が公式アカウントだ、 涼末広子とか亜林小星て誰やねん？🤣🤣🤣 https://twitter.com/chemtrailjapan/status/1634354287961849857?t=1Bvl1gGw1MUI-NuZIhoWvA&s=19

はじめに こんにちは！NewsPicks の Web Reader Experience Unit で Web フロントエンドを中心にエンジニアをしております、イイダユカコ（ @becyn ）です。 このブログは、3月8日に Findy 社主催の アクセシビリティのイベント、「高まるウェブアクセシビリティの需要ーfreee×ニューズピックスー〜フロントエンド最前線〜」に登壇した内容を紹介するものです。 イベントについて 当日はフロントエンドエンジニア、デザイナーの方を中心に256名（キリが良い）の方々に参加応募していただきました！ありがとうございました！ 正直なところ、現状の NewsPick…

『先生のおとりよせ』に登場したソフトクリーム。CIAL横浜で発見して思わずひとりガッツポーズ。口に入れたら、もう声を出さずにはいられない美味しさでした。 四季のカップソフトクリーム 432円(税込)そんなソフトクリームを販売しているのは「Milk＆Beans 森の牧場カフェミューイ」mui.easy-myshop.jp島根県邑南町で365日24時間自然放牧された乳牛の牛乳を低温殺菌・ノンホモ製法※で使用した製品を販売しているそうです。※搾りたての生乳を大切に生乳の成分を壊さない（脂肪球を砕かない）製法のこと 原材料がすごい。乳化剤、安定剤、香料を一切使用せずに、生乳を練り上げた純粋なアイスクリ…

2月16日(木)晴れ 5℃〜15℃ 18:48 キャンプ場 Cero Sombrero 昨夜も寝落ち。 15日は何時出たっけ。それすら覚えていない。 あ、リオ・グランデに12時ごろ着いて追加の日記帳を手に入れたんだった。なかなか良い感じのが置いてないから、少し薄いがブエノス・アイレスデザインの可愛いのを買った。こんな感じでちょくちょく町の本屋で手に入れるのも楽しいかもな。 往路で世話になった関所には14時ごろ着いたが、ここでまた寝るには時間がありすぎるため先に進んで120kmほど走ることにした。 そしてこの街に着いたのは19時ごろ。旅人のための無料キャンプ場があると聞いていたので、既に満員でな…

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 2023年にも入りましたので、今回は、株式会社ロカオプで使用している技術について、改めて記事にしようと思います。 ロカオプとは？ 簡単にですが、ロカオプサービスについて紹介させてください。 locaop.jp ロカオプサービスは、以下の特徴を備えた、総合プラットフォームです。 MEO対策 ノーコード予約サイト作成 ノーコードアンケートサイト作成 ノーコードウェブサイト作成 他にも、以下のような機能があります。 ロカオプを構成するシステム 上記機能を実現するために、以下のような構成になっています。 …

2023年1月にリリースされた Docker Desktop v4.16.0 (release notes) で GA になった「Docker Extensions」の Extensions は段々と種類が増えてきて，Disk Usage / Aqua Trivy / LocalStack など，最近使う機会もあったりする．今回は "Quickstart" ドキュメントを読みながら Docker Extensions の実装に入門してみた❗️ ＼( 'ω')／ オレオレ Docker Extension を実装するぞー docs.docker.com 🐳 docker extension コマ…

カジュアル面談で何度も何度も説明するうちに話の流れが固まってきたのでブログに書いておくことにしました。事前に読んでいただけたら嬉しいな！ということで書きます。 ソフトウェアエンジニア（以下、エンジニア）の方に読んでいただくことを想定しているので、後半は開発プロセスやチームやプロダクトや技術スタックの話がメインになります。 何をやっているのか どんな会社なのか どんな働き方なのか（ワークスタイル） 時間 場所 ビデオチャット どんな働き方なのか（開発） 開発プロセス 開発チームと担当プロダクト マネイロチーム マネイロ Web 新規プロダクトA コーポレートプロダクティビティチーム 内製 CRM…

はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと…

この回はたいへん意義深い物語だった。 「Get Ready!」日曜夜9時TBS 第4話 出演／妻夫木聡 藤原竜也 松下奈緒 ゲスト／美村里江 天才彫刻家の古賀洋子（美村里江）は、脳腫瘍を患っている。大学病院では、腫瘍摘出は不可能で余命は半年と告げられる。 仮面ドクターチームのジョーカー（藤原竜也）が、次の患者として洋子を選び、自分たちなら腫瘍を取り除くことができると話す。6億円で手術を依頼する洋子。 しかし、MRI画像を確認した執刀医のエース（妻夫木聡）は、洋子が後天性サヴァン症候群であると見抜く。まったく頭角を現していなかった洋子。5年前、突然作品が認められ、世界でその才能が高く評価された。…

mozaic.fm State of JS 2022 もうYarnはなるべく使わないようにしてたけどpnpm試していこうかな。 Svelteはいいぞ。 Remixもいいけど確かにやっぱReactじゃんなのそれはそうなんだよねぇ。 まぁ今のところだと現実的には要件によってNext.jsかRemixのどっちかを選ぶんだろうなってのはある。 そういやAstroでFable使えたりするんかな、今度やってみよ。 2022 JavaScript Rising Stars Denoは触ってみたけどBunはまだだったな。移行はまだ様子見状態。 エコシステムがもっと整わないとワークアラウンドの方が多そう。 逆に…

こんにちは、開発２部の早瀬です。 自分のチームではフロントエンドにReact（Next.js）を採用しており、MUIをベースにしたデザインシステムを構築して開発を行なっています。 そこで今回はデザインシステムの構築に至った背景や、具体的な取り組みを紹介したいと思います！ 背景 MUIとは デザインシステムを構築する目的 デザインと実装の同期 属人性の排除 コミュニケーションコストの削減 具体的な取り組み デフォルトスタイルのオーバーライド カラーコードの集約 Typographyの定義 8倍ルール Atomic Designの不採用 まとめ