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

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

MENU

React

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 簡単なゲーム作成

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

React 夕食の献立ルーレットアプリ

先日公開したモグラたたきゲームを使っていた友人から、 夕飯考えるのが面倒だから何か提案してくれる系アプリ作れない? と相談を受けました。 そこで今回は夕食を提案してくれるアプリとして、夕食の献立提案アプリ(ルーレットアプリ)を作ってみました!!…

githubでReact作成したWebアプリ・Webサービス公開

最近簡単なアプリを作成してそれをブログで報告してきましたが、 とある友人より、 面白そうだから使って見たいな!! という、酔狂なことを言われました。 はてなブログだとソースコードは載せられても実際にWebアプリは動かせないもんな、、、 と思いつつ…

React chatbotアプリ作成

Reactで面白そうなアプリ作れないかな??と思い考えていたのですが、、、Chatbotとか作れたら面白そうだな!!と思いたち早速作成することにしました。 React Chatbotで調べてみたところ、 react-simple-chatbot というライブラリを用いると簡単に作れそう…

React サーバサイドとの通信

前回書いたSPAを実際に動かしてみるための前段階として、 サーバサイドとの通信をしてみたいと思い試しに動かしてみたところ躓いたため備忘録で残そうと思います!! elsammit-beginnerblg.hatenablog.com (adsbygoogle = window.adsbygoogle || []).push({}…

アロー関数とは?

Reactを使っているとアロー関数を結構多用します。 このアロー関数の書き方がjavascript独特の書き方なので、特徴や使い方、利点とかを調べてまとめてみようと思います!!目次 ■アロー関数とは ■アロー関数の特徴 ■Reactでアロー関数を用いる理由 ■最後に ■…

Reactでモグラたたきゲーム

React勉強中!!今回はモグラたたきゲームです!! 少しずつ作りたいものを手早く作れるようになってきた。慣れてきた証!! 成果物を動かすとこんな感じです。 ソースコードはこちらに格納。 GitHub - Elsammit/Moguratataki 今回肝となる部分は定期的にも…

Reactで〇×ゲーム

今回はReactで〇×ゲームを作ってみました!! だんだん慣れてきて、自分の思ったように作れるようになってきました!! 出来たものはこちらになります。 シンプルだけどきれいにできたかな?と自画自賛w。 今回、3×3の枠ごとにonClickイベントを用意している…

Reactで計算機アプリ

前回、Reactでtodoアプリを釈経しました。 elsammit-beginnerblg.hatenablog.com今回は前回学んだことを活かして自分で作ってみましたので、その報告!!何を作ろうか悩んだのですが、数値計算は初級みたいなところがあるので、 計算機アプリ を作ってみるこ…

reactでtodoアプリ作成

以前構築した環境でreactの勉強中!! elsammit-beginnerblg.hatenablog.com 今回下記サイトを大いに参考してtodoアプリを作成しました。 webkikaku.co.jp このサイトで公開しているtodoアプリではこの通り、実施予定の項目が追加できるようになっておりまし…

React 環境構築

今回はReactの環境構築です。 Reactを学習していくにあたり、まずは環境構築が必要だったので実施!! 環境構築って1度やったら滅多にやらない作業で忘れてしまいがちなので、あとから見返せるように備忘録を残しておきたいと思います。 今回はFacebookが提…

フロントエンドフレームワーク ReactにするかVueにするか

本格的にフロントエンド開発を学びたいな!!と思っている今日この頃。 今までHTMLやjavaascriptを用いて何となく作っていた部分を、フレームワークを使ってきれいに作りたいな!!と 思い、まずはフロントエンドのフレームワークを学習することにしました!…