※旧SEメンバーシップ会員の方は、同じ登録情報（メールアドレス＆パスワード）でログインいただけます
再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第4回
ダウンロード サンプルファイル (2.6 KB)
Web Componentsの生々しいAPIを直接触るのは難しい部分がありますが、Litのようなライブラリを用いることで容易に再利用性とカプセル化の恩恵を受けられるようになるだけではなく、アプリケーション開発に不可欠な状態管理を扱えるようになります。今回はToDoリストを作成しながら、複雑な状態管理やリストの管理などの実践的な利用法を学んでいきましょう。
筆者の検証環境は以下の通りです。
前回はLitを用いて簡便にカスタム要素を構築する基本的なやり方について学びました。今回はもう少し踏み込んで、図1のようなToDoリストを作りながら、インタラクティブなアプリケーションの作成に役立つ機能を解説します。
簡単に仕様を解説します。データに基づいてチェックリストを表示でき、チェックを付けるとテキストに打ち消し線が引かれ、その項目が完了したことを表現します。また、［完了したタスクを隠す］のチェックを入れることで、完了している項目を非表示にする機能もつけておきましょう。
順を追って、これらの機能を実装しながら、Litでアプリケーション開発を行う際のエッセンスを解説していきます。
会員登録無料すると、続きをお読みいただけます
この記事は参考になりましたか？
WINGSプロジェクト 中川幸哉（ナカガワユキヤ）
＜WINGSプロジェクトについて＞ 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS Twitter: @yyamada（公式）、@yyamada/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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
