CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
![再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ一覧](https://cdn-ak-scissors.b.st-hatena.com/image/square/106c7e478be88bc515873fc79870c7b92dd94618/height=288;version=1;width=512/https%3A%2F%2Fcodezine.jp%2Fstatic%2Fcommon%2Fimages%2Fczlogo4fb_ogp.png)
Web Componentsを使うことで、再利用可能なUI部品を自作できますが、特にデザインにこだわりがない場合は他人が作ったUI部品を使って楽をしたいケースもあります。今回は、Web Componentsで開発されたUI部品のライブラリであるIonic Frameworkについて解説します。 対象読者 再利用可能なHTMLやCSSを整備したいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Ventura 13.0.1 Google Chrome 110.0.5481.100 @ionic/core 6.5.4 Web Componentsとデザインシステム これまでの連載で、Web Componentsの仕組みを使うことで、再利用可能、かつスタイルや振る舞いを内包したHTML要素(カスタム要素)を自作できることがわかりました。Web Compone
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く