見出し画像
Photo by nyakopan

エンジニア転職！模擬案件　～axios, Piniaに悩まされる～

まさ@冒険家

未経験からエンジニア転職を目指し奮闘中です。

ITスクールでの模擬案件（アパレルのショッピングサイト制作)を通じての成長や奮闘を振り返るシリーズ！今回は開発中に悩まされたaxios, Piniaをどう乗り越えてきたかを伝えます♪

axios, Piniaとは、苦労したこと、やってみて気づいたデータベースの形！最後に助けられたのは、仲間の存在！チームメンバー自身の経験をもとにしたひと言で、解決に至りました。なので、チームワークは必須です！

これから、未経験でエンジニアを目指す方、今ITスクールで学んでいる方に、僕の経験が参考になればと思います。

前回の記事はこちらをご覧ください

１．axiosとは

Axiosは、JavaScriptを使ってHTTPリクエストを行うためのライブラリです。Axiosはシンプルで直感的なAPIを提供しており、初心者でも扱いやすく感じます。
例えば、データベースやサーバーから、特定のデータを取りだしたり、追加したりするのに使用します。今回の模擬案件では、会員情報、商品情報、お気に入り登録商品情報などの読み書きに使用しました。

具体的には以下のリクエストが可能です。
・axios.get: GETリクエスト。データの取得
・axios.post: POSTリクエスト。データの追加
・axios.delete: DELETEリクエスト。データの削除。

２．目的のデータを削除できない　axiosの壁に挑む

axiosのリクエストはとても直感的にわかりやすい。しかしながら、目的のデータの指定方法で本当に苦労しました。

例えば、以下のような商品をデータベースから削除することを考えます。user_id: 201の方がお気に入り登録したproduct_id: 0113の商品をお気に入りから削除します。

FavoriteList  
{
    "id": 14,
    "user_id: 201,
    "product_id": "0113",
    "updated_at": "2023-02-16T03:00:00.000Z",
    "deleted_at": "2023-02-18T03:00:00.000Z"
  }

◆方針
user_idに一致するお気に入りリストを取得
→その中でproduct_idが一致するデータを検索
→該当するデータのproduct_idをaxios.deleteで削除リクエスト

◆問題発生
このプロセスでやっても、削除対象が見つからない。console.logで見ても、対象品商品の情報が取得できていませんでした。

Slackで問いかけた時に、メンバーの一人が経験を共有してくれました。
「idで指定しないと動作しない！！！ここではid: 14。 product_id, user_idでDELETEリクエストしてもNG」

本当にチームで開発していて助かりました。1日試行錯誤していたので、解決した時は、涙が出るほど嬉しかったです。

３．操作しやすいデータベース設計に気づいた

axiosを使用して、データベースにアクセスする機会が増えたことで、扱いやすいデータベースの設計に気づきました。できる限り、文字列を数値にすること！

例えば、商品名、色、サイズなどキリがありませんが、数値で置き換えるととにかく楽です。
IDなどの数値で指定することで、検索しやすくなります。結果として、コードの記述がシンプルになります。

今までユーザー目線でしか見ていませんでしたが、開発する側から見ると、商品名( shirts A)よりも商品コード(1004)を割り当てた方が扱いやすいと気づけました。

開発で扱いやすいデータべースの特徴は
できる限り文字列を数値データに変換すること

４．状態管理Pinia登場

模擬案件の開発において、新たに登場したのがPinia。状態管理のために使用するVue.jsのライブラリです。

主に以下の状態管理で活用しました。
・ユーザーのログイン状態
・カートの状態
・お気に入り登録状態

５．Piniaの使い方は手探りで

苦労したポイント2つ目は状態管理Piniaの活用です。模擬案件の開発で初めて触ることになり、あらゆるブログや、公式サイトを見て手探りで開発を進めることに。Vue.jsも慣れていないなかで、さらにPiniaの使い方もマスターするのは本当に苦労しました。

Storeを作成したが、呼び出し方がわからない。記述方法は？
課題は山積みでしたが、公式サイト、AIを活用して何とか乗り切りました。
ここでも、役立ったのは、チームメンバーの存在。GitHubから、既にレビューが終わった人のコードを見よう見まねで、動作を理解していきました。

おかげで、何とかPiniaも使いこなし、模擬案件は乗り切りました。

Piniaの動作が理解できると
パズルのピースがはまるように開発が進んだ

６．さいごに

模擬案件を通じて、データベースにアクセスするaxios、状態管理ライブラリPiniaの扱いに苦労しました。何度も悩まされた結果、最後に救われたのはチームメンバーのひと言です。
他にも、axiosを通じて、扱いやすいデータベースの型も理解できました。

一旦模擬案件は終了しましたが、実際の開発現場ではさらに課題が予想されます。試行錯誤する回数、チームメンバーの力をうまく生かして、これからもエンジニア転職に挑戦していきます！！！
未経験からエンジニア転職を考える方の参考になればと思います。

今日はこの辺で。
ありがとうございます。

れまでのシリーズもぜひご覧ください↓


いいなと思ったら応援しよう！