前回までのRedex管理まで出来たら、新規作成を作っていきたいと思います。 編集ファイル名 src/index.js thunkはstoreのdispatchメソッドを受け取り、Actionオブジェクトの代わりに渡された非同期関数処理が完了した後に、通常の同期処理をディスパッチするために利用します。 src/store/actions/index.js 新規作成のための定数宣言。 src/stor […]
3回目の続きとなります。まだ読んでいない方は是非どうぞ。 お互い「手」を出し合ったので、勝敗を決したいと思います。ジャンケンにおいての判定は1行のコードでできます。あとはその結果をJSPに渡すだけです。 下記は参考にしたジャンケンのアルゴリズムです。 簡単ですぐ終わりますので、早速参りましょう！！ JankenServlet.javaの編集 上記参考記事にて1行で判定を行い、JSP側に渡すためのコ […]
動作確認レベルの簡単な説明になります。触っていけば慣れますので初学者の方は是非参考にしてみて下さい。 下記記事での番外編となっています。まだ読んでない方は是非読んでみて下さい。 プログラムを書いて実行していると、完璧にコードを書いたつもりでも、イメージ通りに動かないことがあります。 デバッグを行うことで効率よくエラーを探すことができます。プログラムを実行して「あれ？？」と思ったらデバッグすることを […]
動作確認レベルの簡単な説明になります。触っていけば慣れますので初学者の方は是非参考にしてみて下さい。 下記記事での番外編となっています。まだ読んでない方は是非読んでみて下さい。 プログラムを書いて実行していると、完璧にコードを書いたつもりでも、イメージ通りに動かないことがあります。 デバッグを行うことで効率よくエラーを探すことができます。プログラムを実行して「あれ？？」と思ったらデバッグすることを […]
前回で表示まではできたと思いますので、このデータをReduxで管理して、表示させたいと思います。 編集ファイル名 src/store/reducers/projectReducer.js まずはアクションに従って、状態を更新するReducerを作成します。今回はデモデータを持たせて、このデータを一覧に表示させたいと思います。 src/store/reducers/rootReducer.js Re […]
2回目の続きとなります。まだ読んでいない方は是非どうぞ。 相手(PC)が出来上がったので、次はこちらからも手を出していきます。「グー」「チョキ」「パー」のリンクを作成し、そのリンクを選ぶことでPCと勝負できるようにします。 JavaScriptを使って、どのリンクが押されたか制御します。下記記事とほぼ同じことをしますが、こちらも参考として読んでみて下さい。 JavaScriptのメソッド作成 まず […]
前回で前準備をしました。 まずはローカルで動くよう作っていきたいと思います。※classNameはMaterializedを使用するための名前です。 編集ファイル名 src/components/layout/Navbar.js 共通のレイアウトのナビゲーションバーを作成します。 src/App.js こちらをsrc/App.jsから呼び出してあげます。 yarn startのコマンドで動いている […]
今回使用する技術・React・Redux・Firebase Firebaseの設定とReactプロジェクトの作成をしていきます。 Firabaseにてプロジェクトの作成 プロジェクトの作成方法は以下を参考にしてください。https://kazunaka.com/firebase-react-loginapp-1/ プロジェクトの名前を「bulletin-board」とします。アプリの名前を「bul […]
前回の続きとなります。 まだ読んでいない方は是非どうぞ。 本記事の手順としては、 ①JankenServlet.javaでランダムの手を生成する。②生成した手をJanken.jspへ受け渡し、表示する。 もう少し具体的にいうと、配列に手(グー、チョキ、パー)を定義し、次にランダムに数字を生成します。ランダムに生成した数字を、配列のindexに当て嵌め、PCの手として出力します。 言葉をずらずら書い […]
web上でデータを受け渡し、Javaを活用してジャンケンゲームを作成していきたいと思います。 まずはタイトル通り、プロジェクトから立ち上げていきます。初期ページの表示まで行いたいと思います。 環境はEclipsを使っています。Tomcatのバージョンは8.5です。 Tomcat？なんじゃそりゃと言う方のために、初期からいろいろなプラグイン が入ったパッケージ入りの「Eclipse Pleiades […]
ミリ秒を一個一個計算して、フォーマット変換していきます。 まずは実際のコードとその後に使う機能の紹介をします。 ファイル構成 今回は簡単なファイル構成です。(ファイル名は別名でももちろん大丈夫です。適当につけてあります。)フォーマットさえ作ってくれればいいので関数もMainの中に書いちゃいました。 流れとしてはreadMemo.txtにミリ秒一覧が書かれてあるので、それを読み込んで、フォーマット変 […]
前回記事の続編ということになります。まだみていないという方はどうぞ。 独り言を呟いても更新をかけてしまうと、今までボヤいていたことが消えてしまいます。それでもいいならそのままでもOKですが、せっかくなので、更新をかけても消えないように、データベースにボヤいたことを覚えててもらいましょう。 今回はFireBaseを使います。無料で使えますので、こちらより、プロジェクトを立ち上げ、apikey、aut […]
下記のようなチャット風アプリを作成したいと思います。 プロジェクト名は任せます。本記事では「chat-app」としています。 下記にてHellowWorldまで出力してください。できる人はそのまま進んでください。 HellowWorldまで表示できましたら、早速作っていきましょう！！ TweetIndex.jsの編集 でsrc直下にファイルを作成します。下記書いていきましょう。 App.jsの編集 […]
①Firebaseの設定②Reactプロジェクト作成③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)＆ユーザ削除 ← 今ここ 前回の③認証のためのユーザ登録の実装からの続きをしていきます。ユーザが登録できたと思うので、いよいよログインの実装をしていきます。 ファイルを編集 src/auth/AuthProvider.js ２個所追加場所があります。コメントにて記入してあります […]
①Firebaseの設定②Reactプロジェクト作成③認証のためのユーザ登録の実装 ← 今ここ④認証(ログイン・ログアウト)＆ユーザ削除 前回の②Reactプロジェクト作成からの続きをしていきます。 認証に必要なユーザの登録のための実装をしていきます。 ファイルを編集 src/auth/AuthProvider.js src/auth/SignUp.jsx src/App.js アプリを […]
①Firebaseの設定②Reactプロジェクト作成 ← 今ここ③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)＆ユーザ削除 前回の①Firebaseの設定からの続きをしていきたいと思います。 こちらではReactのプロジェクトの作成＆前準備をしていきます。 Reactプロジェクト作成 コマンド(ターミナル)での操作をしていきます。 任意のディレクトリに移動して、プロジェクトを作成しま […]
FirebaseとReactを使って簡単な認証機能を作っていきたいと思います。 Firebase初心者やReact初心者向きの記事になります。①〜④のような流れで行っていきたいと思います。 ①Firebaseの設定 ← 今ここ②Reactプロジェクト作成③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)＆ユーザ削除 それではやっていきましょう！ Firebaseでプロジェクトを作成 Fi […]
機能的にはメモは完成しましたが、このメモにはまだ致命的な弱点があります。ブラウザを更新したら追加したメモを「忘れる」ということです。余裕のある方は+αで「メモを忘れない」機能を追加しましょう。下記の記事からの続きになります。https://kazunaka.com/react-redux-memoapp-seven/ 「redux-persist」というのを使用します。簡単に説明すると、redux […]
プロジェクトの作成 コマンドでプロジェクトを作成しましょう。ディレクトリを移動して、以下を実行してプロジェクトを作成します。 「Success!」が表示されたらプロジェクトができていると思うので、コマンド操作で作成したプロジェクトへ移動しましょう。 パッケージを使用するためのコマンドをたたきます。※ない場合はnpmにてインストールしてください。 ファイル構成 src以下のようなファイル構成になりま […]
React + Reduxを使ってメモアプリを作成していきます。 前準備・表示・新規作成・一覧表示・一件取得・一件更新・一件削除・情報保持・完成版という順でやっていきます。 部分部分でコードを書いてありますが、分からなくなったら完成版を見てもらえればと思います。 では、前準備からやっていきましょう。 前準備 表示 新規作成 一覧表示 一件取得 一件更新 一件削除 情報保持 完成版
