{"id":20409412,"url":"https://github.com/jsakamoto/self-learning-materials-for-blazor-jp","last_synced_at":"2025-08-21T11:33:23.187Z","repository":{"id":60107348,"uuid":"133665741","full_name":"jsakamoto/self-learning-materials-for-blazor-jp","owner":"jsakamoto","description":"C# で Single Page Web アプリを開発するフレームワーク「Blazor」の WebAssembly 版の自習教材です。","archived":false,"fork":false,"pushed_at":"2024-05-27T12:46:52.000Z","size":107011,"stargazers_count":139,"open_issues_count":0,"forks_count":8,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-12-07T03:20:21.196Z","etag":null,"topics":["blazor","blazor-spa","blazor-webassembly","csharp","sample-code","spa","wasm"],"latest_commit_sha":null,"homepage":"https://jsakamoto.github.io/self-learning-materials-for-blazor-jp/Blazor%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%87%AA%E7%BF%92%E6%9B%B8-v.8.0.0.pdf","language":"PowerShell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsakamoto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-05-16T12:55:54.000Z","updated_at":"2024-12-04T02:20:28.000Z","dependencies_parsed_at":"2023-11-11T23:28:56.963Z","dependency_job_id":"12946522-ba6e-45d0-9c5f-4099e22962da","html_url":"https://github.com/jsakamoto/self-learning-materials-for-blazor-jp","commit_stats":null,"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2Fself-learning-materials-for-blazor-jp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2Fself-learning-materials-for-blazor-jp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2Fself-learning-materials-for-blazor-jp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2Fself-learning-materials-for-blazor-jp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsakamoto","download_url":"https://codeload.github.com/jsakamoto/self-learning-materials-for-blazor-jp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230511478,"owners_count":18237657,"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","blazor-spa","blazor-webassembly","csharp","sample-code","spa","wasm"],"created_at":"2024-11-15T05:41:33.508Z","updated_at":"2024-12-19T23:13:57.542Z","avatar_url":"https://github.com/jsakamoto.png","language":"PowerShell","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n📖 Blazor WebAssembly アプリケーションプログラミング自習書\n============================================\n\n🗨️ 概要\n----------------------------------------\n\nまずタイトルにある **\"Blazor (ブレイザー)\"** ですが、これは、**C# 言語を用いて (Single Page Application (SPA) を含めた) Web アプリケーションを開発、実行**する、フレームワーク/実行環境/開発環境です。\n\n本書が対象としている Blazor WebAssembly では、C# ソースコードを **JavaScript に変換するのではなく**、Web ブラウザの **WebAssembly 上に構築された .NET 実行環境が .NET アセンブリ (.dll) をそのまま読み込み、アセンブリ 内の IL (中間言語) を解釈・実行**します。\n\n本書は、題目の Web アプリケーションを Blazor WebAssembly で開発する手順を1ステップずつ解説し、  \n「Blazor WebAssembly のプログラミングってどんな感じなの?」  \n「Blazor ってどこがメリットなの?」  \nといった疑問にお答えできることを狙いとした、Blazor についての事前評価ができるような、そんな入門レベルの自習書テキストです。\n\nなお、本書が対象としている Blazor のバージョンは v.8.0 です。  \n(GitHub リポジトリには、本書の旧バージョン対応版も履歴に含まれています)\n\n\n🚀 本書で開発する Web アプリ\n----------------------------------------\n\n本書では、ページ上に複数のタイムゾーンの現在時刻を一斉表示する「世界時計」 Web アプリを Blazor WebAssembly を使って実装します。  \n表示する時計の表示用の名称とタイムゾーンを、追加、変更、削除するページを備えます。\n\n![fig.1](.assets/fig.001.png)\n\n下記 URL で完成版を公開しています。\n\n- https://jsakamoto.github.io/self-learning-materials-for-blazor-jp/\n\n\n📖 自習書テキストとソースコード\n----------------------------------------\n\n自習書テキストは PDF ファイルとして提供しており、下記リンクから参照できます。\n\n- [📒 Blazorアプリケーションプログラミング自習書-v.8.0.1.pdf](https://jsakamoto.github.io/self-learning-materials-for-blazor-jp/Blazor%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%87%AA%E7%BF%92%E6%9B%B8-v.8.0.1.pdf)\n\nこの自習書テキストに沿って作業を進めることで、**Blazor WebAssembly プログラミングの主だった構成要素を習得・体験**しつつ、**IDE 支援がどのように役立つか**も体験することができます。\n\nまた、本リポジトリの [v.8.0.1 ブランチ](https://github.com/jsakamoto/self-learning-materials-for-blazor-jp/commits/v.8.0.1)には、自習書テキストで解説している 1 ステップを 1 コミットとして履歴を記録したソースコードが収録されています。  \n適宜ご参照ください。\n\nなお、自習書テキスト PDF および 1 ステップごとのソースコードを収録した Zip ファイルを、[GitHub リポジトリの Release ページ](https://github.com/jsakamoto/self-learning-materials-for-blazor-jp/releases)からダウンロードできます。  \n\n本格的に本自習書に取り組んでみる際は、**上記 Release ページで配付している Zip ファイルを入手して開始されるのがお勧め**です。\n\n\n👪 想定する本自習書の利用者層\n----------------------------------------\n\n本自習書では、サーバー側実装として ASP.NET Core を採用しています。  \nまた Blazor は基本的にプログラミング言語は C# が想定されています。\n\nそのため、本自習書では下記のような開発者を想定しております。\n\n- HTML/CSS/JavaScript を用いた Web アプリケーション開発の知識がある\n- C# によるプログラミングの知識がある\n- 加えて ASP.NET Core によるサーバーサイド Web アプリケーション開発の知識があるとなお可\n\n\u003e ※ Angular, React, Vue などといった JavaScript SPA フレームワークの知識・経験は必ずしも必要としないことと考えていますが、もし何かしら SPA フレームワークの知識・経験があれば、Blazor の理解にも役立つと思います。\n\n\n🛠️ 必要な開発環境\n----------------------------------------\n\n### 必須環境\n\n本稿執筆時点で、本自習書による Blazor 開発を実践するにあたり、最低限必要な開発環境は下記のとおりです。\n\n- [.NET 8.0 SDK (8.0.100 かそれ以降)](https://dotnet.microsoft.com/download/dotnet-core/8.0)\n- 上記 SDK が対応しているデスクトップ OS (Windows, macOS, 各種 Linux ディストリビューション)\n- 何らかのテキストエディタ/コードエディタ\n- インターネット接続\n- Micorosoft Edge, Google Chrome, Mozilla Firefox, Safari などの近代的な Web ブラウザ\n\n以上の環境があれば、テキストエディタでソースコードを記述し、`dotnet` コマンドをターミナル (コマンドプロンプト) 上から実行することで、Blazor アプリケーションの実装・ビルド・実行が可能です。以下ではさらに、上記に加えて Blazor アプリケーション開発をより快適に行うための開発環境について記載します。\n\n### もっとも手軽な方法 - GitHub Codespaces を使う\n\n[GitHub Codespaces](https://github.co.jp/features/codespaces) は、クラウド上の Linux 仮想マシンに構築された開発環境を、Web ブラウザで動作する Visual Studio Code 相当のコードエディタを介して利用できる、GitHub が提供するサービスです。インターネット接続と Web ブラウザ、それに GitHub アカウントさえあれば、Web ブラウザだけで本自習書による Blazor アプリケーション開発を実践できます。\n\n下記リンクをクリックすると、.NET SDK のインストールも既に済んでいる、本自習書のステップ 1 の GitHub Codespaces による開発環境が Web ブラウザで開きます。\n\n[![GitHub Codespaces で開く](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new/jsakamoto/self-learning-materials-for-blazor-jp/tree/boilerplate%2Fv.8.0.1?quickstart=1)\n\n詳細は[自習書テキスト PDF](https://jsakamoto.github.io/self-learning-materials-for-blazor-jp/Blazor%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%87%AA%E7%BF%92%E6%9B%B8-v.8.0.1.pdf) の「開発環境」の章をご参照ください。\n\n\u003e [!NOTE]  \n\u003e GitHub Codespaces は最長 60 分/月の無料枠がある有償サービスです。料金体系について詳しくは[公式サイト](https://github.co.jp/features/codespaces)を参照ください。\n\n### Visual Studio Code を使う\n\n手元のローカル PC 上に、.NET SDK をインストールして開発作業を行なう場合は、**Visual Studio Code** の利用をお勧めします。特に、**C# および C# Dev Kit** の Visual Studio Code 拡張を追加しての利用が推奨されます。これら拡張がインストールされていれば、構文ハイライトやインテリセンスをはじめとした、強力な開発支援が得られます。\n\n- [Visual Studio Code](https://code.visualstudio.com/)\n- [C# for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)\n- [C# Dev Kit for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit)\n\n\u003e [!NOTE]  \n\u003e C# Dev Kit 拡張の利用にあたっては、Visual Studio 相当の使用条件があります。\n\n### Windows 上で Visual Studio 2022 を使う\n\nWindows PC をお使いの場合は、統合開発環境である Visual Studio の使用もお勧めです。\n\n- [Visual Studio 2022 - 17.8.0 以降](https://visualstudio.microsoft.com/vs/)\n    - \"ASP.NET と Web 開発\" ワークロードが選択されていること\n\n\u003e [!NOTE]  \n\u003e ※1 - Visual Studio 2022 は、無償利用可能な (但しライセンス条項に違反しない場合) Community Edition で可。  \n\u003e ※2 - Visual Studio は、複数のバージョンやインスタンスを、ひとつの OS 上に互いの干渉なくいくつもインストールして使用することが可能です。\n\n 🤔 自習書作成の背景\n----------------------------------------\n\nBlazor は、SPA を含めた各種 Web アプリケーション開発のシーンにおいて、もちろん決して [\"銀の弾丸\"](https://kotobank.jp/word/%E9%8A%80%E3%81%AE%E5%BC%BE%E4%B8%B8-248402) ではありません。  \nしかしながら Blazor は、適合する案件や開発者であれば、**開発の負担を減らし、よりよい生産性向上をもたらす可能性**を秘めています。\n\nそこでこの Blazor の可能性をより多くの開発者に体験していただき、Blazor WebAssembly を事前評価していただければと考え、この「Blazor WebAssembly アプリケーションプログラミング自習書 (自習教材)」を作成しました。\n\n\n📣 ライセンス\n----------------------------------------\n\n本 GitHub リポジトリに含まれる自習書テキスト、及び、ソースコードは、[The Unlicense](LICENSE) として提供します。\n\n商用・非商用に関係なく、また、クレジット表示も不要で、本リポジトリに含まれるテキストやソースコードを再利用・改変・再配布が可能です。\n\n\n📩 サポート\n----------------------------------------\n\n本自習書は個人が自主的に無償で公開・提供するものであり、サポートはありません。\n\n本自習書に関して、質問や連絡事項などある場合は、本 GitHub リポジトリの [Issue](https://github.com/jsakamoto/self-learning-materials-for-blazor-jp/issues) を利用ください。\n\n\n🔗 関連リソース\n----------------------------------------\n\n- Blazor 公式 GitHub リポジトリ - [https://github.com/aspnet/AspNetCore/tree/master/src/Components](https://github.com/aspnet/AspNetCore/tree/master/src/Components)\n- Blazor 公式サイト - [https://blazor.net/](https://blazor.net/)\n    - Blazor チュートリアル - [https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/](https://dotnet.microsoft.com/ja-jp/learn/aspnet/blazor-tutorial/)\n- Blazor 関連リンク集 (英語) \"Awesome Blazor\" - [https://github.com/AdrienTorris/awesomeblazor](https://github.com/AdrienTorris/awesomeblazor#awesome-blazor-) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakamoto%2Fself-learning-materials-for-blazor-jp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsakamoto%2Fself-learning-materials-for-blazor-jp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakamoto%2Fself-learning-materials-for-blazor-jp/lists"}