20210107_アウトプット（即時更新されるコメント投稿機能アプリの準備）
今日行ったこと 50分
即時更新されるコメント投稿機能アプリの準備 50分
👉「イシュー１：基本設定」まで完了
（Action Cableを実装する前までのMVCと必要gemの設定）チーム開発のミーティング 50分
新しい発見
新しい発見はないが、ミニアプリの実装のためにイシューを準備をしていて、
Action Cable、Channel、Broadcastとはどんな概念だろうかとワクワクした。即時チャットアプリといえば、JavaScriptでサーバーサイドとやりとりする実装は以前行ったのでそれとの違いは何か考えながら進めたい😎
感想
今日は、仲間とチーム開発もやってみようという話になり構想について打ち合わせした☺️楽しかった。
年末年始ずっと一人で実装していたので、より楽しく感じた（笑）一緒に頑張っていると思える人がいると頑張れる😂モチベーションが上がったからか、その後のミニアプリの下準備に集中できた😎
コロナの感染拡大もあり、元気に実装するためにも、免疫力を高めようと思った。
最近、プログラミング時間の確保する方法が平日は夜3時間〜程度、1時すぎまでになることが多いので、そこを見直そうと思った。
なので、今日は早めに切り上げて寝る！ 明日から朝1時間半、夜1時間半をベースにしようと思っている☺️
覚書（12/29計画の見直し）
（１）やるべきこと （２）やりたいこと （３）やれること
（１）やるべきこと
- 卒業要件の完成
（２）やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（やめ太郎さんのキータ表彰・yahooイベント）
読書
（３）やれること
メンタル：楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り（達成すればよし）
PHP 一日15分以上
オリジナルアプリ 1日1時間以上
追加実装のミニアプリを作り、引き出しを増やす
| 優先順位 | 内容（機能） | 締め切り | 達成度 |
|---|---|---|---|
| 1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
| 2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
| 3 | ウィザード形式 | 12/27 | 完了 |
| 4 | SNS認証 | 12/28 | 完了 |
| 5 | 複数条件検索 | 12/29 | 完了 |
| 6 | タグ付 | 12/31 | 完了 |
| 7 | 画像プレビュー | 1/2 | 完了※フォーク |
| 8 | 複数枚写真OK | 1/4 | 完了※7に追加実装 |
| 9 | コメント機能(即時更新) | 1/8 | |
| 10 | クレカ登録 | 1/10 | |
| 11 | パンくず | 1/14 | |
| 12 | 日本語エラー | 1/18 |
身に付ける力（直近）
PHP7
Docker
身に付ける力（ゆくゆく・覚書）
20210106_アウトプット（オリジナルアプリ）
今日行ったこと 3時間5分
- オリジナルアプリの実装
👉「イシュー２：ユーザー管理機能」途中
（Herokuにデプロイ・deviseの導入・新規登録画面のcss）
新しい発見
deviseの
application_controller.rb設定について、復習になったことがあった。ログインする時は、Emailとパスワードがデフォルトになっている。
しかし、もしログインする時の入力項目を増やしたい場合には、
application_controller.rbに設定する、permitメソッドの第一引数の処理名の部分を:sign_in（ログイン）や:account_update（アカウント更新処理）にすれば追加可能になることが復習になった。
# devise_parameter_sanitizerのpermitメソッド devise_parameter_sanitizer.permit(:deviseの処理名, keys: [:許可するキー])
感想
Sassについて本番環境でも無事に反映して嬉しかった😍
ユーザー管理機能のdeviseの導入は、何度も行っているので、だいぶ理解できるようになった☺️
しかし、導入した後のフォーム等にcssを当てようとすると時間がかなりかかってしまう😂オリジナルアプリを通して、フロントエンドの部分、まだまた経験不足だなと痛感する。
最近、眠いと感じることが多いので、体のためにも睡眠も大事にしたい。😪
覚書（12/29計画の見直し）
（１）やるべきこと （２）やりたいこと （３）やれること
（１）やるべきこと
- 卒業要件の完成
（２）やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（やめ太郎さんのキータ表彰・yahooイベント）
読書
（３）やれること
メンタル：楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り（達成すればよし）
PHP 一日15分以上
オリジナルアプリ 1日1時間以上
追加実装のミニアプリを作り、引き出しを増やす
| 優先順位 | 内容（機能） | 締め切り | 達成度 |
|---|---|---|---|
| 1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
| 2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
| 3 | ウィザード形式 | 12/27 | 完了 |
| 4 | SNS認証 | 12/28 | 完了 |
| 5 | 複数条件検索 | 12/29 | 完了 |
| 6 | タグ付 | 12/31 | 完了 |
| 7 | 画像プレビュー | 1/2 | 完了※フォーク |
| 8 | 複数枚写真OK | 1/4 | 完了※7に追加実装 |
| 9 | コメント機能(即時更新) | 1/8 | |
| 10 | クレカ登録 | 1/10 | |
| 11 | パンくず | 1/14 | |
| 12 | 日本語エラー | 1/18 |
身に付ける力（直近）
PHP7
Docker
身に付ける力（ゆくゆく・覚書）
20210105_アウトプット（オリジナルアプリ）
今日行ったこと 3時間15分
複数枚画像投稿機能の実装についての質問結果
👉すっきり😍✨オリジナルアプリの実装
👉「イシュー１：基本設定」完了✨
（必要なgemの導入・cssフレームワークの導入・ランディングページ（概要のみ）の作成）
複数枚画像投稿機能の実装で分からなかったこと
疑問点
複数枚画像を投稿するためにビュー書くname: 'message[images][]の「空の配列」はどういう意味？
結論
（１）選択した画像を配列として挿入するために、空の箱（配列）を用意していること
（２）箱を用意することによって、画像をDBに保存するための部品の寄せ集めが作動すること（ActionDispatch::Http::UploadedFile:）
（３）作動したと同時に添字も０番から順番にデータが割り振られていくこと
補足
binding.pryを使って、name: 'message[images][]とname: 'message[images]でパラムスの中身を確認したところ、ActionDispatch::Http::UploadedFileが作られるか作られないかの違いがあることがわかった。ActionDispatch::Http::UploadedFile:は１つのライブラリ。ライブラリとは、目的とする動作を実行するための細かな部品（ファイル）を寄せ集めたもの。
従って、ActionDispatch::Http::UploadedFile:は「HTTPという通信手段を使用して、画像をデータベースに保存するための部品の寄せ集め」という意味になる。
空の配列がないと、選択した画像が入るべき配列が無くなり、ActionDispatch::Http::UploadedFileが用意されなくなることを理解。
オリジナルアプリ（基本設定）
今日やったこと
余計な画像の削除、それに伴って
image_tagの編集cssとJavaScript配下に同じファイル生成されているけれどそれでいいのか？
画面幅が小さくなったときに、レスポンシブ対応で左上にハンバーガーメニューが出るようJavaScript等の追加
発見になったこと
「今までエラーなんじゃないか？！と思っていたログ」がコンパイルしている軌跡なのだと上記のガイドをみてわかった（安心した・・）
「cssとJavaScript配下に同じファイル生成されているけれどそれでいいのか？！」と感じていることも、どうやらそういうものみたいというのもわかった。（削除してみたり移動させてみたりしてもまた出来る。初めはサスに伴って出来るファイルの生成先を変える設定が漏れているのかな？と思った。しかしRails6だと
sass-railsというgemが予め入っていてそれの補完っぽい？大丈夫そう・・） 👉間違っていたら教えてください！💦
感想
複数画面投稿機能の不明点について、着眼点を褒めてもらえて嬉しかった。疑問が解消されるだけでなくモチベーションも高めてもらえるメンターさん、ありがたい😣
オリジナルアプリやっぱり楽しい😎（笑）
レスポンシブ対応のために画面が小さくなったら左上にハンバーガーメニューが出てくるように実装できた時が一番嬉しかった☺️cssフレームワークだとこんなに簡単に実装できるんだ😍
ロゴの余白部分や、文字の大きさ、画面幅など、見た目が気になる部分があるけれど、今ここで100％目指さなくていいかと感じ先に進むことにした。今回付けたい！！！と思っている機能がちゃんと実装できたらまた見た目に戻ってこよう😄
当初は、基本実装でCircleCI導入を考えていたけれど、記事を読み漁った結果時間がかかりそうで、導入前の現段階で先にプルリクエストしたいと思ったため予定変更した。devise導入してテストコード入れたら挑戦したいと考えている！🔥
覚書（12/29計画の見直し）
（１）やるべきこと （２）やりたいこと （３）やれること
（１）やるべきこと
- 卒業要件の完成
（２）やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（やめ太郎さんのキータ表彰・yahooイベント）
読書
（３）やれること
メンタル：楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り（達成すればよし）
PHP 一日15分以上
オリジナルアプリ 1日1時間以上
追加実装のミニアプリを作り、引き出しを増やす
| 優先順位 | 内容（機能） | 締め切り | 達成度 |
|---|---|---|---|
| 1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
| 2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
| 3 | ウィザード形式 | 12/27 | 完了 |
| 4 | SNS認証 | 12/28 | 完了 |
| 5 | 複数条件検索 | 12/29 | 完了 |
| 6 | タグ付 | 12/31 | 完了 |
| 7 | 画像プレビュー | 1/2 | 完了※フォーク |
| 8 | 複数枚写真OK | 1/4 | 完了※7に追加実装 |
| 9 | コメント機能(即時更新) | 1/8 | |
| 10 | クレカ登録 | 1/10 | |
| 11 | パンくず | 1/14 | |
| 12 | 日本語エラー | 1/18 |
身に付ける力（直近）
PHP7
Docker
身に付ける力（ゆくゆく・覚書）
20210104_アウトプット（複数枚画像投稿機能の実装）
今日行ったこと 3時間20分
- 複数枚画像投稿機能の実装。
👉完成✨
（一箇所、疑問に感じているところがあるためメンターさんにチャットで質問して終了）
複数枚画像投稿機能の実装
Railsで複数枚画像を投稿する機能（Active Storageを使用）の以下の流れで実装した。
（１）アソシエーションを編集する（複数形にするため）
👉has_many_attached（投稿と画像の間を、1対多の関係にする）
（２）画像を送信するテキストフォームのname属性を変更する
（３）ストロングパラメーターで画像情報を運べるようにする
（４）DBに保存した複数の画像を表示できるようビューファイルを編集する
（５）JavaScriptでは、プレビュー機能を保持しつつ（選択した画像を表示させる機能を保ちつつ）、ファイル選択ボタンを生成・表示する機能を追加した
一番学びになったのは、
（省略）
imageElement.setAttribute('class', "image-element")
let imageElementNum = document.querySelectorAll('.image-element').length
（省略）
で"image-element"の要素がブラウザにいくつあるのか、数えて変数に格納できること。
また変数名をletにすることによって、上書きが可能なことを思い出した。
感想
仕事始め。緊急事態宣言が再び発令になりそう。
夜勉強したら、久々の仕事疲れ＆食後で眠くて集中力が落ちた😱
だんだん集中戻ってきて、後半は集中できた。リズムを取り戻そう。
取り戻さなくても一定の時間に寝る・起きるようになりたい。ついプログラミング楽しいと夜更かししてしまう💦
オリジナルアプリやりたかったけど出来なかった。また明日やろう。☺️
覚書（12/29計画の見直し）
（１）やるべきこと （２）やりたいこと （３）やれること
（１）やるべきこと
- 卒業要件の完成
（２）やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（やめ太郎さんのキータ表彰・yahooイベント）
読書
（３）やれること
メンタル：楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り（達成すればよし）
PHP 一日15分以上
オリジナルアプリ 1日1時間以上
追加実装のミニアプリを作り、引き出しを増やす
| 優先順位 | 内容（機能） | 締め切り | 達成度 |
|---|---|---|---|
| 1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
| 2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
| 3 | ウィザード形式 | 12/27 | 完了 |
| 4 | SNS認証 | 12/28 | 完了 |
| 5 | 複数条件検索 | 12/29 | 完了 |
| 6 | タグ付 | 12/31 | 完了 |
| 7 | 画像プレビュー | 1/2 | 完了※フォーク |
| 8 | 複数枚写真OK | 1/4 | 完了※7に追加実装 |
| 9 | コメント機能(即時更新) | 1/8 | |
| 10 | クレカ登録 | 1/10 | |
| 11 | パンくず | 1/14 | |
| 12 | 日本語エラー | 1/18 |
身に付ける力（直近）
PHP7
Docker
身に付ける力（ゆくゆく・覚書）
20210103_アウトプット（オリジナルアプリ・プレビュー機能の実装）
今日行ったこと 13時間15分
オリジナルアプリ 11時間15分
👉やっと、cssとJavaScriptが反映された！！！🎉🎉🎉画像プレビュー機能 2時間
👉完成✨
オリジナルアプリについて
もう一回、どこがエラーになっているのか特定するために、導入の部分からやり直しをした。
いろいろ試した日↓ cherry-2020.hatenablog.com
（１）foremanのアンインストール
👉アンインストールしても、同じエラーが出た。（ということはこれが原因ではない。）
👉調べたらコマンドを楽にするためのものであってとりあえず要らないかと判断。
👉本番環境にデプロイする時にまた注意しよう。
Railsアプリを開発するとき、ウェブサーバーのプロセスを1つ立ち上げて開発出来るのであればforemanは必要ない
（２）そもそも、マテリアライズ入れようとして何をしたっけ？
①JavaScript配下にstylesheetsとapplication.scssを作った。
②app / views / layouts / application.html.erbのstylesheet_link_tagをstylesheet_pack_tagに書き換えた。
👉cssを読み込む場所がいつものapp/assets配下ではないことに気がつく😲
👉なので、app/assets配下をいくら編集しても無意味だったのか💡同じファイル２つある状態だった😭
👉今更ながら、大元になるファイルたちapplication.html.erb・application.css・application.jsの勉強になった。
👉なぜ、JavaScript配下に置くのか理由は調べたけれど書いてある意味が分からなかった😭いろいろ試して今回の場合、JavaScript配下にstylesheetsとapplication.scss置かないとcssが反映しないことがわかった。
（コンパイル・JavaScriptのパッケージシステムあたりが読んでも分かるようで分からない。知識深めていきたい。）
（３）そもそもサス(Saas)って何？(.scssの拡張子のファイルって何？)
Sass（サス）とは、cssがバージョンアップしたもの。scss記法とsass記法がある。
ただの
cssは、一つ一つに色等を当てないといけないけれど、サスはカタマリに対してcssを当てられる利点がある。例えば、磯野家があったとして、今まではカツオは青、ワカメは赤、みたいにズラーっと記述する（css） しかし、サスだと、磯野家は白、その中のカツオは青、その中のワカメは赤みたいに、家族＞個人（入れ子）のような形（カタマリ）でcssが当てられると理解。
関係性がわかりやすいのと記述量が減るので可読性が上がる。
sass記法だとカタマリで書く記法でしか読み込まれない。scss記法だと従来のcssでもカタマリで書く記法でもどちらも読み込み可能。なので、
scss記法の方が一般的。〇〇.scssファイルに書き込めば、〇〇.cssと〇〇.mapが自動生成される。〇〇.mapは1行でズラーっと書かれているがこれはパソコンがcssを読み込みやすくするための一つだと理解。Webブラウザで反映するには４つの言語でないといけないので、
scss記法で実装していく場合には、コンパイルしながら実装すると理解。（その中の一つとして、VSコードの拡張機能がある。）
（４）マテリアライズってどんな風に書かれているの？
サンプルコードの構造を見た。（下記は一例）
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">Speeds up development</h5>
</div>
</div>
cssのインラインスタイルのような形で、マテリアライズの便利な機能を引っ張ってきているのだと理解。
例えば、col s12 m4は画面幅を１２分割した時の４こ分、flash_onはマテリアライズが用意している⚡️こんなマークが取ってこれる。
（５）JavaScriptいつもの記述やってみよう。
document.addEventListener('DOMContentLoaded', function(){
console.log(123);
});
検証キーから、コンソールを確認。（成功）
マテリアライズに定義されているJavaScriptが読み込まれないのは引数を間違えていたからだったと気づく😭
まとめ
上記の（１）〜（５）を一つ一つ行っていったら、画像もcssもJavaScriptも反映できた🎉
感動するくらい嬉しかったー！！！
反映したものの、細かい部分（余白とフッター）は出来ていないので明日以降に持ち越し。
色は、このサイトを参考にしている。
サルワカさんのホームページは、読者にとって痒いところに手が届く、見やすくて文章もわかりやすく親切なサイト。HTML・cssの勉強のたびにお世話になっている。🙇♀️
- その他：cssで
text-shadowという文字に影を付けられることを知る😍
プレビュー機能の実装
JavaScriptは改めて、いろんなものがオブジェクトであることを再実感した回だった。
（１）オブジェクトになっている中身が見れる！
コンソールをどんどん開けていくと、オブジェクトになっているのが見れた！すごい！
document.addEventListener('DOMContentLoaded', function(){
const ImageList = document.getElementById('image-list');
document.getElementById('message_image').addEventListener('change', function(e){
console.log(e);
});
});
（２）新しく知ったメソッド
| NO | メソッド | 役割 |
|---|---|---|
| 1 | window.URL.createObjectURL(引数); |
画像情報のURL作成できる |
| 2 | createElement(要素) |
要素に'div'や'input'を入れるとその要素が作れる |
| 3 | 親要素.appendChild(追加する子要素); |
HTML要素を追加できる （今回で言えばの 2に1をくっつけると特定の画像URLができる |
| 4 | if (document.URL.match( /new/ ) または document.URL.match( /edit/ )) { } |
特定のページだけにイベント発火できることを知った |
| 5 | e.target.files[0] |
画像の情報を取得できる |
感想
朝起きてから夢中になってやっていた。夕方17時くらいにやっと成功してめちゃくちゃ嬉しかった！！！（笑）サス勉強になったし、諦めないでよかった☺️
プログラミング漬けの正月休みだったけど、楽しかったなあ☺️
明日から仕事か〜。休みは早いなあ。
覚書（12/29計画の見直し）
（１）やるべきこと （２）やりたいこと （３）やれること
（１）やるべきこと
- 卒業要件の完成
（２）やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（やめ太郎さんのキータ表彰・yahooイベント）
読書
（３）やれること
メンタル：楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り（達成すればよし）
PHP 一日15分以上
オリジナルアプリ 1日1時間以上
追加実装のミニアプリを作り、引き出しを増やす
| 優先順位 | 内容（機能） | 締め切り | 達成度 |
|---|---|---|---|
| 1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
| 2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
| 3 | ウィザード形式 | 12/27 | 完了 |
| 4 | SNS認証 | 12/28 | 完了 |
| 5 | 複数条件検索 | 12/29 | 完了 |
| 6 | タグ付 | 12/31 | 完了 |
| 7 | 画像プレビュー | 1/2 | 完了※フォーク |
| 8 | 複数枚写真OK | 1/4 | |
| 9 | コメント機能(即時更新) | 1/8 | |
| 10 | クレカ登録 | 1/10 | |
| 11 | パンくず | 1/14 | |
| 12 | 日本語エラー | 1/18 |
身に付ける力（直近）
PHP7
Docker
身に付ける力（ゆくゆく・覚書）
20210102_アウトプット（オリジナルアプリ・画像プレビュー機能）
今日行ったこと 7時間15分
PHP（プロゲート）について
- for文を使って繰り返し処理をしたい場合には、
for ($i = 1; $i <= 100; $i++){
echo $i;
}
# 結果は１〜１００までの数値が出力される。
と理解。
JavaScriptのループ処理に似ていると思った。
オリジナルアプリ（ランディングページの実装）
結論：うまくいっていない。
昨日に引き続き
Materializeで、ログイン前のページを作りたかったが、cssとJavaScriptが全然あたらない。読み込みがうまくいっていないのか、必要な環境構築ができていないのか、ネットやYoutubeを漁っているが「これだ！」という解決策に出会えず、わからない。
調ベてみるとRails6からWebpackerが入っているので環境構築の部分よりは読み込みが上手くいっていない気がする。
エラーが出たまま先に進んでも、エラーが原因で起きたエラーなのか、それとも別なのかわからなくなるため、ログとにらめっこ状態だった。
明日につなげようと、HTMLの文章だけ仕上げて終わりにした。
画像プレビュー機能
オリジナルアプリ全然上手くいかないので、気分転換しようとミニアプリ開始。
しかしGitHubにあげようとしたら「fork」の警告が出てきて動揺。（今までのミニアプリは「Rails new」で新規作成だった。今回は「git clone」だった。）
GitHubのエラーメッセージ、画像で出てきてしまうので、翻訳しづらい。😭オリジナルアプリだけじゃなくて、こっちもスムーズにいかないのか〜と悔しかった（；０；）
元データを壊してしまわないか怖かった。
調べたところ、元々フォークの目的自体は、「本家への貢献」（こうじゃない？と提案するためにあるもの）だと理解。またいつものようにmasterからブランチを切って作業する方法の他に、あえてフォークでアプリを作っていく手段もあるのかと知った。
絵が上手でとてもわかりやすかったサイト。
感想
（少しずつだけど）Ruby以外の言語を勉強を始めてみて、一つの言語極めると他の言語にも対応しやすくなるという意味がなんとなくわかった気がした。
今のレベル感としては「あーこれやったなあ」って出てくるけれど、何も見ないで書くのは難しい。
「これは任せてください！」の言語（あるいはフレームワーク）の技術を一つは身に付けたい！（頑張ろう！）
悲しいくらいオリジナルアプリ進まなかった。そして、カリキュラムのミニアプリを作っていてもそっちが気になって集中できず。悔しいなあ。
今日はモヤモヤ＆あまり集中できなかった。なので、YouTube見ながら、筋トレとヨガをした☺️ 詰まったときの、運動はいい！！
覚書（12/29計画の見直し）
（１）やるべきこと （２）やりたいこと （３）やれること
（１）やるべきこと
- 卒業要件の完成
（２）やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（やめ太郎さんのキータ表彰・yahooイベント）
読書
（３）やれること
メンタル：楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り（達成すればよし）
PHP 一日15分以上
オリジナルアプリ 1日1時間以上
追加実装のミニアプリを作り、引き出しを増やす
| 優先順位 | 内容（機能） | 締め切り | 達成度 |
|---|---|---|---|
| 1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
| 2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
| 3 | ウィザード形式 | 12/27 | 完了 |
| 4 | SNS認証 | 12/28 | 完了 |
| 5 | 複数条件検索 | 12/29 | 完了 |
| 6 | タグ付 | 12/31 | 完了 |
| 7 | 画像プレビュー | 1/2 | |
| 8 | 複数枚写真OK | 1/4 | |
| 9 | コメント機能(即時更新) | 1/8 | |
| 10 | クレカ登録 | 1/10 | |
| 11 | パンくず | 1/14 | |
| 12 | 日本語エラー | 1/18 |
身に付ける力（直近）
PHP7
Docker
身に付ける力（ゆくゆく・覚書）
20210101_アウトプット（オリジナルアプリ）
今日行ったこと 9時間45分
Command Line（プロゲート） 25分
オリジナルアプリ（構想） 3時間30分
👉ユーザーに届けたい機能の確認・DB設計オリジナルアプリ（実装） 5時間50分
👉GitHubイシューの作成・gemの導入・css実装（scssにチャレンジしているがうまくいかない）
Command Line（プロゲート）について
ディレクトリを作ったり移動させたりするときは
-rがいる。一つ上に戻るには
cd ..で行ける。mvコマンドは、移動させることもできるしファイル名を変更できることもできる。「
mv+変えたいもの+変えた後」（実在すれば、そこに移動。実在しなければファイル名が変わる）
が新しい発見になった！
いつも使っているcdやlsはスイスイいけて成長を実感したので嬉しかった。
オリジナルアプリ（構想）について
（１）銭神さんのガイド見ながらここ一週間考えたことを流れに沿って書き出し
（２）インタビューの結果を踏まえて機能に必要な部分をブラッシュアップ
（３）アプリに落とし込む機能や画面遷移・DB設計の構築
を行った。
構想の内容は65％くらいの完成度だけど、これから適宜ブラッシュアップしていこうと思っている。
オリジナルアプリ（実装）について
新しいgemの導入（Rails ERD）
ER図の自動生成できるgemを見つけて導入😍
まだマイグレーションファイル作成していないので効果を見られていないけど楽しみ。
フリマアプリ作る時にER図の作成にはすごく時間がかかったので、自動化できるものはしていきたい。
自動化の手間を惜しまないマインドを大事にしたいのと、くっつける技術力を高めるチャンスだと思っていろいろ試している。
cssのフレームワークについて
今日、挑戦していたこと：結論はうまくいっていない。
（１）可愛いのでこれを使ってみたかった。
マテリアルデザインとは、「三次元、直感的、重なりの意識」を持たせたデザインと理解。
確かに、Google マップとか、サルワカとか好きなサイトはマテリアルデザイン だった。
立体的で押しやすいし、凝っている感じが好き。
（２）導入してみよう
導入はこれをベースに、
このコマンドを活用しながら、
行った。
foremanはGemfileに書かないでって公式に書いてあったため言われた通りにした。
導入したときに戸惑ったこととしては、
- 途中出てきた
Procfileって何？！ない？？って思ったら自分で作るファイルっぽかったので作った。
- 後々、ヘロクにデプロイするときもコマンド必要になってくる様子。
（３）ここからうまくいかなかったこと
嬉しかったことしては、一部だけ画面に反映されたこと😍
しかし、JavaScriptと画像の反映がうまくいかない。
そこからいろいろ調べて勉強になっていることは、
Webに反映できる言語は４つしかないので、フレームワークの
scssの拡張子を使うにはコンパイルが必要。 （反映される言語：HTML・CSS・JavaScript・WebAssemblyの４つ）
ということを学んだ。
コンパイルさせようと思ったが、拡張機能の設定変更をしてjson形式に変換されるようにしたいがボタンが下記通りに表示されずうまくいかない😭
というところで寝る時間になってしまった💧
感想
オリジナルアプリ楽しすぎて、気づいたらご飯の時間だったり、気づいたら寝る時間だった💦
また明日チャレンジしてみて、このままフレームワークを使うか考えようと思った。
覚書（12/29計画の見直し）
（１）やるべきこと （２）やりたいこと （３）やれること
（１）やるべきこと
- 卒業要件の完成
（２）やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（やめ太郎さんのキータ表彰・yahooイベント）
読書
（３）やれること
メンタル：楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り（達成すればよし）
PHP 一日15分以上
オリジナルアプリ 1日1時間以上
追加実装のミニアプリを作り、引き出しを増やす
| 優先順位 | 内容（機能） | 締め切り | 達成度 |
|---|---|---|---|
| 1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
| 2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
| 3 | ウィザード形式 | 12/27 | 完了 |
| 4 | SNS認証 | 12/28 | 完了 |
| 5 | 複数条件検索 | 12/29 | 完了 |
| 6 | タグ付 | 12/31 | 完了 |
| 7 | 画像プレビュー | 1/2 | |
| 8 | 複数枚写真OK | 1/4 | |
| 9 | コメント機能(即時更新) | 1/8 | |
| 10 | クレカ登録 | 1/10 | |
| 11 | パンくず | 1/14 | |
| 12 | 日本語エラー | 1/18 |
身に付ける力（直近）
PHP7
Docker
