Web Componentsを簡便に扱う「Lit」の実践的な使い方を学ぶ──ToDoリストを作ろう
再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第4回
ダウンロード サンプルファイル (2.6 KB)
Web Componentsの生々しいAPIを直接触るのは難しい部分がありますが、Litのようなライブラリを用いることで容易に再利用性とカプセル化の恩恵を受けられるようになるだけではなく、アプリケーション開発に不可欠な状態管理を扱えるようになります。今回はToDoリストを作成しながら、複雑な状態管理やリストの管理などの実践的な利用法を学んでいきましょう。
対象読者
- 再利用可能なHTMLやCSSを整備したいJavaScriptエンジニア
前提環境
筆者の検証環境は以下の通りです。
- macOS Ventura 13.0.1
- Google Chrome 108.0.5359.124
- Lit 2.5.0
ToDoリストを作りながらLitの状態管理を学ぶ
前回はLitを用いて簡便にカスタム要素を構築する基本的なやり方について学びました。今回はもう少し踏み込んで、図1のようなToDoリストを作りながら、インタラクティブなアプリケーションの作成に役立つ機能を解説します。
簡単に仕様を解説します。データに基づいてチェックリストを表示でき、チェックを付けるとテキストに打ち消し線が引かれ、その項目が完了したことを表現します。また、［完了したタスクを隠す］のチェックを入れることで、完了している項目を非表示にする機能もつけておきましょう。
順を追って、これらの機能を実装しながら、Litでアプリケーション開発を行う際のエッセンスを解説していきます。
この記事は参考になりましたか？
- 再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ連載記事一覧
- この記事の著者
-
WINGSプロジェクト 中川 幸哉（ナカガワ ユキヤ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
