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

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

MENU

React

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 今回は後回しにした画面遷移についてまとめたいと思います!!React.js & Next.js超入門新品価格¥2,673から(2020/10/4 22:52時点) ■画面遷移環境構築 ■画面…

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

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

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

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

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

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

React chatbotアプリ作成

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

React サーバサイドとの通信

前回書いたSPAを実際に動かしてみるための前段階として、 サーバサイドとの通信をしてみたいと思い試しに動かしてみたところ躓いたため備忘録で残そうと思います!! elsammit-beginnerblg.hatenablog.com まずReactでget、postリクエストを行うためにはaxio…

アロー関数とは?

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を用いて何となく作っていた部分を、フレームワークを使ってきれいに作りたいな!!と 思い、まずはフロントエンドのフレームワークを学習することにしました!…