URL : mintama.work
私はこれまで独学でプログラミングの学習を進めてきました。その中で得た効率的な独学の仕方などをアプリを通して伝えられたらと思い、当アプリを作成しました。
主な機能は、アウトプット機能、分散学習機能、勉強のTODO管理機能です。他にもいろいろな機能（コミュニティ機能やチャット機能など）を追加したかったのですが、思った以上に開発に手間取り、現在の機能のみでデプロイしています。
ホームは左と右（スマートフォンでは、上と下）で機能が分かれています。
左は、効率的な分散学習をするためのものです。詳細については、こちらを見ていただきたいのですが、簡単に説明すると、ノート機能で保存したノートを一番復習するのに良い時期に、表示させてくれる機能です。
右は、ボード機能で作成したボードを一つデフォルトのボードとしてセットし、ホーム画面でも簡単に目を通すことができるようにした機能です。
デフォルトボードの設定は、<ホームに表示させるボードを選択する>ボタン押下 -> ボードを選択 -> <確定>ボタン押下 でできます。
カスタマイズしたTODO管理ボードを作成することができます。
【ボード一覧画面】
自分の全てのボードを確認するができます。
- 右下の＜+＞ボタンを押すことで新規ボードの作成が行えます。
- 各ボードの<ボードに入る>ボタンでボードの操作画面に移動ますし。
- ボード作成ダイアログの＜デフォルトのボードを作成＞ボタンは、私が「こんなボードあったりいいな」と思ったボードを自動で作成してくれます。
デフォルトのボードについて-
リスト
下記のリストが自動で作成されます。デフォルトでは、「することすべて」と「完了したこと全て」以外は自動切り替えがON、切り替え時間0:00になっています。-
することすべて
自動切り替え先：今日すること -
今日すること
自動切り替え先：前からの持ち越し -
今日完了したこと
自動切り替え先：完了したこと全て -
前からの持ち越し
自動切り替え先：することすべて -
完了したことすべて
自動切り替え先：なし
-
-
運用
まず、「することすべて」に全てのタスクを書き出す。その中から今日することだけ「今日すること」に移動する。 「今日すること」のカードから順にタスクを完了させていき、順次「今日完了したこと」に移動させていく。 一日の終わりに「今日完了したこと」を元に、ノート機能でノートを作成する。
次の日には自動で、「今日完了したこと」→「完了したことすべて」、「今日すること」→「前からの持ち越し」、「前からの持ち越し」→「することすべて」に移動される。
-
【ボード操作画面】
リストとカードを使用して、自分でカスタマイズさせたTODO管理ボードを作成することができます。単純なTODO管理だけでなく、決まった時間にカードを自動で移動させたりすることもできます。
-
ボードの名前
ボードの名前をクリックすることにより、ボードの名前を変更することができます。 -
リスト・カードについて
ドラッグ&ドロップで自由に移動させることができます。 -
右上メニューボタン
ボードの全体的な操作を行うことができます。メニューの各ボタンについては、ボタンの名前の通りの動作をしますので、説明は省きます。 -
リストのペンボタン
リストの編集。以下、各項目について。-
このリストのカードを次に移動
切り替え先リストが指定されている状態でこのボタンを押すと、該当リストの全てのカードが次のリスト移動します。 -
✖︎ボタン
編集画面を閉じます。 -
リスト名
リストの名前を入力します。 -
切り替え先リスト
自動切り替え時の切り替え先のリストを選択します。 -
自動切り替え
自動切り替えのON/OFFを選択します。 -
切り替え時間
自動切り替えのポイントとなる時間を指定します。切り替え先リストが選択され、自動切り替えがONの状態の場合、この時間を跨ぐとカードが自動で次のリストに切り替わります。デフォルトは、0:00です。 -
アーカイブ
該当リストをアーカイブします。（データは残りますが、表示はされないようになります。） -
削除
リストを削除します。削除するリストに含まれるカードも全て削除されます。 -
保存
変更を反映させます。
-
-
カードのペンボタン
カードの編集。以下、各項目について。-
カード名
リストの名前を入力します。 -
詳細
カードの詳細を入力します。 -
アーカイブ
該当リストをアーカイブします。（データは残りますが、表示はされないようになります。） -
削除
リストを削除します。削除するリストに含まれるカードも全て削除されます。 -
保存
変更を反映させます。
-
-
右下＜＋＞ボタン
新規リストの作成をすることができます。作成画面の各項目については、上記「リストのペンボタン」に同じ。
学んだことを記録します。
-
新規ノートの作成
新しくノートを作成します。以下、各項目について。-
タイトル
タイトルを入力します。 -
見出し
セクションの見出しを入力します。 -
ごみ箱ボタン
セクションを削除します。 -
内容
セクションの詳細を入力します。 -
カテゴリー
セクションのカテゴリーを選択します。 -
参考資料
自分が登録した参考資料から選択します。 -
＜＋＞ボタン
セクションを追加します。 -
＜作成＞ボタン
ノートを保存します。
-
-
自分のノート一覧
自分が作成したノートの一覧を表示させます。ノートをクリックすることにより、ノートの詳細が見れます。
検索窓でキーワード検索をすることもできます。 -
みんなのノート一覧
自分と他の人のノートの一覧を見ることができます。 -
ノートの詳細画面
ノートの詳細を確認できます。＜編集＞ボタンを押すと、ノートを編集できます。
参考にしたサイトなどを登録し、閲覧することができます。登録したリファレンスはノートに紐づけることができます。
自分のプロフィールを閲覧設定することができます。以下、プロフィール設定項目。
-
ユーザー名
-
メールアドレス
-
性別
-
居住地
-
ひび割れ度
もともと、各ユーザーに独学者としてのレベルをつけるつもりでした、実装には至りませんでした。 -
学習開始時期
-
プロフィール画像
-
自己紹介
- PC
- Windows10 -> 現在、Mac Book Pro
- 言語
- Python
- JavaScript ( node.js )
- フレームワーク
- Django
- Rest framework
- Vue.js
- サーバー
- AWS
- M : Django.Models
- V : Vue.js
- C : Rest framework , Django.Views
ポートフォリオを作成しようと思った段階で、プログラミングスクールに通っている人がどんな風にしてポートフォリオを作っているのかが気になり、Twitterやブログなどを見ると、まず最初に要件定義やER図なるものを作成してから、アプリ開発に取り掛かっていることを知りました。私もとりあえずそれを真似て、要件定義やER図を作成してみることにしました。
ネット記事を参考に、うまくできたとは言えませんが一応作成することはできました。ファイルは以下のリンクにアップしています。
実装機能の確認やModel作成時に少し確認する程度でしたが、初めの段階でおおまかな全体像をイメージすることができたので、作成してよかっと思います。
データのやり取りはDjango Rest frameworkを使用したAPIを作成し、Vue.js × axiosを使用して表示させています。
主にSerializers（データの正規化をするところ）で躓きましたが、技術ブログやリファレンス、Rest frameworkの生のコードを読みなどして何とか実装出来ました。
最初の方は知識不足で、URL設計などはよくわからないことになっていますが、当アプリをある程度作成し終えた後に、「Webを支える技術」を読むと、内容がすんなり入ってきて、Restfulの重要性やどのようにしてAPIを設計するべきなのかが少しはわかりました。
Django本来の機能を使用した箇所は、Model、Form、サインアップ、ログインなどです。Djangoで簡略化されている機能については、甘えさせてもらい使わせてもらっています。大半の機能はRest frameworkで実装しているため、Django自体の記述量は比較的少ないです。
View側はVue.js, vuetifyを使用しました。最初の開発環境構築（webpack）の段階でエラーが出まくり2週間ほど苦戦していました。このときは本当につらかったです😭
結局、webpackの基礎をudemyで勉強しなおし、一から実装することによって乗り越えました。やっぱり基礎は大事！
Vuexについては、vuetifyを使ったことにより、componentのネストがほぼほぼなくなり、あまり使わなかったです。
メモリの消費量などは気にせずコードを記述しているので、次からはそういうことにも目を向けてコードを書いていきたいです
Vue.jsを使用した感想は、おもしろい！です。難しくなく、直観的に動作してくれるのでそう感じました。
WEBサーバーは、EC2内でDjango、nginx、uwsgiで動かしています。データベースはMariaDBです。静的ファイルはS3にアップロードをする仕様にし、CloudFrontを介して取得をします。
AWSは主にudemyの「AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得」で勉強しました。そこではネットワークの基礎知識についても触れられていて、AWSとネットワークを一緒に学習できたことで、より理解が深まりました。また、Django用のEC2サーバー構築をする中でも、Linuxやより深いネットワークの知識に触れることができ、とても勉強になりました。
Djangoでは、データの保存にオブジェクト思考のModelを使用するため、直接SQLの記述をすることはありませんでしたが、初めの方に「SQL 第2版 ゼロからはじめるデータベース操作」などでデータベースの概念を勉強していたので、「ここではWHERE区を使ってるんだ」などのある程度のイメージを持って、Model作成や操作をすることができました。
要件定義段階では、テスト駆動開発を行おうと考えていましたが、そもそもテストコード自体をそんなに書いたことがなかったため、テスト駆動開発をどのように進めていけば分からず、結局、開発の最後にテストコードを書くことにしました。
テストコードを書くことは、あまり楽しいものではなかったですが、テストを行っていくなかで、やっぱり意図しない動作をするところがあったため、テストは大事だなと改めて思いました。
テストが終わった後、ざっとリファクタリングを行ってみたのですが、簡素化できる箇所や読みにくい箇所が多々ありました。これから、他の人が書いたコードや「リーダブルコード」を読み返して、自分も他人も読みやすいコードを書いていきたいです。また、まだ自分のコードを他の人に見てもらったという経験がないので、そういう経験もどんどんしていきたいです。
工夫したところを紹介します。
非同期に「ユーザー名」と「パスワード」の入力データを送信し、サーバー側のバリデーション結果を返す仕様にしています。 サーバー側のバリデーションはDjangoで用意されているものを使用しました。
▽バリデーション例
- ユニークなユーザー名であるか
- 簡単なパスワードでないか
クライアント側では、ユーザーが空白区切り入力したキーワードをカンマ区切りに変換し、リクエストします。 サーバー側では、カンマ区切りのクエリパラメータを分解し、各キーワードが一つでも含まれるデータを抽出します。データの検索範囲は、リレーションしているデータまで対象です。
▽SQLイメージ
- INNER JOINでリレーションデータを結合
- 各カラムに対して、キーワード検索し当てはまるものを抽出
- GROUP BYで重複をなくす
ノート作成時、自動でTwitterに投稿できる仕様にしています。 実装についてはQiitaにまとめたので、そちらを見てください。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent