20210114_アウトプット（チャット風UIの作り方・オリジナルアプリ）
今日行ったこと 5時間10分
エンドポイントについて 1 時間
👉JavaScriptに書いてあるopenとルーティングがリンクしていることがわかりすっきり。オリジナルアプリ 2時間
👉もう一度作り直しを始めた。
新しい発見
吹き出しのCSSの方法
- オリジナルアプリに取り入れたいと思ったためドットインストールで学習。
ドットインストール「CSSでチャット風のUIを作ってみよう」のレッスンより
ドットインストールを通して初めて知ったことは、
〜第一ステップ〜
（１）widthとheightを同じpxにする。（ここでは20pxとする）
（２）borderで線をつける。（border 5px solid black;）
👉まずは□（四角）ができる。
〜第二ステップ〜
（３）borderで線に色をつける際「右側の辺だけこの色」と指定できると知る😲（border-right-color: white;）
（４）（３）のsolid（銭の太さ）を極太にしていく（ここでは40pxとする）
（５）（１）のwidthとheightを0pxにしていく。
👉△が出現する。
始めは「え？？どゆこと？？？」と思ったが、
四角形作った後に、ボーダーを利用して、三角形に見える形にしていくというのを理解した！！（すごい！）
オリジナルアプリについて
もう一度作り直すことにした。
自動化（circleCI）やCSSフレームワーク（マテリアライズ）等、新しいことにどんどんチャレンジしようと思っていた。
しかし、いざオリジナルアプリを作ると、初歩的な部分すら時間がかかる&思った通りの実装が出来ないことに気づく。
新しいことにチャレンジしすぎて、エラーが発生している場合に、今回初めてチャレンジした新しい技術が原因なのか、今まで習得してきた知識で実装した部分が原因なのか、エラーを捉えることが出来ていないことに気づく。
一つ形にしてから、改善できる部分に、自分がやったことない新しい技術にチャレンジして取り入れていこうと方向性を変えることにした。
今日やったこと
gemの導入
ヘッダーフッターの実装スタート
ロゴの作成
感想
勉強時間確保できたのはよかった！しかし、つい遅くまでやってしまい寝不足気味。
ヘッダーとフッターに思いの外時間かかる。全然上手くいかない。
ドットインストールで吹き出しの方法を学んでいる時、ワクワクしたなあ。
エンドポイントについてメンターさんに聞いてやりとりしている際、励ましてくれて本当に嬉しかったなあ。頑張ろうと思えた。
覚書（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
身に付ける力（ゆくゆく・覚書）
20210113_アウトプット（オリジナルアプリ）
今日行ったこと 8時間30分
オリジナルアプリ 7時間30 分
👉実装できるか不安に思っている部分のミニアプリ作成。（カテゴリー別に分けて、テーブルを分けると良いかもしれないと考える）履歴書の再考 3時間
エンドパラメーターの復習 1時間
👉一部概念で分からなくなったためメンターさんにチャットで質問して終了。
新しい発見
ファイルを複製したときは、
database.ymlのほか、gitの削除も必要になること。stylesheet_link_tagメソッドについて。stylesheet_link_tagの引数には、'application'と書いてあるため、app/assets/stylesheets/ディレクトリ内のapplication.cssというCSSファイルを読み込むこと。（つまり、第一引数で読み込む先を指定していること）application.cssファイルにある、*= require_tree .は、「アルファベット順」にapp/assets/stylesheets/というディレクトリにあるCSSファイルを読み込んでいくこと。（アルファベット順なことを忘れていた）form_withでモデル指定したらactionview::syntaxerrorintemplateエラー。form_with()のところで、かっことの間に半角スペース開けていたからだった😂７つのアクションについて。今更ながら、削除・アップデート・編集など「どれをそのアクションにするか」という場合にはidの指定が必要になるので、コントローラーのパラムスにおいて定義する。
なぜ、データが運ばれないんだろう？と思った時に、プライベートのビフォーアクションで、どのモデル(
require)のどのカラム(permit)かと指定する際に、リファレンスをしているuser_idをmerge忘れていたためだった。（上記のアクションでidが必要なので識別するため）N＋１問題を解消するincludes（
@rules = Rule.includes(:user)）を定義した場合には、all（@rules = Rule.all.order("created_at DESC")）は省略可能であること。シークエルプロについて（DB）。
schema_migrationsとはマイグレーションの履歴だったことがわかった。削除してしまいエラー。（ここで失敗しておいてよかった・・・）このおかげで始め合計回数が出て嬉しかった！！！（ハッシュ形式・カテゴリー別）
railsのmodelで各データが何個あるかカウントする – joppot
- 重複削除のメソッドを消せば、合計の回数部分だけでた！
感想
過去のカリキュラムめちゃくちゃ勉強になる。オリアプを実装するためのヒントをかき集めていた。（復習になった）
不安な部分のみの機能を作って模索していて、①予めカテゴリー別に分けること、②カウントする機能とルールを設定するテーブルは分けること、の部分が少し見えた。合計回数が出たのも大きかった。
あとはJavaScriptを使ってカウント機能を実装したいこと、上記テーブルを分けた時、アソシエーションを組めば他のコントローラーのインスタンス変数をビュー上で使えるか？等進めようと思ったが、マイグレーションファイルをシークエルプロ上で消すという失態をして、時間切れになった😂
大きいミスをしたけど、自分の中の失敗でよかった（会社でやらかすミスでなくてよかった）と心から思った😂（もう消さない！）
なかなか上手くいかないけど、プログラミングの仕組みを知りたいと勉強している時、楽しい。
覚書（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
身に付ける力（ゆくゆく・覚書）
20210112_アウトプット（オリジナルアプリ）
今日行ったこと 3時間
- オリジナルアプリ 3時間
👉実装できるか不安に思っている部分のミニアプリ作成。（2時間下準備・1時間実装考えるところで終了。）
新しい発見
database.ymlをutf-8に直すのを忘れ、DB作成したところエラー。昔の自分のキータ記事から、config/initializers/mysql.rbを自作して解決するんだったと思い出す。deviseを導入した後、
rails g devise:installをするのを忘れ、①rails g devise user、②rails g devise:viewsを実行したところ②でエラー。（①はdeviseが機能していないファイルが生成された）rails g devise:installまで戻るために、destroyするためには、ルーティングにあるdevise_for :usersを消さないとdestroy出来ないことを理解。deviseの入力候補について、
autocomplete: 'off'にすると消えると知る。
VSコードについて。GitHubにコミットしていないと、ファイル・フォルダが緑色に光ることを知る。（GitHubを使わないと差分がわかりづらいことを知る）
カウント機能について、下記記事を見つけて参考にしていた。この記事にもあるように、
setIntervalは一定時間ごとに繰り返す・setTimeoutは一定時間後に実行する。いずれもclearIntervalで停止できるという部分まで理解した。
1日一回押せるようにしたいとき、
wheneverというgemをあてにしていたが、wheneverはプログラムのバッチ処理を一定時間で行うなどのために使用することを知った。（自分の考えていた目的とは違うかもしれない？）またcronの記事も見て、ユーザーがブラウザを開けていなければ、実行されないことも知った。
具体化・明確化しないと機能にならないことを再び感じたため、何を実装したいのか明確にしたああと（仮説を立てた後）明日もう少しじっくり向き合ってみよう。
感想
あまりカリキュラムを見ずに、スイスイ進めたらいっぱいエラーが出たけど、改めてコマンドの意味に気づくことが多かったのでよかった。
昔は、VSコードのフォルダやファイルが光っていて、枝分かれしているマークに「125」などと数字が書いてあったのがよくわからなかったけど、ここ１ヶ月くらいGitHubを使って上げ続けていたことにより、その意味に気づくことが出来た😂（コミットされていない部分が光る）
そして、どのファイルを実験でいじったかわかりづらい＆戻るマークがないため一旦今行っていた実験を丸ごと戻したい時に面倒だということにも気づけた😂笑
覚書（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
身に付ける力（ゆくゆく・覚書）
20210111_アウトプット（Docker／PHP・クレジットカードミニアプリ）
今日行ったこと 10時間
Dockerを使いながらPHPで開発（ドットインストール） 4時間45分
👉模写しながら学ぶ。（昨日の続き。todoリスト完成した😍）クレジットカード決済機能を持ったミニアプリ 5時間15分
👉商品購入機能の前まで完了。
新しい発見
Dockerを使いながらPHPで開発（ドットインストール）
まずは、ドットインストールで模写しながらコードを書き上げていき、どういう風に反映するのか見たあと、コードを見てわからない部分をパーフェクトphpの一番後ろにある索引から調べていく方式でやってみた！☺️
phpはサーバーとのやりとりできるメソッド等が、簡単にhtmlに記入できるからこそ、脆弱性に繋がる部分について対策処理を同時に書いていくと理解。
新しく知った単語
PDO
PHP Data Objectの略。PHP5.1から標準で導入された。
今までは使うデータベースによって、データベースからとってくる関数の名前がバラバラだったが、アクセスを抽象化してPDOという共通のオブジェクトにすることによって、同じ関数を使ってPHPから使っているデータベースにデータを取ってくることが出来るようになったと理解。
プリペアドステートメント
プリペアステートメントとは、値と置き換えるためのプレースホルダを含んだSQLを事前に準備して、SQL実行時に値をプレースホルダに割り当てる機能。
SQL文を使って、データベースとのやりとりをする時に、悪意のある書き換えをされないようにするため、「プレースホルダ」という正式な値が入るまでの仮置き場を作る。 「〇〇を取ってきて！」と命令するときの〇〇について、無害化処理（エスケープ）をしてから、空けておいた「プレースホルダ」に割り当てると理解。 ちなみに、〇〇には、動的パラメーターが入る。
| 名前 | 意味・役割 |
|---|---|
| PDOStatementクラス | プリペアドステートメントあるいはSQL実行後の結果セットを表すクラスのことを指す |
| prepare()メソッド | こういう風にDBに対して行うよと準備する。実行するとPDOStatementクラスのインスタンスが返ってくる。 |
| execute()メソッド | 実行するとデータベースへの指示が実行される（引数にプレースホルダに入る値を指定する） |
またstmtはstatementの略で、常套的に利用されると理解。
この方の記事もわかりやすかったです！！
Payjp＿app（ミニアプリ）の作成
Payjpの実装は２回目だが、前回と違うところは「ユーザー情報」と「カード情報」を紐づけること。
復習になった部分
マイページを作る場合には、マイページへ飛ぶ
link_toでプレフィックスを指定する際、引数にcurrent_userを持たせること。f.text_fieldにすることにより、入力可能になること。autofocus: trueを設定することにより、そこへカーソルがあたり入力待ちになる。なので、例えば「マイページ」のリンクへ飛んだ後、最初の編集できるフォームに設定しておくと、親切。アソシエーションのオプションの一つである
dependent: :destroyは親モデル側に設定する。（親モデルを消すと子モデルも消える）「include_blank: "---"」とすることで、選択前は「---」と表示することが出来る。
JavaScriptで環境変数を扱うには、webpackerを用いること。
% touch config/initializers/webpacker.rb
ファイル内は以下のように編集↓
Webpacker::Compiler.env["PAYJP_PUBLIC_KEY"] = ENV["PAYJP_PUBLIC_KEY"]
JavaScriptのファイルも編集↓
const pay = () => {
Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
// 省略
新しく学んだ部分
具体的なカード情報（カード番号など）をそのままデータベースに保存することは法律上禁止されているが、トークン化された情報であれば保存可能であると理解。
そのために、コントローラーにおいて、アプリの
user_idと紐付けして、トークン化したカード情報を保存する。マイページ等で表示する際は、アプリの
user_idを元に、PAYJP専用のメソッドを使いアクセスして復元してビュー上に、表現している。cards_controllerにおけるdescription:は、PAYJPの顧客管理の「備考」にあたると理解。例えば、userモデルに会社名などがあればそれを表示させても良いのかもしれないと感じた。現在は一度登録したら修正できない状況である。編集をするにはどうしたらいいだろう？と疑問を感じた。
実験で試してみたら
cards/new.html.erbにあるカード登録を、users/show.html.erbに貼り付けすると、DBにはnewとして２枚目以降のカードがDBに保存できた。取り出す際、firstではそれだとうまく取り出せない・・（工夫が必要だがSecondやthirdでは情報が拾えない、idを指定するのもうまく行かない）というところで時間ぎれになり終わった。削除する方法として、以下のqiitaが良さそうだったので明日以降、やってみようとおもう。
感想
ドットインストール、昔は難しくてわからなかったけれど今行ってみると引数・変数・データのやりとり・HTML・CSSの当たり方など、基本的な部分が成長したからか、楽しかった😍
違う教材を使うことによって新しい切り口からの発見も多かったので楽しい（例パブリックフォルダは外から見える部分のフォルダ、workはサーバー部分のフォルダ、scriptタグをhtmlに当たるファイルの下に書くことによって読み込まれる、忘れかけていたcssのboxsizingなど・・）
今日は中途半端だったPHPを完了させて、クレジットカードのミニアプリ終了後にオリジナルアプリを作成、と計画していたが、そこまで行かなかった。
夜は、焦り・不安による駆られた😭
一番の不安はやったことない機能の実装部分なので、その部分だけ試しに作ろう、そしたら自分が安心すると最終的に考えたため、明日の朝やろう😣！
覚書（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
身に付ける力（ゆくゆく・覚書）
20210110_アウトプット（ActionCableのデプロイ・Docker・PHP）
今日行ったこと 8時間20分
即時更新されるコメント投稿機能アプリ 4時間50分
👉ActionCableをデプロイする際は、工夫が必要なことを学んだ。Dockerを使いながらPHPで開発（ドットインストール） 3時間30分
👉模写しながら学ぶ。チーム開発検討打ち合わせ1時間10分
新しい発見
Action Cableのデプロイについて
Herokuでデプロイしたが、リロードしないと即時更新されず💦（即時更新ではない状況）
Railsガイドや、そのほかのネットで調べた上で実験したところ、以下の４つについて新しい発見になった。
（１）ActionCableを使用して、即時機能を実装する場合config/cable.ymlにあるサブスプリクションのアダプタ設定が作用すること
（２）アダプタ設定（本番環境）において、async（非推奨）・redis（推奨）・postgresql（推奨）のいずれかを選択することになること
（３）現在の自分の状況ではmysql2でデータベースを作ってしまったため、async（非推奨）の選択肢になってくること
（４）（１）〜（３）のサブスクリプションのアダプタ設定の他、config/environments/production.rbにおいて、許可されたリクエスト送信元だけがメッセージ等をサーバーに送れるようにURL設定が必要なこと
Railsガイドより引用（１）〜（４）に当たる部分
| アダプタ | 推奨／非推奨 | 自分の状況（DBにMysql2を使用） |
|---|---|---|
| async | 非推奨 | 使用するとデプロイ（即時機能の実装）出来る。 |
| Redis | 推奨 | デフォルト値。Mysql2でDB作成しているとエラー。使うにはHerokuで有料プランと判明。 |
| PostgreSQL | 推奨 | Mysql2でDB作成しているとエラー。 |
仮説が合っているかメンターさんに確認したら合っていた😭嬉しい！
プラスで知識になったこととして、
rails newをした時に、-d mysqlと指定しているが、ここの部分をPostgreSQLなどにすればアプリ生成ごとにDB設定できることを知った。 （前提として、rails newする前に、DBの環境構築が必要）また
asyncが非推奨なのは、データ容量が小さいので通信速度が重くて遅くなってしまうため。なのでポートフォリオ程度であれば大丈夫なことも知れてよかった。 （非推奨だと「絶対に使わない方がいいくらい」の重さで捉えていたため）
Dockerを使いながらPHPで開発（ドットインストール）
Dockerを初めてインストールした😍。スタート時に
docker-compose up -dというコマンドを打つことを学んだ。localhostが3000以外なのが不思議な感じ。
phpについてhtmlの部分にJavaScriptのスクリプトを入れられないようにするために、
htmlspecialcharsで覆ってあげることを初めて知った。Railsと違って、面から作っていく印象を受けた。生のDBを操作する内容と、htmlにphpの変数やforeeachを等を組み合わせてDBとの繋がりを作り上げていくのが新鮮。（RailsはいかにActive recordのおかげでデータベースからの取り出しが楽だったか・・）
プロゲートよりもドットインストールの方が実際にコード使ってブラウザに反映させていくので実践的でRailsとの違いがわかりやすかった。
今オリジナルアプリで詰まっているフォームの部分も、Railsの7つのアクションではなく、phpのCRUDのような場合に相性がいいのではないかと思い始めた。
感想
ドットインストールから得られる新しい知識が楽しすぎて夢中になった。
今更なのだが、今作ろうとしているオリジナルアプリはサーバーサイドよりもフロントっぽい内容だったのではないかと思い始めた😭焦り・不安いろんな感情が入り混じるけど、一歩ずつやろうと思う。
Herokuのデプロイを通して、Railsのデプロイに関して知識を深められたのは嬉しかった。
覚書（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
身に付ける力（ゆくゆく・覚書）
20210109_アウトプット（オリジナルアプリ/ユーザー管理機能）
今日行ったこと 9時間
オリジナルアプリ 9時間
👉ユーザー新規登録・ログインのビュー実装（生年月日のプルダウンが上手くいかず躓く💦）仲間と勉強会 2時間40分
👉オリジナルアプリの進捗、みんなでアウトプット・フィードバック
新しい発見
cssフレームワークについて
フレームワークによって実装が簡単になった部分もあったが、慣れないことによるつまづきもあり。
マテリアライズの影響なのか、ユーザー登録時に生年月日を登録したいがプルダウンが表示されない。
本来であればまとまりごとにcssを分けたいが、分けるとテンプレートエラーになってしまう。今のところ一つのcssで作っていて肥大化になっている💦
フッター部分が白くなってしまう。（マテリアライズには、ブートストラップに比べて、ヘッダーやフッダーを簡単に実装できるメソッドがないっぽい）
生年月日のところでずっと考えていたけれど、わからなくて初めてテラテイルを使って質問してみた😣
回答ありますように😭
Ruby on Rails - Rails6（devise）とMaterializeを使って、プルダウンの表示・データベースへの保存をする方法について｜teratail
フッターに関しては、また別の記事見つけたので明日やってみよう。
仲間との勉強会について
オリジナルアプリの構想・内容・進捗などを話した上で、お互いにフィードバックする機会があった☺️
出口が明確（アプリを使った後の使い道）であったり、収益の部分について過去の経験を活かして構想できているアプリであったり、現在の自分のアプリでの弱い部分についてしっかり出来ている方の話を聞いてためになった。
何故この思いでアプリを作ろうと思ったかという部分が、聞いていて一番楽しかった。
感想
今日でユーザー管理機能を終わらせたかったが、到達できず😭テラテイルに初めて質問できたので良しとしよう。
最近出たナイトルーティンもみていて、癒される♡
今日あった勉強会について、良い刺激になりモチベーションにつながった。価値観を共有できる仲間がいると楽しい。（ありがとうございました😀！）
お昼食べながら見ていたあっちゃんの動画。結論部分にあった必要な力の一つに「日本語に翻訳されている情報はごく一部なので、英語で情報を取ってくる力が大事」という話があった。オリジナルアプリに入って、新しい機能にチャレンジしようとするほど、その力がないと実装できないと痛感する機会が多かったので、その通りだと思った。
翻訳に頼っている部分が多いけれど、プログラミングを始める前と後とでは、英語を見て、意味を理解できる単語等が確実に増えたので、始めてよかったなと感じた。
覚書（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
身に付ける力（ゆくゆく・覚書）
20210108_アウトプット（オリジナルアプリ・即時更新されるコメント投稿機能アプリ）
今日行ったこと 3時間15分
オリジナルアプリ 1時間
👉ユーザー新規登録・ログインのビュー実装即時更新されるコメント投稿機能アプリの準備 2時間15分
👉「イシュー２：Action Cable機能の実装」まで完了
新しい発見
Action Cable(アクションケーブル)について
Action Cableは、通常のRailsのアプリケーションと同様の記述で、即時更新機能を実装できるフレームワーク。
ざっくり言うと、チャネルという即時機能のための窓口を作り、そこがコントローラーからのデータの受け取りと、保存されたと同時にJavaScriptを使ってデータを反映させることを行うものだった。
JavaScriptとの違いは、エンドポイントを作ったり、JavaScript上にコントローラーにsendする記述をすることがないこと。Rails上の仕組みで簡単で高機能なファイルを中間に作り、それと繋がる部分（コントローラーとJavaScript）に少し記述で完成だった。
新しく知った単語
Channel（チャネル）
チャネルとは、即時更新機能を実現するサーバー側の仕組みのこと。
stream_from
stream_fromとは、サーバーとクライアントを関連付けるメソッド。
broadcast（ブロードキャスト）
stream_fromメソッドで関連付けられるデータの経路のこと。
作成の流れ
（１）アクションケーブルを実装するには、チャネルを作る。
（今回は、messageモデルとtext型でtextカラムを予め準備）
% rails g channel message
👉上記、コマンドで実装に必要な２つのファイル（app/channels/message_channel.rbとapp/javascript/channels/message_channel.js）が生成。
（２）app/channels/message_channel.rbの編集
stream_fromメソッドを使ってブロードキャストを作る。（ルーティングのようなもの）
（省略）
def subscribed
stream_from "message_channel"
end
（省略）
（３）コントローラーの編集
「保存に成功したら、ブロードキャストを通して、チャネルに向けて、メッセージデータを送る」と追記。
# app/controller/messages_controller.rb
（省略）
def create
@message = Message.new(text: params[:message][:text])
if @message.save
ActionCable.server.broadcast 'message_channel', content: @message
end
end
（省略）
（４）app/javascript/channels/message_channel.jsの編集
（３）のデータはJavaScriptファイルで受け取る。（receivedの引数dataに入る。）
import consumer from "./consumer"
consumer.subscriptions.create("MessageChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
const html = `<p>${data.content.text}</p>`;
const messages = document.getElementById('messages');
const newMessage = document.getElementById('message_text');
messages.insertAdjacentHTML('afterbegin', html);
newMessage.value='';
}
});
感想
今日は早めに起きて朝1時間、夜2時間15分行なった☺️
寝る3時間前に夜ご飯、寝る1時間半前にお風呂を心がけたからか、Apple Watchで測っている睡眠の質もよかった♪
自分がリラックスできる音楽があると良いとのことで、お風呂やドライヤーしている時に、Jackie Evanchoちゃんの音楽を聞き始めた。歌声が好き。癒される☺️
Action Cableについて、基本的な部分であればこんなに簡単に実装できるんだとびっくり。
「非同期通信といえば、JavaScript」というイメージがあり、ネット上の記事もたくさんみつかる。
Action Cableは簡単なのに、メジャーじゃないのは何故だろう？（私の知識不足なだけかもしれない）
デメリットなども調べてみた。接続部分や他のフレームワークの互換性がない＝再現性が低いのがデメリットなのかな。
他の記事も、Rails5から導入された機能として、2016年ごろの記事が多かった。今書いている人が少ないので使っている人も少ないのかな。
今回のミニアプリを通して、プログラマーの方たちは、すでにデプロイしている商品に対して、どういうタイミングで、どこで信頼性をもって、技術で取り入れるのかなと思った。そこの判断基準がまだ自分にはわからないので、そこも捉えられるような人になりたい。
覚書（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
