Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

React

reactでのpost request実施方法

react nesでchatbotを作成してみました。 elsammit-beginnerblg.hatenablog.com今回はこちらのchatbotを用いて会社名を聞くと会社名に対する利益や住所の情報が返ってくるアプリを作ってみました。 その際に、会社情報を収集するためのサーバを構築の上、pos…

React nesを用いたchatbot的なアプリ 作成

先日お話ししたchatbotアプリが少し形になったので報告!! 作成できたのは、前回ご紹介したchatbotで作成したログイン画面のみですが elsammit-beginnerblg.hatenablog.com ■作成したアプリのご紹介 ■stateの配列追加 ■最後に (adsbygoogle = window.adsbyg…

setStateの非同期処理

先日ご紹介したReact nesを用いてチャットボット的なものを作成中!! elsammit-beginnerblg.hatenablog.comそこで、ReactのsetStateに対する非同期処理に躓いたので備忘録として残しておきたいと思います。 ■setStateは非同期処理 ■対処方法 ■補足 ■最後に …

Reactでnes cssを利用してみる

最近Webアプリのレイアウトについて勉強中!!そこで、こちらのような記事を見つけました。 gigazine.netReactでも試してみたいな!!と思いたち調べてみました。 こちらをまとめてみたいと思います。 ■まず始めに ■Reactでnes cssを使用するための事前準備 …

reactでのWeb動画再生playerアプリ

今回はReactで動画再生プレイヤーアプリの作成方法についてまとめておきたいと思います!!動画再生Playerは、こちらのように動画の再生や停止、切り替えが行えるものです。 こちらのようなアプリ(サイトに近いかもしれませんが)を作成していきます。 ■事前…

React 画面遷移用スクリプト作成

以前Reactの画面遷移方法についてまとめました。 elsammit-beginnerblg.hatenablog.com ただ、画面遷移用にファイルを複数作成したりコード書くのが結構手間だったりするんですよね。 だからって別ファイルを持ってくると余計なコードを削除したりしなければ…

おみくじアプリ作ってみた

今年も残すところ後1日になりました。 今年はありがとうございました!!来年もよろしくお願いいたします!!今年はコロナに振り回された1年でした。。。 来年は終息し、平穏な一年になることを切に願います!!一足早いですが、おみくじアプリを作成しまし…

Reactでバトル画面を作成

前回マップ画面の作成とキャラクターの操作を実施してみました。 elsammit-beginnerblg.hatenablog.com今回はバトル画面の作成を行ってみましたので、その報告です!! ※技術の備忘録は少なめ(というかほとんどない)です。 ■環境 ■完成結果 ■コード紹介 ■最…

ReactでRPGマップ作成

年末年始のお休みに入り、少し時間が出来ました。 何かReactでアプリを作りたいな?と思い、ちょっとしたRPG作成してみようかな?と思い手を動かしてみました!!基本的にjavascriptでのRPGアプリ作成についてはこちらのサイトに掲載されていたので、流用さ…

Reactでのマウス操作で画像位置変更

前回クリスマスを理由に雪を降らせたWebアプリを作成しました。 elsammit-beginnerblg.hatenablog.comこちらのWebアプリに表示させていた画像位置を簡単に変更させたいな!! 出来れば、マウス操作で位置変更できると便利そうだな!! と思い、マウス操作で…

Reactで雪を降らせてみる

メリークリスマス!! ただ残念なことに、 コロナウィルスの第3波が来てしまって、遊びに行くことも憚られる状態ですねせっかくのクリスマスなのに、、、 例年ならイルミネーションとかきれいなはずなのにということで、クリスマスっぽいWebアプリを作ってみ…

Reactでアニメーション付きリストを表示

今まで作成したアプリやコードの整理真っただ中!! 今年中に終わるかな?そこで、以前作成したポートフォリオ(なのか)??を整理しつつ少しレイアウトを変更したので、 そこで使用したアニメーション付きリストについてまとめていきたいと思います!! ■事…

React 動くsin、cosカーブ作成

今回はReactでsinやcosカーブを動かしてみたいと思います!! ■環境 ■sinカーブの表示 ■実際に動かしてみる ■sinカーブとcosカーブを合わせて表示 ■最後に (adsbygoogle = window.adsbygoogle || []).push({}); ■環境 例のごとくこちらを利用 ・Ubuntu16.04(…

React metaタグの変更

github pageにて作成したアプリを公開しているのですが、、、 metaタグを変更しておりませんでした。。。 やってしまいましたアプリ作成にあたって基本は抑えておけという話です。 反省 基本から勉強しなおした方がいいんでしょうか??1冊ですべて身につくH…

単語帳アプリ改造してみました

前回、英単語アプリを作成してみました!! elsammit-beginnerblg.hatenablog.com ただこのアプリ、表に英語、裏に日本語が書かれていてクリックしたら回転するだけでした まぁこれでも単語カードとして使用することが出来そうですが、、、 ちょっと寂しいで…

英単語帳アプリ作ってみました

ちょっと英語も勉強して行かなきゃなと思う今日この頃。速読速聴・英単語 Core1900 ver.5 (速読速聴・英単語シリーズ)新品価格¥2,090から(2020/10/24 22:02時点)だけど、、、ただ勉強するのもな。。。と思ったので、、、 今回勉強も兼ねてReactで英単語アプ…

React Routerで作成したホームページをgithub pagesで表示

前回、React Routerで作成したホームページがgithub pagesで表示されない現象が発生しました elsammit-beginnerblg.hatenablog.com。。。が解決しました!! 今回はReact Routerを用いたホームぺージをgithub pagesで表示する方法のついてまとめます!!Reac…

ポートフォリオ作成中!!

前回、作成してきたアプリを一つにまとめるホームページを作成しました!! elsammit-beginnerblg.hatenablog.com 1冊ですべて身につくHTML & CSSとWebデザイン入門講座新品価格¥2,237から(2020/10/20 23:07時点) ちょっと1ページだと寂しいなと思ったので…

今まで作ったアプリを集めたホームページ作成

今まで作成したゲームやアプリを整理したいのと、一覧で紹介したいな、と思い立ち、 紹介ページを作成してみました!! ※今回は技術紹介ではないのです。 作成はReactで行いました!! 作成したホームページはこんな感じ。 ASPではないですし、レイアウトが…

React 画面遷移方法

前回の記事にてReactでの画面遷移方法は後回しにしました。 elsammit-beginnerblg.hatenablog.com 今回は後回しにした画面遷移についてまとめたいと思います!! ■画面遷移環境構築 ■画面遷移方法 ■最後に (adsbygoogle = window.adsbygoogle || []).push({}…

ReactでGoogleトレンドを挿入してみる

今回はReactにてページにGoogleトレンドを挿入方法についてまとめたいと思います!! 単純には、Googleトレンド自体をページ内に表示すればそれで済む気もしますが、カスタマイズ性は自分で作ったほうが高いので挑戦しました!! ■Googleトレンドとは? ■Rea…

React マウスホイールで画像拡大・縮小

今回はReactにてマウスホイールを動かすと画像拡大・縮小すようにしてみたいと思います。 完成イメージはこんな感じ。 機能としては、 ・画像上でマウスホイールにより拡大・縮小が行える ・画像上でマウスを動かすと画像が領域内で動く です。 ■マウスホイ…

React for文に対する非同期処理

最近忙しいことを理由にブログ更新ができていませんでした。。。 前回まで実施していたポケモンチャート表示。完成しました!! 完成したWebアプリはこちらになります。 https://elsammit.github.io/PokeChart/. このポケモンチャートですが、ちょっと冗長だ…

React レーダーチャート表示

引き続きポケモンレーダーチャートをReactに移行中!! elsammit-beginnerblg.hatenablog.com 前回、内部で持っているcsvファイルを読み出せないと書きましたが、、、 解決しました!!って言っても、フォルダのパスが違っていた。。。orz それで数時間つぶ…

Reactでのcsvからjsonデータ化

今年の夏はコロナウィルスの影響で実家帰省がなくなってしまいました泣。。。 仕方ないですね。。。 で、急遽時間ができましたので以前作成したポケモンレーダーチャートをReactに移行させようかな? と思い立ち、作業を実施しました。 、、、が 結構大変で…

React・node.js連携

前回、Reactでサーバサイドとの通信方法をまとめました。 elsammit-beginnerblg.hatenablog.com だけど疑問だったことが1つあり調べておりました。Reactとnode.jsなどのサーバサイドを同時に実行する方法です。 Reactは、 yarn startを実行する必要がありま…

React 音声出力方法

今までワニたたきゲームを作ってきたわけですが、 elsammit-beginnerblg.hatenablog.com 完成したアプリが何か物足りない。。。なぜだろう?? 昔遊んだ某ゲームを思い出してみたところ、、、 音声がないんだ!! 音声がないからなんかタッチしててもなんか…

React ワニたたき作成 ~part2~

やっと、ワニたたきがまともに動く形になりました!! PC版しか対応できていないけど、、、 アプリ作成時に非同期処理についてちょっと詰まってしまったため合わせて書いておきたいと思います!! ■アプリ紹介 ■アロー関数を用いた非同期処理 ■最後に ■アプ…

React ワニワニたたき作成 ~part1~

昨日Reactで画像を動かす方法を学び、簡単なゲームを作成しました。 elsammit-beginnerblg.hatenablog.com そして、学んだ方法をもとに、作成を進めていき、、、 ワニワニたたきの原型が作成できました!! ※ワニワニパニックって商標登録しているかと思うの…

React 簡単なゲーム作成

またまたゲームを作ってみました!! 当初、モグラたたきに続いてワニワニパニック的なアプリを作ろうと思っていたのですが、、、 アニメーションを付けたことがない!!だから簡単には作れない。。。どうやってやればよいのだろう??泣 ということで、まず…