C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[6]: ASP.NETでReactのような見た目のUIを使うには

(過去ログ 166 を表示中)

[トピック内 7 記事 (1 - 7 表示)]　 << 0 >>

■95868 / inTopicNo.1)

　ASP.NETでReactのような見た目のUIを使うには

▼■

□投稿者/ simano (3回)-(2020/10/05(Mon) 17:16:20)

分類:[ASP.NET (C#)]　

こんにちは。

VisualStudio2019 C#で、ASP.NETまたはASP.NET Coreを使い、Webアプリケーションを作ろうしています。
（Webサーバーは、Windows10, IISです）

サンプルとして見せられたウェブ画面が、Reactを使った今風なUI（ボタンやバー）で構成されており、
なるべくそれらに近い見た目にしたいと考えています。

この場合、ASP.NETまたはASP.NET Coreのフレームワークに、Reactのコンポーネント（スタイル）だけを
参照して使うという方法が考えられるのかなと思いますが、そのような事は可能でしょうか。

（ウェブ検索してみると、VisualStudioにReactのフレームワークを取り入れるような記事がヒットしますが、
出来れば単純に、ボタン等の見た目だけを使わせていただきたいです）

または、もし、ASP.NETまたはASP.NET Coreを使い、Reactのような見た目のコントロールを使おうと考えたら、
どのような実装が現実的でしょうか。

Webアプリケーションのデザインについて、あまり知識がなく、質問のピントがずれていたら、申し訳ありません。
よろしくお願いいたします。

引用返信 編集キー/

■95870 / inTopicNo.2)

　Re[1]: ASP.NETでReactのような見た目のUIを使うには

▲▼■

□投稿者/ WebSurfer (2105回)-(2020/10/05(Mon) 19:01:42)

■No95868 (simano さん) に返信

> サンプルとして見せられたウェブ画面が、Reactを使った今風なUI（ボタンやバー）で構成されており、
> なるべくそれらに近い見た目にしたいと考えています。

何か思い違いをしているのでは？

React は Single Page Application (SPA) のための JavaScript のフロントエンドフレームワークで、
Resct だから「今風なUI」になるとしたら、それは SPA としての動きをするだからだと思いますが。

何にせよブラウザ上での表示なので、「ボタンやバー」の見かけの話なら html と css で決まる話で、
React は関係ないかと。

Visual Studio Community 2019 のテンプレートに React のテンプレートがあるので、それでプロジェ
クトを作って試してみては？（別途、Node.js のインストールが必要）

実行すると Home 画面がブラウザに表示され、以下のような説明があります。意味は分かりますよね？

Welcome to your new single-page application, built with:

・ASP.NET Core and C# for cross-platform server-side code
・React for client-side code
・Bootstrap for layout and styling

他に、以下のチュートリアルのようにしてアプリが作れるそうです。

Tutorial: Create a Node.js and React app in Visual Studio
https://docs.microsoft.com/ja-jp/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2019

引用返信 編集キー/

■95872 / inTopicNo.3)

　Re[2]: ASP.NETでReactのような見た目のUIを使うには

▲▼■

□投稿者/ simano (4回)-(2020/10/06(Tue) 11:08:46)

■No95870 (WebSurfer さん) に返信

教えていただき、ありがとうございます。

Webデザインの知識が少ないため、調べる時間ばかりがかかって焦っています。
デザインは、html,cssを揃えていくしかないのですね…。

例えば、下記のようなトグルボタンを作りたいのですが、その場合も、
Reactを使わずに、cssを用意するものなのでしょうか。

https://upmostly.com/tutorials/build-a-react-switch-toggle-component

Reactを使ったチュートリアルのリンクを教えていただき、ありがとうございます。
試しに、サンプルプログラムを動かしてみようと思います。

引用返信 編集キー/

■95873 / inTopicNo.4)

　Re[3]: ASP.NETでReactのような見た目のUIを使うには

▲▼■

□投稿者/ WebSurfer (2106回)-(2020/10/06(Tue) 12:32:03)

■No95872 (simano さん) に返信

> 例えば、下記のようなトグルボタンを作りたいのですが、その場合も、
> Reactを使わずに、cssを用意するものなのでしょうか。

元々は html のチェックボックス ( <input type="checkbox" ... /> ) に JavaScript を使って動的に
css を適用してそのような外観・操作性を実現していて、React のフレームワークに用意されている機
能 (css とスクリプト) を使えば、スクラッチで自力で書くより容易にそのようにできるということの
ようです。

なので、React を使わなければ、質問者さんが自力で css とスクリプトを書いて実現するということに
なると思います。

引用返信 編集キー/

■95874 / inTopicNo.5)

　Re[4]: ASP.NETでReactのような見た目のUIを使うには

▲▼■

□投稿者/ simano (5回)-(2020/10/06(Tue) 13:50:35)

■No95873 (WebSurfer さん) に返信

ご教示ありがとうございました。

実現したい外観と、Reactが用意している機能の関係がわからずに苦悶していたので、
おかげさまで少し前に進めそうです。

なかなか、自力でトグルボタンを作るのは難しそうです。
JQueryに同等のUIがないかなど、探してみたいと思います。

解決済み

引用返信 編集キー/

■95875 / inTopicNo.6)

　Re[5]: ASP.NETでReactのような見た目のUIを使うには

▲▼■

□投稿者/ 魔界の仮面弁士 (2855回)-(2020/10/06(Tue) 14:11:11)

2020/10/06(Tue) 14:23:33 編集(投稿者)

■No95874 (simano さん) に返信
> JQueryに同等のUIがないかなど、探してみたいと思います。

JQuery → jQuery

> なかなか、自力でトグルボタンを作るのは難しそうです。

CodeSells Toggle Switch
https://webkaru.net/jquery-plugin/toggle-switch/
http://codesells.com/ToggleSwitch

jQuery Toggle Candlesitck
https://github.com/EdouardTack/candlestick

自作するなら
https://qiita.com/deren2525/items/39d151e0cf31d1bd231c
https://webparts.cman.jp/button/onoff/

解決済み

引用返信 編集キー/

■95876 / inTopicNo.7)

　Re[6]: ASP.NETでReactのような見た目のUIを使うには

▲▼■

□投稿者/ simano (6回)-(2020/10/06(Tue) 14:24:43)

■No95875 (魔界の仮面弁士さん) に返信

サンプルを提示していただき、ありがとうございます。
また、jQueryのスペルミス、申し訳ありません。

実現したいUIは、jQueryで検索すると、かなり例がありそうですね。
cssは苦手意識があるのですが、判例を参考にして、何とか実装していきたいと思います。

解決済み

引用返信 編集キー/

トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

- Child Tree -