バックエンド

【Webアプリ実践記】JSすら怪しい37歳おっさんが独学でVue.js+Laravelでwebアプリ構築するまでの道のり

本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる100日プログラミング記録です。

アオキ
やったるでー
Sponsored link

ツイッターで、 #100DaysOfCode というハッシュタグがある事を知り、

どうやら100日と期限を決めてプログラミングをやろうという企画のようで、それに賛同し、

100日間でどこまで進めるか実験的に記録していく事にしました。

しっかり完成する保障はどこにもございません。

完成するまできっと100つ以上の壁があると思うけど、どうにか(ググりまくって)乗り越えていこうと思います。

※当初はDjangoで構築予定でしたが諸事情あり 20日目頃よりLaravelに切り替えました。

事前知識:Laravelで簡単なシステム構築経験あり。
MVCモデル、ルーティング、SQL、Git初心者レベル。

やろうとしている事

  • とある業界のWeb予約アプリ(システム)
  • 予約する側→予約画面と会員ページ
  • 管理側→一般の設定画面と、管理者専用の管理用画面
  • ログイン後ユーザー毎の情報が表示されるようにしたい

Sponsored link

0日目 0/100

とある業界のWeb予約システムを作る事に決めまして、ググりまくって、Nuxt.js+Djnagoでいこうと決めました。

  • フロント側(Nuxt.js v2.0.0)
  • サーバー側(Django)

  • 採用理由

フロント側:

  • React / AngularJS / Vueの三択で、Vueが後発で学習コストも低いという事で採用。
  • 大規模でVueやるならVuexを取り入れたほうがいいらしい(バケツリレー回避)。
  • 今からやるならVuexもまるっと含まれているNuxt.jsがいいという意見に流されて採用。
  • CSSライブラリはvuerifyかBuefyかなぁ。

サーバー側:

  • 後々大規模なデータ量になり、計算が必要になると想定し、計算ライブラリ豊富なPython一択。
  • RoRは未経験。Laravelも選択肢には入りつつ ライブラリ的+読みやすさで今回はPythonでいくことに。

テスト用サーバーはHeroku。

関連記事

  • 公開サーバー/データベース は今の所不明(社内サーバーかクラウドかもわかりません。)

1日目 1/100 2018年10月10日(水)

とあるWeb予約システムをつくることにしたので個人的な記録とっていきます。ちょい前からやってたけどキリいいので今日から。 Vuexの仕様確認、Store内にaction, state, mutations, getterなど追加してテンプレートから呼び出し。忘れそうなので図解しておく

図解はまだノートにメモ段階です。

覚えた事 Vuexの仕様(ぼんやり)

State, Actions, Mutations,があって、Storeに記載するよう。

  • Storeの書き換えはMutationsのみだけど、非同期はNG
  • Actionsなら非同期でいけるので、Actionsの中にMutationsを入れてStateをとりにいくよう

ヘルパー(?)関連

  • mapState・・Stateをとりにいく
  • mapActions
  • mapGetters

参考記事
vue.js+Vuexチュートリアル

一休.com デベロッパーのブログを見つけ、完成形はこんな形なんだろうなとぼんやりイメージ。

一休.comレストランのスマートフォン検索ページがSPAになりました

SSRの方がSEO的にもスピード的にもいいんだろうけどスキル的にまだ難しいかなぁと思うので保留。

Sponsored link

2日目 2/100 10月11日(木)

Nuxt.jsインストール、npmコマンド復習、distフォルダをアップすれば起動するのでDjangoと共存できそう。Vue仕様とNuxtのフォルダ構成チェック。AjaxはaxiosでDjango-RESTFrameworkでAPI化すればCRUDできそう。djangoモデルをvue側で利用できる方法要調査。

やった事1. Nuxt.js v.2.0.0 インストール確認

インストールで

TypeError: Cannot read property ‘eslint’ of undefined

とエラー

ググって下記で対応してok.

Nuxt.jsプロジェクトをv2(nuxt-edge)にアップグレードした際にハマったところ

isClientとisDevが廃止になってるらしい。

アオキ
動いたからまぁいいや。

