React/Reduxを理解するために簡単なサンプルアプリを作ってみる

Reactを使って何かアプリケーションを作ってみよう!そう思って勉強していると、最初はよくわからなかったreactもなんとなく分かってきますよね。そして、次にやってみようと思うのがreduxを使ったアプリケーションの作成。 まあ、React少しは分かってきたしReduxもいけるっしょ!と思いつつ資料を漁ってみると思う事がある。



Redux全然わからねえ・・・

Reactを初めて見たときも圧倒的分からなさだった気がするけど、Reduxを使って実装されたコードを見てみるとそれが何をやっているのかマジで分からん。これはやべえ。。

自分もReactでなんとなくアプリケーションを作って、Reduxやってみようかなあ、、と思って見てみたところ果てしなくわからない。。。今回は、Reduxをちょっとでも分かるようになれるように簡単なものを作って頑張って理解したい。

かなり長くなってしまったけど、まあいってみよう。徐々にReduxのコードにしていくので、ちょっと回りくどいかも。

続きを読む

DynamoDBにGOで読み取り・書き込みを行う

dynamoDBにアクセスするためのユーザーを作成する

dynamoDBにアクセスする際に、awsのシークレットキー等が必要になってきます。これらを取得するために、IAMでDynamoDBにアクセスすることができる権限を持ったユーザーを作成して、シークレットキー等を取得します。

続きを読む

ReactとFirebaseで作ったチャットアプリ開発メモ

Reactでチャットアプリケーションを作ったので、その際に調べたことをちょっとメモ。 ちなみに作ったのはこれだから、試してみるのもありでしょう。

Twichat

どう作ったのかはこの記事に書いてあります。

hydro-pump.hatenablog.com

続きを読む

Firebaseで運用するReactアプリケーションに環境変数を適用する方法

ReactとFirebaseを使っていて、firebaseを初期化する際に使うapi_key等を.envで管理したくなったのでメモ。 reactのプロジェクトはcreate-react-appではなく、webpack.config.jsを設定して作ったもの。

続きを読む

Firebaseを使って、ReactでTwitterのログイン認証を行う

Firebaseはかなり便利ですよね。以前swiftでチャット画面を作ったような気がするけど割と簡単にできた気がします。今回はReactを使ってTwitterのログイン認証をしようと思います。

続きを読む

Processingで画像を加工することもできるぞ!

Processingは、四角形や三角形や線、幾何学模様などを作って何かを表現するというイメージが強いけど、画像を加工して動画のようにすることもできるんです。画像を読み込んでコードを書いていくことが可能なんですね。

ちょっとだけ紹介します。

続きを読む

【React】react-transition-groupを使ってCSSのアニメーションを実装する

f:id:utr066:20180811223617j:plain

reactを使ってアニメーションをさせたいなんて時もあるのではないでしょうか。日本語のものがそこまでないのがちょっと残念ですが、それでも探してみればライブラリは色々あります。

今回は、react-transition-groupというものを使ってCSSのアニメーションを実装していきたいと思う。

続きを読む