最近、以前勉強していたReactやnodejsを再勉強中。 そこである日、 npm installや npx create-react-appを実行したところ、 ERR! code ENOTSUP npm ERR! syscall symlink npm ERR! path ../mime/cli.js npm ERR! errno -95 npm ERR! ENOTSUP: operation not …

昔、React Routerでページ遷移に関してまとめました。 elsammit-beginnerblg.hatenablog.comelsammit-beginnerblg.hatenablog.comどうやらReact Routerがv5⇒v6に上がったことでページ遷移の方法が変わったようです。 今回はv6でのページ遷移についてまとめて…

先日Reactでポップアップメッセージを自作する方法をご紹介しました。 elsammit-beginnerblg.hatenablog.com今回はポップアップメッセージとメインページとのデータのやり取り方法に関してまとめておこうと思います。 ■前提 ■ポップアップメッセージからメイ…

今回はReactでポップアップメニューを自作する方法に関してまとめていきます。先日から活用しているモグラたたきアプリに関して、終了時に終了メッセージを表示させていたのですが、 当初alertを用いて実装していました。ただ、、 alert表示場所が中央に表示…

去年作成したモグラたたきゲームを使ってみたのですが、、 白熱するとクリックがドラッグ判定になってモグラが叩けないことが判明。そういえば、Reactでドラッグを無効にする方法を知らないな。と思い調べてみました！！ 今後困らないように備忘録として残し…

去年、Reactでいくつかアプリを作成してみました。 こちらのWebアプリケーションをtypescriptに置き換えることでtypescriptの勉強が行えないかと思いたち、 既存のReactで生成したコードをtypescriptに置き換えてみることにしました。今回は、typescriptに置…

約1年前、Reactでモグラたたきを作成しました。 elsammit-beginnerblg.hatenablog.com久しぶりにこちらのコードを見たのですが、、、 ちょっと汚い、、いやちょっとではない！！かなりだ！！ ということでコード修正・整理を行いました。コードを修正してい…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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