やった事2. npmコマンド復習 (フォルダ構成の確認も兼ねて)

  • npm install (Package.jsonに記載あるソフトをインストール)
  • npm run dev (開発サーバー起動・ホットリロード(自動読み込み)
  • npm run build (静的ファイル生成。(ブラウザなどで表示できる状態) distフォルダ内に生成される)

distフォルダにファイル吐き出した後、 distフォルダ内の index.html をダブルクリックで起動確認。

distフォルダをアップするだけなのでDjangoと共存できそう。

やった事3. Vue.jsとNuxt.jsのお勉強

参考記事
オトナのVue.js
オトナのNuxt.js(スライドのみチェック)

Vue.jsのディレクティブ

  • v-for, v-if・・なんとなくわかる
  • v-bind・・属性をつける(imgタグとかclassとか)
  • v-on:click・・イベント

Ajax 非同期で表示

  • axios(アクシオス)で。
  • mounted 内に axiosでAPIのURLを指定で取得できるよう。
  • API化さえすれば非同期でCRUDできそう。

→Django-RESTFramework を使えばDjangoでDBをAPI化できるのでいけそう。
→DBのリレーションも数字でなく値で表示できるよう。

疑問:APIは誰でもアクセス可ではなくて、特定のURLからのみ取得にしたい。
→下記記事周りでできそう

参考記事
Django REST Frameworkを使って爆速でAPIを実装する

Django REST frameworkでAPIにアクセス権を実装する方法

Django REST framework カスタマイズ方法 – チュートリアルの補足

django-rest-frameworkのチュートリアルを超意訳してみた。第01回「シリアライズ」

Nuxt.jsフォルダ構成

  • pagesフォルダにVueコンポーネント
  • ルーティングは自動生成らしい(すごい)
  • storeフォルダにstore関連

Nuxt.jsの仕様

  • fetchメソッド

fetch メソッドは、コンポーネントがローディングされる前に毎回呼び出されます。
fetch メソッドは第一引数として コンテキスト を受け取り、コンテキストを使ってデータを取得してデータをストアに入れることができます。

→今の所なんのこっちゃ。

やった事4 Django-RESTFrameworkの仕様確認

Serializers PythonオブジェクトをJSONやXML形式に変換

django-debug-barだとAjax非同期リクエストが計測できない
→django-silk: Request/ResponseのログやSQLクエリログを計測できる
→計測結果はDB保存
→DB保存をリセットするコマンドもある manage.py silk_clear_request_log
→SQLのN+1クエリを撲滅するときなどにありがたい、だそう

django-js-reverse
Djangoの名前付きURLパターンをJSでも使えるようになる
URL情報をまとめたJSファイルをコマンド作成できる

api/users/:user_id/comments/:commnet_id というURLもつくれるよう

感想

アオキ
Vue.jsとVuexとNuxt.jsをまとめて覚えようだなんて、どーかしてるぜぃ。(けどやったるぜい。)

■次やること
Django RESTFrameworkの仕様をなんとなく把握したい

Sponsored link

3日目 3/100 10月12日(金)

#100DaysOfCode 3/100
既存システム(PHP)のフォルダ構成把握。オブジェクト指向で資料も少なくよくわからん状態なので use や 継承 の流れを簡単にマップにしてみる。 ここまでつくっててなんで途中で止まったんだろうと思いつつ、MVCだとVが極端に弱いのでどうにか改善せねば #php

4日目 4/100 10月13日(土)

育児+明日のCoderDojo熊本準備のため 軽めの調整。

#100DaysOfCode 4/100 連動必須な他APIの仕様確認。GETでurlにパラメータ乗ってきたりcsv入出力必要そう。仕様書と既存のPHPのコードにらめっこでぼんやりわかってきたような。DB構成も自ずと固まってくる感。 これからテストDB作って試していきます。為せば成るさきっと。#api #python #django

python文法確認するために手持ちの本も流し読み開始。

5日目 5/100 10月14日(日)

#100DaysOfCode 5/100 今日はCoderDojo熊本2回目に注力。 https://t.co/KzZVPKvrFA”>https://t.co/KzZVPKvrFA 合間に「アジャイルプラクティス」「退屈な事はパイソンにやらせよう」を読んで要件整理。完成を目指すんじゃなくて短いスプリントをどんどん回す方がいいんだろうなと再確認。明日から、画面構成(url)とモデルに入る

我ながらなかなか忙しく動き回っていますが、来月のCoderDojoまでは時間あくのでその間にがっつり進めたいところです。

Sponsored link

6日目 6/100 10月15日(月)

#100DaysOfCode 6/100 多忙につき21:30から学習開始、urlディスパッチャーの仕様調べるうちに「現場で使えるdjangoの教科書 kindle版」が良さげだったので速攻でポチり。速攻でつくるためにはある程度の投資も必要ですな、という事でurlディスパッチあたりを読みつつ寝落ち予定。 #django #python

created by Rinker
¥523 (2024/03/29 00:27:38時点 Amazon調べ-詳細)

7日目 7/100 10月16日(火)

#100DaysOfCode 7/100 「現場で使えるdjangoの教科書」を参考にmacでcookiecutterやるとあっさりOKだったものの職場のwindowsで大苦戦。postgresqlと接続できず、anacondaからpython/postgresqlインストールしてリトライ中。Dockerも考えたけど同期がうまくいかない。ちょっと焦りが・・ #django

記事書きました。

Sponsored link

8日目 8/100 10月17日(水)

#100DaysOfCode 8/100 mysqlに切り替えて再開。多言語対応の方法把握。urlディスパッチャーの仕様が怪しかったのでおさらい。『現場Django』のサンプルコードのおかげであっさり把握。既存のコードと山ほどのライブラリのおかげで大分スピードアップできそう。先人達にただただ感謝。#django

記事書きました。

9日目 9/100 10月18日(木)

#100DaysOfCode 9/100 多言語の設定方法把握し次はデータベース。アンチパターンをググりつつ既存のDB構成確認すると怪しい箇所がチラホラ。enumはアンチらしくフォームで縛りを入れる。後から項目増やす可能性もあるので柔軟性をもたせたい。DB構築は絶対モレが発生するので都度見返そう。 #django

10日目 10/100 10月19日(金)

#100DaysOfCode 10/100 DB構成検討しリレーションを検討する中で、現在のフォルダ構成がまずい事をしりやりなおし。アプリをわけるつもりだったけどリレーション的には1つでいったほうがよさそう。知識を得て気づけた新たな壁。あといくつ壁を超えればいいんだろう。高ければ高い壁の方が(略 #django

Sponsored link

10日目を終えての感想

毎日報告するというのはちょっとしたプレッシャーになり、結果的には思っていた以上に進むことができたと思います。

Djangoの仕様がふんわりとわかってきて、
Nuxt.jsは今回はいらないかもなぁと判断できたり、
やりながらどんどん変わるというスタイルに楽しみながら進むことができているように思います。

駆け出しの方も何か新しい事を始めようという方も、

ぜひ ツイッターで #100DaysOfCode やってみてくださいな。

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

最近の記事

アーカイブ

  1. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  2. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  3. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  4. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  5. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
100% Free SEO Tools - Tool Kits PRO