本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる100日プログラミング記録です。
- webアプリ実践記 0日目～10日目←いまここ
- webアプリ実践記 11日目～20日目
- webアプリ実践記 21日目～30日目
- webアプリ実践記 31日目～40日目
- webアプリ実践記 41日目～50日目
- webアプリ実践記 51日目～60日目
- webアプリ実践記 61日目～70日目
- webアプリ実践記 71日目～80日目
- webアプリ実践記 81日目～90日目
- webアプリ実践記 91日目～100日目
ツイッターで、 #100DaysOfCode というハッシュタグがある事を知り、
どうやら100日と期限を決めてプログラミングをやろうという企画のようで、それに賛同し、
100日間でどこまで進めるか実験的に記録していく事にしました。
しっかり完成する保障はどこにもございません。
完成するまできっと100つ以上の壁があると思うけど、どうにか(ググりまくって)乗り越えていこうと思います。
※当初はDjangoで構築予定でしたが諸事情あり 20日目頃よりLaravelに切り替えました。
事前知識：Laravelで簡単なシステム構築経験あり。
MVCモデル、ルーティング、SQL、Git初心者レベル。
やろうとしている事
- とある業界のWeb予約アプリ(システム)
- 予約する側→予約画面と会員ページ
- 管理側→一般の設定画面と、管理者専用の管理用画面
- ログイン後ユーザー毎の情報が表示されるようにしたい
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など追加してテンプレートから呼び出し。忘れそうなので図解しておく#100DaysOfCode #vue #vuex 1/100
— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 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的にもスピード的にもいいんだろうけどスキル的にまだ難しいかなぁと思うので保留。
2日目 2/100 10月11日(木)
#100DaysOfCode 2/100
Nuxt.jsインストール、npmコマンド復習、distフォルダをアップすれば起動するのでDjangoと共存できそう。Vue仕様とNuxtのフォルダ構成チェック。AjaxはaxiosでDjango-RESTFrameworkでAPI化すればCRUDできそう。djangoモデルをvue側で利用できる方法要調査。#vue #vuex #nuxt— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年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もつくれるよう
感想
■次やること
Django RESTFrameworkの仕様をなんとなく把握したい
3日目 3/100 10月12日(金)
#100DaysOfCode 3/100
既存システム(PHP)のフォルダ構成把握。オブジェクト指向で資料も少なくよくわからん状態なので use や 継承 の流れを簡単にマップにしてみる。 ここまでつくっててなんで途中で止まったんだろうと思いつつ、MVCだとVが極端に弱いのでどうにか改善せねば #php pic.twitter.com/NjGEy3Kyb5— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年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
— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年10月13日
#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 合間に「アジャイルプラクティス」「退屈な事はパイソンにやらせよう」を読んで要件整理。完成を目指すんじゃなくて短いスプリントをどんどん回す方がいいんだろうなと再確認。明日から、画面構成(url)とモデルに入る
— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年10月14日
#100DaysOfCode 5/100 今日はCoderDojo熊本2回目に注力。 https://t.co/KzZVPKvrFA”>https://t.co/KzZVPKvrFA 合間に「アジャイルプラクティス」「退屈な事はパイソンにやらせよう」を読んで要件整理。完成を目指すんじゃなくて短いスプリントをどんどん回す方がいいんだろうなと再確認。明日から、画面構成(url)とモデルに入る
我ながらなかなか忙しく動き回っていますが、来月のCoderDojoまでは時間あくのでその間にがっつり進めたいところです。
6日目 6/100 10月15日(月)
#100DaysOfCode 6/100 多忙につき21:30から学習開始、urlディスパッチャーの仕様調べるうちに「現場で使えるdjangoの教科書 kindle版」が良さげだったので速攻でポチり。速攻でつくるためにはある程度の投資も必要ですな、という事でurlディスパッチあたりを読みつつ寝落ち予定。 #django #python
— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年10月15日
#100DaysOfCode 6/100 多忙につき21:30から学習開始、urlディスパッチャーの仕様調べるうちに「現場で使えるdjangoの教科書 kindle版」が良さげだったので速攻でポチり。速攻でつくるためにはある程度の投資も必要ですな、という事でurlディスパッチあたりを読みつつ寝落ち予定。 #django #python
7日目 7/100 10月16日(火)
#100DaysOfCode 7/100 「現場で使えるdjangoの教科書」を参考にmacでcookiecutterやるとあっさりOKだったものの職場のwindowsで大苦戦。postgresqlと接続できず、anacondaからpython/postgresqlインストールしてリトライ中。Dockerも考えたけど同期がうまくいかない。ちょっと焦りが・・ #django
— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年10月16日
#100DaysOfCode 7/100 「現場で使えるdjangoの教科書」を参考にmacでcookiecutterやるとあっさりOKだったものの職場のwindowsで大苦戦。postgresqlと接続できず、anacondaからpython/postgresqlインストールしてリトライ中。Dockerも考えたけど同期がうまくいかない。ちょっと焦りが・・ #django
記事書きました。
8日目 8/100 10月17日(水)
#100DaysOfCode 8/100 mysqlに切り替えて再開。多言語対応の方法把握。urlディスパッチャーの仕様が怪しかったのでおさらい。『現場Django』のサンプルコードのおかげであっさり把握。既存のコードと山ほどのライブラリのおかげで大分スピードアップできそう。先人達にただただ感謝。#django
— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年10月17日
#100DaysOfCode 8/100 mysqlに切り替えて再開。多言語対応の方法把握。urlディスパッチャーの仕様が怪しかったのでおさらい。『現場Django』のサンプルコードのおかげであっさり把握。既存のコードと山ほどのライブラリのおかげで大分スピードアップできそう。先人達にただただ感謝。#django
記事書きました。
9日目 9/100 10月18日(木)
#100DaysOfCode 9/100 多言語の設定方法把握し次はデータベース。アンチパターンをググりつつ既存のDB構成確認すると怪しい箇所がチラホラ。enumはアンチらしくフォームで縛りを入れる。後から項目増やす可能性もあるので柔軟性をもたせたい。DB構築は絶対モレが発生するので都度見返そう。 #django
— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年10月18日
#100DaysOfCode 9/100 多言語の設定方法把握し次はデータベース。アンチパターンをググりつつ既存のDB構成確認すると怪しい箇所がチラホラ。enumはアンチらしくフォームで縛りを入れる。後から項目増やす可能性もあるので柔軟性をもたせたい。DB構築は絶対モレが発生するので都度見返そう。 #django
10日目 10/100 10月19日(金)
#100DaysOfCode 10/100 DB構成検討しリレーションを検討する中で、現在のフォルダ構成がまずい事をしりやりなおし。アプリをわけるつもりだったけどリレーション的には1つでいったほうがよさそう。知識を得て気づけた新たな壁。あといくつ壁を超えればいいんだろう。高ければ高い壁の方が(略 #django
— 世界のアオキ@子供心で遊ぶプログラミングと創造的思考力を (@aoki_tashipro) 2018年10月19日
#100DaysOfCode 10/100 DB構成検討しリレーションを検討する中で、現在のフォルダ構成がまずい事をしりやりなおし。アプリをわけるつもりだったけどリレーション的には1つでいったほうがよさそう。知識を得て気づけた新たな壁。あといくつ壁を超えればいいんだろう。高ければ高い壁の方が(略 #django
10日目を終えての感想
毎日報告するというのはちょっとしたプレッシャーになり、結果的には思っていた以上に進むことができたと思います。
Djangoの仕様がふんわりとわかってきて、
Nuxt.jsは今回はいらないかもなぁと判断できたり、
やりながらどんどん変わるというスタイルに楽しみながら進むことができているように思います。
駆け出しの方も何か新しい事を始めようという方も、
ぜひ ツイッターで #100DaysOfCode やってみてくださいな。
アオキのツイッターアカウント。
