konchangakita

KPSを一番楽しんでいたブログ 会社の看板を背負いません 転載はご自由にどうぞ

React

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 Layout を作る

SSR で Fetch して表示するデータはそろってきましたここでページ移動しても共通で表示させる「ナビゲーションバー」を Layout コンポーネントを作ってみます【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 ・ログインページをデザイン ・フォ…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 SSR で Fetch する

Fetch で得た レスポンスデータ を使ってページ遷移までを行いました 次に、ページ遷移した後に表示するデータをバックエンド(Flask、Elasticsearch)から取得して サーバサイドレンダリング(SSR)を行います 【Nutanix UUIDエクスプローラーを作ってみよ…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 FetchからRouterでページ遷移

前回はとりあえず fetch してレスポンスを確認しただけだったので、フォーム入力されたデータを使って、ページ遷移します下記エントリで Native React で Fetch を作り込んだ「/api/connect」、「/api/latestdataset」からデータひっぱってきたいと思います …

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 とりあえずFetchする

フォームで受け取ったデータ(Prism IP、ユーザ名、パスワード)を使ってバックエンドにリクエスト行い、レスポンスを取得する Fetch を実装します ※SSR(サーバサイドレンダリング)までは実装は次でNext.jsの実装とともに、フロントエンドとバックエンドの…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 フォームの実装

Nutanixクラスタに接続するための「Prism IP」、「ユーザ名」、「パスワード」フォーム入力の制御には、通常入力を必須にしたり、エラーメッセージの実装を作り込む必要があります そうすると、フォームごとになかなかコードが増えてくし、なによりそれぞれ…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 ログインページをデザイン

Native React の環境では、一つのページ(URL)の中でNutanixクラスタへ接続、検索、結果表示を行う、SPA(シングルページアプリケーション)でのカタチで作ってました今回はなんとなく、それぞれ別にページを作っていきます 【Nutanix UUIDエクスプローラー…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js環境に tailwindcss/ DaisyUI/ Font Awesomeを導入

tailwindcss.com daisyui.com fontawesome.com 今回はNext.js環境に、デザインを意識したコンポーネント群を導入、初心者なのでとりあえずフレームワークを満載にして、フロントエンド開発環境をパワーアップさせてみます 今回の成果物 今回の最終形態はコチ…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js で 導入

React を CDN でぼちぼちJavaScriptしてきましたが、ここからフロントエンド部分を独立させ大きく開発環境を進化させます フロントエンドのコンテナを別に作り、Reactベースのフロントエンドフレームワークの Next.js を導入していきます 今回の成果物 今回…

【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - filter編

前回まで、CDNを使い fetchして取得したデータで state を更新して、表示というところまでを実装してきました データ表示部分にリアルタイムでフィルタする動作を付け加えてみます ようやく JavaScript 触ってるっぽい感じに 【Nutanix UUIDエクスプローラー…

【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - fetch編

fetchって言葉は今回実際使ってみるまで、知らなかったのですが(Web初心者丸だし。。。)、Webページ上からFormなどから httpリクエストしてデータをひっぱってくるやつです 【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ ・Flask表示までのまと…

【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - state編

ようやくここから JavaScript っぽいことをはじめていきます(JavaScriptよくわからないまま)【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ ・Flask表示までのまとめ ・React で JavaScript へ挑戦 - CDN導入編 ・React で JavaScript へ挑戦 - …

【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - CDN導入編

Flask の render template 機能で、Webページ表示というところまで作ってみました 次は、Webページの中身を JavaScript を使って表示というのにチャレンジです ちな JavaScript は全くの初心者ですJavaScript の2大フレームワークとして、React と Vue とい…