最近 MERN Stack と呼ばれる技術スタックをを学んだ。 ( MERN: MongoDB, Express, React, Node ) せっかく学んだので MERN な構成で Trello っぽいのをつくってみる。 段階的に作っていく。 ① ToDoItem の CRUD ② ユーザの認証 ③ Category の CRUD ④ ToDoItem を Draggable にする ⑤ Board の CRUD ⑥ ユーザの Board への招待 開発ログ ① ToDoItem の CRUD 2021/06/15 MERN のそれぞれはある程度わかったけど Express と React をどうつなげるのかよくわかってない。 とりあえずそれぞれで ToDoItem の操作をできるようにして、つなげ方ググりながら進めていこうと思う。 ちなみに ToDoItem は ToDo の一個一個を想定してる。 Express 側の Item の GET と POST はできるようになった。 https://github.com/RyuGotoo/trello-clone/commit/0083aac0f508d438e188ce354af5f5865f9eb91f ちょっとルーティングの書き方で詰まったけど、いい感じ！ 次は React 側の Get と Post を書いていく。 2021/06/16 React 側の GET と POST できた！ client と server をつなぐのに苦戦した。 勉強した教材に繋ぎ方までは入ってなかったんだよね。 MERN それぞれを勉強するって感じの教材だった。 でも、なんとかできた！ axios いいね。 フロントエンドは最近勉強し始めたばかりだから新しいことたくさんあって楽しい。 次は Item の UPDATE と DELETE を実装していく。 DELETE はできたけど UPDATE に苦戦中。 別ページに遷移してそこで編集するんじゃなくて、Trello みたいにテキストをクリックしたら編集が開始されるようにしたい。 contenteditable 属性をつければいけると思ってたけど、なんか動かなかった。 なんかそれようのライブラリが必要なのかな。 今回使う予定の技術スタック MERN Stack (MongoDB, Express, React, Node) mongoose MongoDB Atlas Material UI やりたいけど今はやらない技術スタックもある。 Redux, Testing, CI/CD とか。 これらはまだ良くわかってなくて別途勉強が必要で、今後勉強する予定ではあるけど、今はやらないでおこうと思ってる。 とりあえず学んだことだけでなんか作ってみるのが必要な時期だと個人的に思ってる。 勉強は楽しいけどずっとやってても自分ではなにも生み出せないから、下手でも作ってみるのがいい気がしてる。 伏黒も下手な領域展開してたけど、あんな感じ。 ああいうのが結局成長にはいいんじゃないかなって思ってる。 だから、今回は Redux とか使ってないけど、勉強した知識を総動員してひとつアプリを作ってみる。

最近 MERN Stack と呼ばれる技術スタックをを学んだ。 ( MERN: MongoDB, Express, React, Node ) せっかく学んだので MERN な構成で Trello っぽいのをつくってみる。 段階的に作っていく。 ① ToDoItem の CRUD ② ユーザの認証 ③ Category の CRUD ④ ToDoItem を Draggable にする ⑤ Board の CRUD ⑥ ユーザの Board への招待 開発ログ ① ToDoItem の CRUD 2021/06/15 ~ MERN のそれぞれはある程度わかったけど Express と React をどうつなげるのかよくわかってない。 とりあえずそれぞれで ToDoItem の操作をできるようにして、つなげ方ググりながら進めていこうと思う。 ちなみに ToDoItem は ToDo の一個一個を想定してる。 Express 側の Item の GET と POST はできるようになった。 https://github.com/RyuGotoo/trello-clone/commit/0083aac0f508d438e188ce354af5f5865f9eb91f ちょっとルーティングの書き方で詰まったけど、いい感じ！ 次は React 側の Get と Post を書いていく。 今回使う予定の技術スタック MERN Stack (MongoDB, Express, React, Node) mongoose MongoDB Atlas Material UI やりたいけど今はやらない技術スタックもある。 Redux, Testing, CI/CD とか。 これらはまだ良くわかってなくて別途勉強が必要で、今後勉強する予定ではあるけど、今はやらないでおこうと思ってる。 とりあえず学んだことだけでなんか作ってみるのが必要な時期だと個人的に思ってる。 勉強は楽しいけどずっとやってても自分ではなにも生み出せないから、下手でも作ってみるのがいい気がしてる。 伏黒も下手な領域展開してたけど、あんな感じ。 ああいうのが結局成長にはいいんじゃないかなって思ってる。 だから、今回は Redux とか使ってないけど、勉強した知識を総動員してひとつアプリを作ってみる。

前提 ReactNativeにて、Unable to resolve module path from ...(native層のファイル)というエラーが出た。 . ├── api_dir │ ├── fuga │ └── fugafuga └── native_dir ├── hoge └── hogehoge エラーになる理由 ReactNativeはNode.jsが元々提供している"path"モジュールを使用することができない。 native層以外であれば、Node.jsが提供している"path"を直接使用することが可能なため、 npm installすることなく、const path = require('path');を記述するだけで使用が可能。 native層の場合は、npmのパッケージをinstallする必要がある。 $ npm install --save path package.json "path": "^0.12.7", hoge.js const path = require('path'); Node.jsはJavaScriptそのものでなく、あくまでNode.jsという認識が大切でした・・・ 参考

はじめに AWSLambdaのNodejsでAPIGateway経由でevent.bodyを取得しようとした際にundefinedになりハマったので、メモ exports.handler = async (event, context) => { // event.bodyがundefinedになる JSON.parse(event.body).hoge } 解決した方法 以下のように先にif文で確認してからだとundefinedにならない。 exports.handler = async (event, context) => { if (event.body) { JSON.parse(event.body).hoge } } 終わりに 上記の方法で問題は解決できたが、なぜundefinedになるのかがよくわからない。

課題 Node.jsのMySQLライブラリで INSERTした後のレスポンスにレコードの情報が返却されるのかと思っていたら そうでは無かったので、調べました。 テーブル情報 テーブル名 table_name カラム情報 id:Auto increments age:Int 解決方法 const [result] = await mysql.execute( `INSERT INTO table_name age VALUES 26`,[]); const [rows] = await mysql.execute( `SELECT * FROM table_name WHERE id = ${result.insertId};`,[]); console.log(rows[0]); 解説 INSERTのSQLのレスポンス値にinsertIdという項目があり、 これがテーブルのidの値が返ってくるようだったので、 それを使用してSELECTしている。