asChild prop とは コンポーネントを使うときに表示される要素を変えたい！ 汎用的なコンポーネントを使用する際、以下のような場合にデザインや挙動は変えずに中でレンダリングされる HTML 要素だけ動的に変えたくなることがあります。 ボタンコンポーネントでリンク（<a> 要素、 Next.js や Gatsby などの Link コンポーネント）を表示したい タイトルを持ったセクションコンポーネントで <main> 要素を表示してセマンティックを変えたい フォームコンポーネントで <search> 要素を表示してセマンティックを変えたい 汎用的なヘッドレスコンポーネント（ロジックや挙動のみのコンポーネント）を実装したい 余談: そもそも見た目は変えずに HTML 要素だけ変えるのってアリ？ コンポーネントの見た目を変えずに表示される HTML 要素を変えると、ユーザの違和感や混乱を
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する｜masuidrive
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する Web Componentsを一言で説明すると「HTML/CSSが独立したカスタムタグを作れる仕組み」です。理解するには、まずは素のJavascriptだけでよくある部品を作ってみることが一番だと思います。 多くのサンプルではボタンやアイコンなどの部品を作りますが、今回はflexboxを使ったレイアウト定義のコンポーネントを作ってみます。この部分にはちょっとしたハマりどころがあるのでちょうど良い練習になります。 もう一つハマりやすいのはフォーム部品ですが、これはまた後日書きます。 この記事の前に 「今なら使えるWebComponents」を軽くでも読んでおいてもらえると嬉しいです。 2ペインのレイアウトを考える最初にWebアプリでよくある、左にナビゲーション、右にコンテンツを置く2ペイン
はじめに お久しぶりです、からころです。 突然ですが、みなさん Vite は利用してますか？ Vitest や Jest をはじめ、Vueでコンポーネントのテストをする際に、 しばしばテスト用にカスタム属性を用意することがあります。 テスト属性がバンドルされてプロダクション環境に出てくると、 意図しない挙動を引き起こしたりするかもしれないから避けたい！ そもそもテストタグを追加するだけなのにビルド後のコードに変更が加わるのは気持ち悪い! といった方に向けた記事になります。 設定について nuxt.config.tsの場合 { ... // 下記を追加する vue: { compilerOptions: { nodeTransforms: [ (node) => { if (node.type === 1 /* NodeTypes.ELEMENT */) { for (let i = 0;
React のクラスコンポーネントの bind は何を解決しているのか - 30歳からのプログラミング
クラスコンポーネントでイベントハンドラを設定する際に必要になる、constructorメソッドでのバインド。 そもそもこれはなぜ必要なのか。どのような動作をすることで、どのような問題を解決しているのか。 Hooks が登場したことで今後はクラスコンポーネントを書く機会は減っていくと思うが、これは React 固有の話ではなく JavaScript の言語仕様の話なので、理解しておくに越したことはない。 React のコードは React のv16.10.2で、それ以外のコードは Node.js のv12.12.0で動作確認している。 問題のおさらい bindしないと何が起こるのか。 以下は、ボタンを押すたびにオンオフが切り替わるコンポーネント。 import React from 'react'; class App extends React.Component { constructo
1. ComponentPropsを使う 多くの人が述べていますが、拡張性を高めるためにReact.ComponentPropsを使います。 import { ComponentProps, FC } from 'react' type ButtonProps = { loading: boolean } & ComponentProps<'button'> export const Button: FC<ButtonProps> = ({ loading, children, ...props }) => { return <button {...props}>{loading ? children : 'Loading...'}</button> } このようにすると、ページで用いるときにデフォルトのボタンと同じような使用感で用いることができます。 2. tailwind-mergeを
ジャンクのスーパーファミコンを修理、コンポーネント(D端子)出力・ノイズ軽減・低消費電力化・高音質化改造 - 人生に疲れた男のblog
メガCD・PCエンジン DUO-R・Xbox Oneとマイナーなゲーム機ばかりを修理しているので、今回はメジャーハードである任天堂「スーパーファミコン」の修理に挑戦。 調べてて思ったんだが、意外なことにあんまりスーパーファミコンの修理について書かれたblogやWeb記事って少ないんだな。壊れにくいという任天堂機特有の耐久性の高さを表す証拠ではあるんだが、流石に発売から30年近くも経過し経年劣化に勝てず映像の乱れや電源が入らないという故障が出てきている機体は割とよくある。 メガドライブ(メガCD)・PCエンジンの修理と同様、もちろんこれらの原因はコンデンサの液漏れによる容量抜けや基板の腐食によって回路が断線している状態なので、コンデンサを取り換えて腐食した回路パターンをリード線でつなぎ直せば復活する可能性大。 今回分解した880円で購入したジャンクのスーパーファミコン(コントローラ2個・AV
はじめに 今回紹介するのは、React や Vue などの「コンポーネント指向のフロントエンド開発」における「テスト方針の考え方」と、それを実現するための「方法論」です。 初めて React などのコンポーネント指向のテストを書くとき、どういう考え方・方針でテストを書いていくのか分からず悩んだ人も多いのではないでしょうか。 この記事ではその疑問の1つの解として、React 公式で推奨されているテストライブラリ Testing Library の開発者であり、Testing Trophy というテストコンセプト考案者でもある Kent C. Dodds の考え方とその実現方法を紹介していきます。 社内のシステムでも実際にこの Kent のコンセプトに従いテストの運用をしていますが、これによって「壊れにくいテスト」がフロントエンド（React）で書きやすくなっています。より正確に言うと「壊れる
今年の「iPhone 16」シリーズは背面に搭載されたMagSafeの仕様が若干異なるようです。 フランスのアクセサリーメーカーShopSystemが公開した写真をMacRumorsが伝えています。 新しいiPhone用保護ケースの金型写真を見ると、iPhone 16シリーズ用ケース製造のための型は、現行のiPhone 15シリーズの同等の型と比較して、MagSafeのマグネット部分の幅が狭くなっていることを確認できます。 新しいiPhone用保護ケースの金型幅が狭くなったことは、Appleのワイヤレス充電技術の改善を意味し、充電性能を維持または向上させながら接地面積を減らすのに役立つと予想されています。 今回の写真から見た目以上の変更を確認することはできませんが、iPhone 16シリーズではMagSafeの充電速度が向上し最大20Wまでサポートされるという噂もあります。現行では最大15
UIコンポーネントにドメインを入れるな
UIコンポーネントにUI以外の知識、すなわちデータロジック等のドメイン知識を入れないで欲しいという話をします。 UIコンポーネントの定義 ここで「UIコンポーネント」は、UIデザインのみを表した汎用的に使い回せるコンポーネントであると定義します。 例えばMUIやChakra UIにあるものはUIコンポーネントであり、それらを使って「ユーザリスト」「特別CTA用ボタン」という特定の機能を作った場合はUIコンポーネントではないという前提です。(言葉の使い方として合っているだろうか微妙ですが、ニュアンスで何となく掴んでください...) 抽象化を間違う例 ここから(実話ベースですが)仮のお話で例えます。学生のデータを何でも管理する万能ダッシュボードの実装にアサインされたフロントエンドエンジニアA君が居ました。デザインを確認しにFigmaを開くと、このように単一の数値を見せるUIが共通しているようで
as プロパティに任意の要素を渡すことで、コンポーネントをその要素で描画することができる仕組みを用意しました。仕組みの実態はいい感じの型定義です。 <Button onClick={handleClick}>ボタン</Button> <Button as="a" href="/foo/bar">リンクボタン</Button> Button コンポーネントは普段は button 要素で描画されますが、 as="a" を渡した場合は a 要素で描画されます。また、コンポーネントの props の型定義がその要素に最適化され、 href を渡すことができるようになります。 要素以外にコンポーネントも渡すことができ、 next/link 等の独自の振る舞いが加えられたコンポーネントを使うこともできます。props も next/link に最適化されます。 サンプルプロジェクト as で拡張した様
注意書き あらかじめ言っておくのですが、今回はそこまで実践的なことは書いていません。 というのも、Material UI の機能を紹介するにしても、できることが多すぎてどこを抜粋するか悩んでしまったためです（苦笑） 公式ドキュメントを見ていただくとよくわかるのですが、あらゆる使用例、サンプルコード（JS、TS ともに）およびプレビュー表示が豊富に載っています。さらっと見ていくだけでも、こんなコンポーネントも用意されているのかと発見があって楽しいくらいです。 なので、提供されているコンポーネントに関しては、大まかな概要を紹介する程度にとどめます。 もし興味がわいた方はぜひ公式ドキュメントを見てみてください。 各コードには CodeSandbox へのリンクもあるので、お気軽に試せますよ。 2021/09/16時点で、5系が beta リリースされています 2021/09/16に5系がリリース
こんにちは。JJです。 久しぶりの投稿になります。 今回はVue.jsにおけるコンポーネント間のデータのやり取りについて紹介していきます。 はじめに Vue.jsを利用したフロントエンドの開発を進めていく中で、複雑な機能であったり、反復性を有する機能の開発を行う際、1つのVueコンポーネントで実装するよりも機能の単位、粒度に応じて複数のコンポーネントに分解して実装すると思います。後者の方が、経験上、ソースコードの可読性やメンテナンス性、さらにVue.jsの特徴の一つであるコンポーネントの再利用性も生かすことができるので、大変便利です。 しかしながらこの場合、複数のコンポーネント間でのデータのやり取りというものが必要不可欠になります。開発経験の浅い方の場合、その扱いに最初は悩むことでしょう。 そこで今回は簡単な実装例も交えつつ、Vue.jsの重要な機能の1つである「props」と「emit」
はじめに はじめまして！ レバテックでプロダクトデザイナーをしている成田です。 現在は日々のプロダクトデザインの業務に加え、デザインシステム『VoLT』の構築と運用に取り組んでいます。 なんとか社外公開まで漕ぎ着けた『VoLT』ですが、プロジェクトが開始してすぐの頃は「無理だ」と弱音を吐きたくなるほど課題が散見されていました。実際、私は何度も「え〜無理なんだが」と声に出しながら作業を進めていました（笑） 本記事では、Figmaでのコンポーネント管理の話を中心に、抱えていた課題を解決するために生み出した 「インスタンスガイドライン」 というものについてお話しできればと思います。 ちなみに、デザインシステム構築の背景や目的が書かれた記事も公開されているので、気になる方はぜひチェックしてみてください👏 何が難しい？レバテックのデザインシステム デザインシステムは、定義すること自体は難しくありま
#この記事は？ Wordpressの新エディタGutenbergをいじってて よく使いそうだと思ったコンポーネントをまとめていきます 追記編集していきます TextControl と TextareaControl テキスト編集のコンポーネント。 onChangeでイベントオブジェクトじゃなく中身の文字列だけが渡されるようになってるので、値の取り出しとかしなくていいので普通にtextareaとか書いちゃうより楽です。 const {TextControl, TextareaControl} = wp.components; registerBlockType('myPlugin/myBlock',{ edit({attributes,className,setAttributes}){ return [ <TextControl onChange={(newText1)=>setAttri
React コンポーネントをリファクタリングする方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactアプリケーションに適用されるリファクタリングに関する一般的な問題について解説します。 クラスコンポーネントから学習してしまい、フックに移行する前に少し混乱する可能性があります。 関数コンポーネントが好まれる理由と、クラスコンポーネントよりも関数コンポーネントを使用する利点があるかどうかを詳しく学んで下さい。 なぜクラスではなくフックなのか？ 状態がない場合 状態を持つコンポーネント Props ライフサイクルの簡素化 これから 最後に なぜクラスではなくフックなのか？ Reactでクラスを使用する利点は、状態がいつ変化したかを識別し、this.stateキーワードを使用してグローバル状態またはコンポーネント状態を更新するライフサイクルメソッドがクラスに含まれていることです。 対照的に、フックはReact 関数コンポーネントで使用され、クラスを必要とせずにコンポーネントの状態やその
Container / Presentational構成【Reactのコンポーネント設計】 | NOCHITOKU
こんにちは！フリーランスエンジニアの雄貴です！ Reactを用いたコンポーネント設計の方針は様々ありますが、 私が普段用いている手法を紹介しようと思います！ Reactのコンポーネント従来のコンポーネントだと、以下のコードのように関数の中でstate(状態)やfunction(ロジック)を定義し、それを「return」直下のview部分に渡してレンダリングしています。 import React from 'react' /** * InputForm * @returns */ export const InputForm: React.FC = () => { // state (状態) const [value, setValue] = React.useState('') // function (ロジック) const handleChange = (event: React.Ch
React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】 | in-Pocket インポケット
こんにちは、i3DESIGNエンジニアの田口です。 今回は「React初学者が必ず押さえておきたい考え方とは？」というテーマでお話します。 こちらの記事は、下記のような方を対象としています。 プログラミングを学習中でフロントエンドの技術に興味のある方 Reactを触ったことはないが、興味がある方 私自身が、HTML, CSS, Pug, Sass, JavaScriptでの開発から、Reactでの開発に移行してからの約半年で感じた体験をもとにお話し致します。 まず本題に入る前に、簡単にReactの説明をします。 Reactとは？ Reactとは、Facebook社とコミュニティによって開発されているユーザーインターフェース（UI）構築の為のJavaScriptライブラリです。 実は、Reactはフレームワークではなく、ライブラリです。（Vue.jsやAngular.jsはフレームワーク、j
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
Vue.js と デザインパターンを活用したコンポーネント開発について サンプルアプリは↓ https://github.com/tooppoo/sample-for-vue-with-design-patterns
React 開発チームの（よく見られる）見解として「そもそも関数コンポーネントのほうがメンタルモデルとしてより良い」というのがある
関数型Reactコンポーネントでレンダリングと副作用Hookが実行されるタイミング | Hypertext Candy
この記事では、いくつかの簡単なサンプルを通して、関数型の React コンポーネントにおいて、レンダリングと副作用 Hook（useEffect）がいつ実行されるのかを検証してみます。 関数型コンポーネントのレンダリング 先に検証から得られたルールを要約すると、以下の通りです。 内部状態またはプロパティが変更されると、コンポーネントの関数が再実行される。 関数の結果が前回の呼び出し時と同じであれば、レンダリングは発生しない。 レンダリングが完了すると、useEffect が実行される。 3番目に関して、レンダリング完了後に必ず useEffect が呼ばれるのか、一回だけ呼ばれるのか、特定の内部状態をチェックして変化があったときのみ呼ばれるのか、その挙動は useEffect の第二引数に依存します。 これらのルールを理解すれば、ほとんどのケースでレンダリングと副作用 Hook の挙動を予
TextMeshProで漢字テキストにルビを振るコンポーネント. Contribute to ina-amagami/TextMeshProRuby development by creating an account on GitHub.
はじめに ウェブアプリを書いていてよく出てくるUIの一つに「タブ」があると思います。 UIライブラリを導入していれば、大抵のライブラリにはその機能を実現出来るコンポーネントが実装されていることからも、よく求められる機能の一つといえるでしょう。 そして、数あるUIライブラリのうちの一つ Ant Design にも、以下のように書ける便利なタブコンポーネントが含まれています。 リファレンス ところでこのコードの「<Tabs> の下に <TabPane> を置くとそれがタブUIとして表示される」というライブラリデザイン、どうやって実装しているのか気になりませんか？ <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPa
ビザスクlite事業部フロントエンドエンジニアの小柳(@mascii_k)です。 弊社ではモダンなフロントエンド開発手法にシフトしつつあり、Figma で構築したデザインシステム上でデザインし、それに対応するものを Vue.js 2.x 系で実装する開発がスタンダードとなっております。 現在 Vue.js 3.0.0 の正式リリースが間近とされていて、弊社としても積極的にマイグレーションをしていきたいと思っております。 今回は Vue 2.x 系向けに作られた UI コンポーネントの Vue 3.0 系へのマイグレーションに向けた検証結果を公開します。 弊社の UI コンポーネント事情 弊社では Vuetify や Element UI といったコンポーネントフレームワークには依存せず、極力スクラッチで UI コンポーネントを作って開発しています。 Figma を活用して管理されているデザ
Android Jetpack コンポーネントのNavigationのプロダクトへの導入手順と実装Tipsの紹介 - ZOZO TECH BLOG
はじめに こんにちは！ ZOZOテクノロジーズ開発部の鈴木(@zukkey59)です！ 普段は、「ファッションコーディネートアプリ WEAR」のAndroidアプリを担当しています。 私のWEARに配属されて初めての大きな仕事は、新規登録・ログイン機能へAndroid Jetpack コンポーネントのNavigationを導入することでした。 導入によってある程度知見がためることができました。 今回はNavigationをこれから導入したい！と検討している方、もしくは興味がある方に向けて、自身の知識の整理もかねて紹介したいと思います。 既に、Navigationの記事はQiitaやMediumに数多くあるので被っている内容もありますが、今回は導入からテストまでの一連の流れとその中で気づいた注意すべきところなどを一通り紹介させていただきます。 要件や仕様として、WEARで使用しなかったNav
LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの坂口達彦氏がVue.js＋Bootstrap環境向けピボットテーブルコンポーネントの開発秘話を紹介しました。 Vue.js向けvue-pivot-table-plus 坂口達彦氏（以下、坂口）：ではこれから「Vue.js向けvue-pivot-table-plus」と題して、LINE株式会社の坂口が発表いたします。他のみなさんのセッションがフレームワークまわりの、ためになる話の中で、突然ピボットテーブルが出てきて「なんだそりゃ？」みたいな感じだと思います。ただ、少しマイナーな領域ではあるんですが、せっかくこのような機会をいただいたので、こんなものも作っているよという紹介のつもりでお話できればと思います。よろしくお願いしま
SwiftUIで対応しきれずUIKitを使ったコンポーネントのまとめ - スタディサプリ Product Team Blog
こんにちは、iOSエンジニアの @elliekwon です。去年のiOSDC Japan 2021「スタディサプリ」がFull SwiftUIを選択した先に見えてきたものの発表で紹介させて頂いた通り、SwiftUIで開発してきた「スタディサプリ中学講座」ですが、SwiftUIでは対応しきれず、ごく一部UIKitを利用した機能も存在しています。この記事ではそれらのケースと対応策を紹介します。 事前知識 その前にSwiftUIからUIKitを使うため、先に知って貰えたいものがあります。 一つは UIViewRepresentable / UIViewControllerRepresentable と言うprotocolで、これらはSwiftUIでUIKitのUIView/UIViewControllerを使えるようにしてくれるwrapperです。 UIViewRepresentableに準拠し
仕様 数値をカウントアップしていくコンポーネントをシンプルに作ってみる。 カウントアップの完成イメージ どこまでカウントアップするか数値を指定できる 0 から指定された数値まで 1 ずつカウントアップした表示をしていく 利用した技術スタック 今回、実装する際に使った技術スタックは以下の通り。 @emotion/css: v11.10.5 @emotion/react: v11.10.5 @emotion/styled: v11.10.5 react: v18.2.0 react-dom: v18.2.0 上記のライブラリが必要なわけではなく、自身が実装しやすい環境で行っただけである。 また、カウントアップ用のライブラリは使用しないものとする。 CSS だけでの実装 カウントアップ表示をするためには動的に数値を変化させる必要がある。@propertyというアットルールを利用すると JavaS
Vue2 の Options API で書かれたコンポーネントを、composition API を使った書き方に自動変換したくてツールを作った。 左：Options API / 右：Composition API リポジトリ デモ なにがしたいのか VueUse のような composition 用の便利なライブラリを使いたいし、とりあえずコンポーネントからロジックを分離したいというモチベーションがあったため、いくつか既存コンポーネントを人力で書き換えてみるのを試してみた。 しかし手作業でやってみると作業量が多く、これは自動化しないときついと思ったのでツール化することにした。 デモを見ると分かるが、Vue2 から Vue3 への移行ツールではなくて、Vue2 のまま Composition API プラグインを用いた記法に書き換えるものになっている。 これは現状の自分のプロジェクトを完全
<file-attachment> element - GitHub製のWebアップロードコンポーネント MOONGIFT
最近のWebアプリケーションではファイルをWebブラウザにドラッグ&ドロップしてアップロードすることが良くあります。開発するのはさほど難しい訳ではありませんが、ちょっと面倒だったります。かといって、ファイルアップロードライブラリを使うと、周りのデザインと合っていないことも良くあります。 今回紹介する elementはシンプルなファイルアップロード用Web Componentsになります。 elementの使い方 利用例です。Web Componentsとして定義されています。 </file-attachment><file-attachment directory input="upload"> <input id="upload" type="file" multiple/> </file-attachment> 表示です。 ファイルをドロップします。 elementはGitHubが開発
先日、経済産業省から「IMIコンポーネントツール」というものが公開されました。 IMIコンポーネントツール https://info.gbiz.go.jp/tools/imi_tools/ 今回、この中の「(1) 住所変換コンポーネント」をいろいろ使ってみたので、そのことについて投稿したいと思います。 住所変換コンポーネントについて、以下のブログで詳しく解説されています。 経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！ 住所変換コンポーネントは、簡単に言うとあいまいな住所表記を正規化してくれるツールと理解しています。 私は個人でLinked Open Addresses Japan(以下、住所LODと呼びます)という住所データをLinked Open Dataで公開するサイトを運営しています。 住所LODについて
不動産関係の仕事をしている私からすると、誤った方法で住所を勝手に正規化するシステムがあって腹が立ちます。 内部的にその会社で都合の良い方法で正規化するのは仕方無いとしても、顧客が入力した住所を勝手に誤った方法で改変して、それを宛名として郵便物を送り付けることは大変失礼にあたるので止めていただきたいです。 日本の住所表記を大きく分けると、住居表示の地域と、住居表示が実施されていない地域の2つがあるので、正規化するならそれを混同しないようにしましょう。 ・住居表示の地域 正）東京都千代田区永田町一丁目１０番１号 誤）東京都千代田区永田町１丁目１０番１号 … 「永田町一丁目」という地名なので算用数字にしてはならない 誤）東京都千代田区永田町一丁目１０番地１ … 住居表示の地域では「番地」ではなく「番」を使う ・地番管理の地域 正）大宮区吉敷町一丁目１２４番地１ 誤）大宮区吉敷町一丁目１２４番地１
ReactコンポーネントへPropsを渡す/受け取る方法は色々あり、意外にもまとまったリファレンスがなく説明に困ったのでまとめたいと思います。 なお、公式ドキュメントでもあまり包括的な記述がありませんが、β版のドキュメントには比較的良いページがあります：https://beta.reactjs.org/learn/passing-props-to-a-component Propsの渡しかた 基本の渡し方 propsを渡す基本的な構文は、props名={値}です。どんな値もこの記法で渡すことができます。多くの説明書では文字列に限った渡し方から学びますが、まずはこちらが基本だと覚えたほうがわかりやすいです。 <MyComponent age={25} // 数値 rate={100 * 0.5} // 数値 name={'John'} // 文字列 greeting={`Hi, my nam
この記事はエムスリー Advent Calendar 2019の14日目の記事です。 ご無沙汰しております、エムスリーエンジニアリンググループ 兼 QLife チーフアーキテクトの園田 (@ryoryoryohei) です。 今回はフロントエンドライブラリである Vue.js （というか vue-router）の小ネタです。 Nuxt.js を利用しない場合、vue-router で複数レイアウトを扱うには「ネストされたルート」の利用が公式ドキュメントで案内されています。 今回は「ネストされたルート」を利用せず、複数レイアウトの出し分けを高階コンポーネントで実現してみます。 詳しい人ならこの時点で実装含めてすべてイメージできちゃいますね。 第二の故郷 十和田湖の写真 高階コンポーネントとは？ 高階コンポーネントは、ざっくり言うと、コンポーネントを引数にとって別のコンポーネントを返す関数コン
はじめに 先日アメリカのLAで開催されたAdobeMAXにてAdobeXDの新機能が紹介されました！ その中でも 特に目玉機能だと感じたステート機能 （コンポーネント状態）について詳解させていただきます。 まずはステート機能で何が出来るのかを理解するために以下の動画をご覧ください。 Embedded content: https://twitter.com/pino_ebiebi/status/1191955060537860097?ref_src=twsrc%5Etfw そして、こちらの記事はAdobe XD Advent Calendar 2019の２日目の記事です。 ステート機能の基本 動画作りました！ ステート機能の基本が2分で分かる動画を作ったので、まずはこちらを観てみてください！ Embedded content: https://twitter.com/pino_ebiebi
Image コンポーネントの特徴Next.js が提供している Image コンポーネント (next/image) を使用すると、image 要素をそのまま配置するのに比べて次のような恩恵を受けられます。 遅延ロード (Lazy loading)Web ブラウザでその画像がビューポート内（画面内）に入って来たときに初めてダウンロードされるようになります。大きなページの末尾部分に配置された画像が、無駄にダウンロードされてしまうのを防ぐことができます。画像の最適化アクセスしてきたクライアントに応じて画像ファイルを最適化して配信します。例えば、圧縮効率のよい WebP フォーマットなどに変換してくれます。リクエスト時にサーバーサイドでオンデマンドで最適化するため、Image コンポーネントを使うことでビルド時間が伸びてしまうことはありません。外部サーバーの画像を間接的に表示する場合も最適化でき
・複数単語にする ・親子関係の場合、親の名前を接頭辞にする ・最高レベルの単語からはじめて修飾語で終わる ・ベースコンポーネントはBase,App,Vを接頭辞にする ・単一インスタンスの場合はTheをつける
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React コンポーネントの表示する HTML 要素を変える asChild prop を実装する - Qiita
ViteでVueコンポーネントテスト用のカスタム属性を削除する
TailwindCSSでコンポーネントを作成するときに意識していること
【フロントエンド】コンポーネント指向 React / Vue のテスト方針 - Qiita
「iPhone 16」、よりスリムになったMagSafeコンポーネントを採用か - こぼねみ
連載: Kubernetesのカスタムコントローラを作ろう！ ～第1回 Kubernetesのコンポーネント～ - クリエーションライン株式会社
リンクとしても使えるボタンコンポーネントの作り方(React)
React向けUIコンポーネントライブラリ、Material UI(v4)の紹介
【Vue.js】【図解】emit、propsを使ったコンポーネント間のデータのやり取り | orizuru
プロダクトを横断したFigmaコンポーネント構築 〜「インスタンスガイドライン」を策定した話〜
Wordpress Gutenberg よく使いそうなコンポーネントまとめ - Qiita
コンポーネントベースのアプリケーションのためのCSSアーキテクチャ
Vue.js + デザインパターンによるコンポーネント実装
関数コンポーネントが推奨される理由は「短く書けるから」ではない - fsubal
TextMeshProの漢字テキストにルビを振るコンポーネント【Unity】｜アマガミナブログ
【React】カッコよく書けるタブコンポーネントを自作する
Vue 3に向けてUIコンポーネントのマイグレーションの検証をしました - VISASQ Dev Blog
Vue.js＋Bootstrap環境でExcelのようなピボットテーブルを OSSコンポーネント「vue-pivot-table-plus」開発秘話
数字をカウントアップするコンポーネントを作る時に考慮したあれこれ
Vueコンポーネントをcomposition APIに書き換えるやつを作っている
Rowコンポーネントの作成｜【React+TypeScript】Netflixのクローンを作るチュートリアル
IMI住所変換コンポーネントでいろんな住所を正規化してみた - Qiita
経産省、住所の正規化などを行えるコンポーネントを公開 | スラド オープンソース
ReactコンポーネントへのPropsの渡し方/受け取り方大全
Vueでレイアウトの切り替えを高階コンポーネントで実装する - エムスリーテックブログ
AdobeXDのステート機能（コンポーネント状態）を使いこなそう！
「Android 11」に初のパッチ ～ Google、Androidの2020年10月セキュリティ情報を発表／Qualcommのクローズドソースコンポーネントで“Critical”な脆弱性
Next.js の Image コンポーネントで画像を表示する (next/image)
【Vue】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】 - Qiita