{"id":16683628,"url":"https://github.com/yamachu/pokedexwithdotnetwebtechnologies","last_synced_at":"2025-04-09T23:25:16.017Z","repository":{"id":227350935,"uuid":"771125651","full_name":"yamachu/PokedexWithDotnetWebTechnologies","owner":"yamachu","description":".NET MAUI Blazor Hybrid, .NET WASM + Modern Frontend App(React, Vue.js)","archived":false,"fork":false,"pushed_at":"2025-03-17T10:24:15.000Z","size":469,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-17T11:33:01.308Z","etag":null,"topics":["blazor","maui-hybrid","react","vuejs","webassembly"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yamachu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-12T18:22:16.000Z","updated_at":"2024-11-13T13:33:19.000Z","dependencies_parsed_at":"2025-02-16T01:42:06.879Z","dependency_job_id":null,"html_url":"https://github.com/yamachu/PokedexWithDotnetWebTechnologies","commit_stats":null,"previous_names":["yamachu/pokedexwithdotnetwebtechnologies"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamachu%2FPokedexWithDotnetWebTechnologies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamachu%2FPokedexWithDotnetWebTechnologies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamachu%2FPokedexWithDotnetWebTechnologies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamachu%2FPokedexWithDotnetWebTechnologies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamachu","download_url":"https://codeload.github.com/yamachu/PokedexWithDotnetWebTechnologies/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248127588,"owners_count":21052253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","maui-hybrid","react","vuejs","webassembly"],"created_at":"2024-10-12T14:25:36.129Z","updated_at":"2025-04-09T23:25:15.996Z","avatar_url":"https://github.com/yamachu.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pokedex with .NET Web Technologies\n\nこのプロジェクトは、[.NET MAUI Blazor Hybrid](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/?view=aspnetcore-8.0) における [Blazor custom elements](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/js-spa-frameworks?view=aspnetcore-8.0#blazor-custom-elements) や [.NET JavaScript interop on WebAssembly](https://learn.microsoft.com/en-us/aspnet/core/client-side/dotnet-interop?view=aspnetcore-8.0) また [HybridWebView(experimental)](https://github.com/Eilon/MauiHybridWebView) などの .NET Web 技術を使った Pokedex を題材としたサンプルプロジェクトです。\n\nJavaScript ベースの SPA フレームワーク（ライブラリ）である React や Vue.js を View に採用し、コアロジックを .NET で実装する構成を想定しています。\n\nこのプロジェクトの構成を利用することで、以下のようなことが可能です。\n\n- .NET で実装したコアロジックを、JavaScript ベースの SPA フレームワーク（ライブラリ）で利用する\n- .NET MAUI Blazor Hybrid との組み合わせにより、Web アプリにネイティブの機能を追加する（Electronのような）\n\n## プロジェクトが提供するもの\n\n現在このプロジェクトでは以下のものを提供しています。\n\n### PokedexDotnet.MAUIBlazor\n\n.NET MAUI Blazor Hybrid で作成された、SQLite3 を DB のバックエンドとして利用する Pokedex アプリ。\nDB 操作の処理を .NET で実装し、処理のユースケース単位で Blazor custom elements として提供しています。\n\nこのプロジェクトで、View を伴わない Blazor custom elements の実装方法や、JavaScript 相互運用について学ぶことが出来ます。\n\n詳細: [PokedexDotnet.MAUIBlazor](./src/PokedexDotnet.MAUIBlazor/README.md)\n\n### PokedexDotnet.Experimental.HybridWebView\n\n.NET MAUI Blazor Hybrid で作成された、SQLite3 を DB のバックエンドとして利用する Pokedex アプリ。\nDB 操作の処理を .NET で実装し、View から HybridWebView 経由で処理を呼び出すインタフェースを提供しています。\n\nこのプロジェクトで、View を JavaScript で実装し、.NET で実装したコアロジックを HybridWebView 経由で呼び出す方法を学ぶことが出来ます。\n\n詳細: [PokedexDotnet.Experimental.HybridWebView](./src/PokedexDotnet.Experimental.HybridWebView/README.md)\n\n### @pokedex-dotnet-react/interop-mauiblazor\n\nPokedexDotnet.MAUIBlazor で提供されている Blazor custom elements を React で利用するためのラッパーライブラリ。\n[aspnet/samples](https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration) で提供されている、Blazor custom elements を React で利用するカスタムフックをベースとし、Blazor custom elements に対して Props を渡したり、イベントを受け取るためのカスタムフックを提供しています。\n\nこのプロジェクトで、Blazor custom elements を React で利用する方法を学ぶことが出来ます。\n\n詳細: [@pokedex-dotnet-react/interop-mauiblazor](./react/packages/interop-mauiblazor/README.md)\n\n### @pokedex-dotnet-react/entry-mauiblazor\n\nPokedexDotnet.MAUIBlazor で提供されている Blazor custom elements を React で利用したサンプルアプリ。\n.NET MAUI Blazor Hybrid の WebView における JavaScript 相互運用レイヤーから呼び出されるエントリーポイントを提供しています。\n\nこのプロジェクトで、.NET MAUI Blazor Hybrid から呼び出し可能なエントリーポイントの実装方法を学ぶことが出来ます。\n\n詳細: [@pokedex-dotnet-react/entry-mauiblazor](./react/apps/entry-mauiblazor/README.md)\n\n### @pokedex-dotnet-react/interop-hybridwebview\n\nPokedexDotnet.Experimental.HybridWebView で提供されている HybridWebView を React で利用するためのラッパーライブラリ。\nビルド時にバンドルされる HybridWebView の JavaScript ライブラリを React で利用するためのカスタムフックを提供しています。\n\nこのプロジェクトで、HybridWebView を React で利用する方法を学ぶことが出来ます。\n\n詳細: [@pokedex-dotnet-react/interop-hybridwebview](./react/packages/interop-hybridwebview/README.md)\n\n### @pokedex-dotnet-react/entry-hybridwebview\n\nPokedexDotnet.Experimental.HybridWebView で提供されている HybridWebView を React で利用したサンプルアプリ。\nHybridWebView から呼び出されるエントリーポイントを提供しています。\n\nこのプロジェクトで、HybridWebView から呼び出し可能なエントリーポイントの実装方法を学ぶことが出来ます。\n\n詳細: [@pokedex-dotnet-react/entry-hybridwebview](./react/apps/entry-hybridwebview/README.md)\n\n### @pokedex-dotnet-vue/interop-mauiblazor\n\nPokedexDotnet.MAUIBlazor で提供されている Blazor custom elements を Vue.js で利用するためのラッパーライブラリ。\n[yamachu/aspnet-samples](https://github.com/yamachu/aspnet-samples/commit/e2f216267fa6201071a426e016cded16ef93a4be) で試験的に実装した、Blazor custom elements を Vue.js で利用する Composable 関数をベースとし、Blazor custom elements に対して Props を渡したり、イベントを受け取るための Composable 関数を提供しています。\n\nこのプロジェクトで、Blazor custom elements を Vue.js で利用する方法を学ぶことが出来ます。\n\n詳細: [@pokedex-dotnet-vue/interop-mauiblazor](./vue/packages/interop-mauiblazor/README.md)\n\n### @pokedex-dotnet-vue/entry-mauiblazor\n\nPokedexDotnet.MAUIBlazor で提供されている Blazor custom elements を Vue.js で利用したサンプルアプリ。\n.NET MAUI Blazor Hybrid の WebView における JavaScript 相互運用レイヤーから呼び出されるエントリーポイントを提供しています。\n\nこのプロジェクトで、.NET MAUI Blazor Hybrid から呼び出し可能なエントリーポイントの実装方法を学ぶことが出来ます。\n\n詳細: [@pokedex-dotnet-vue/entry-mauiblazor](./vue/apps/entry-mauiblazor/README.md)\n\n### PokedexDotnet.WasmConsole\n\n.NET JavaScript interop on WebAssembly の技術を利用した .NET アプリケーションを、npm package として提供するためのサンプルプロジェクト。\n\nWIP\n\n## サンプルプロジェクトの実行\n\n各プロジェクトの README を参照してください。\n実行には以下の環境が必要です。\n\n- [.NET 8](https://dotnet.microsoft.com/download) 以上\n- [Node.js 20](https://nodejs.org/) 以上\n- [yarn v1](https://classic.yarnpkg.com/)\n\nまた .NET MAUI Blazor Hybrid や .NET JavaScript interop on WebAssembly のプロジェクトを実行するには、各種 Workload のインストールや、関連 SDK などのインストールが必要です。\n\nWorkload のインストールは、リポジトリルートで以下のコマンドで行うことが出来ます。\n\n```sh\n$ sudo dotnet workload restore\n```\n\nその他詳しいインストール手順についは、Microsoft Learn のドキュメントを参照してください。\n\n- [Build a .NET MAUI Blazor Hybrid app](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0)\n- [Run .NET from JavaScript](https://learn.microsoft.com/en-us/aspnet/core/client-side/dotnet-interop?view=aspnetcore-8.0)\n\n## 関連プロジェクト\n\n- https://github.com/yamachu/pokedex-net-webassembly-without-blazor\n  - .NET JavaScript interop on WebAssembly の技術を利用した .NET ライブラリを React や Node.js で利用するためのサンプルプロジェクト\n- https://github.com/yamachu/BlazorWithReactSample\n  - Component Tag Helper を利用して、Blazor custom elements を React で利用するためのコードを生成し、利用するためのサンプルプロジェクト\n\n## ライセンス\n\nこのプロジェクトは MIT ライセンスの元で公開されています。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamachu%2Fpokedexwithdotnetwebtechnologies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamachu%2Fpokedexwithdotnetwebtechnologies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamachu%2Fpokedexwithdotnetwebtechnologies/lists"}