20201231_アウトプット(タグ付機能アプリ・新しいgem)

今日行ったこと　7時間45分

• タグ付機能アプリ　6時間30分　
  👉新しいgemの実践・完成✨

• オリジナルアプリ　1時間
  👉どうやったらカウント機能付けられるか

• PHP勉強　15分

新しい発見　

新しいgemについて

昨日、インストールしてみた新しいgem。
今日から、アプリで使ってみた。

rails_best_practices👉綺麗で読みやすいコードか確認できる

実践！

XXX@XXXnoMacBook-Air tagtweet % rails_best_practices .
Source Code: |====================================================================================|
/Users/XXX/projects/tagtweet/app/helpers/tweets_helper.rb:1 - remove empty helpers
/Users/XXX/projects/tagtweet/config/environments/test.rb:8 - remove trailing whitespace

Please go to https://rails-bestpractices.com to see more useful Rails Best Practices.

Found 2 warnings.

ヒットした2つのエラーについて調べてみたところ、

1. リロード時間を減らすためにも空のhelpers は使わないのであれば削除すること

2. 空の行を削除すること

という意味だと理解。

今回helpersについて削除してみた。空の行も削除した。

remove empty helpersについては何故消すのかはっきりした理由（メリット・デメリット）を見つけられず。

今回ミニアプリだったので消してみたけれど、helpersについては目に見えないけれど内部で動いている処理だと思うため、今後は消すかどうか最後の方に判断してもいいかもとも思った。

コマンド実行して、問題がないと、No warning found. Cool!って出てくるから嬉しかった。

brakeman👉SQLインジェクションやXSSなどの脆弱性に繋がるコードがないか確認できる

実践！

XXX@XXXnoMacBook-Air tagtweet % bundle exec brakeman -A -w1

（省略）

== Overview ==

Controllers: 1
Models: 1
Templates: 2
Errors: 0
Security Warnings: 1

== Warning Types ==

Missing Encryption: 1

== Warnings ==

Confidence: High
Category: Missing Encryption
Check: ForceSSL
Message: The application does not force use of HTTPS: `config.force_ssl` is not enabled
File: config/environments/production.rb
Line: 1

(補足)オプションでつけている-Aと-w1の意味ついて。
-Aは全てのファイルから探す。
-w1は全ての警告を出す。（1~3まであって3の高レベル警告だけ出す等も自分で指定できる）

オプションはこのサイトを参考にした。 brakemanscanner.org

ヒットした1つのエラーについて調べてみると、「HTTPプロトコルでも通信できるようになっているけどいいの？」という内容だと理解。

Railsガイドより(エラー内容の原因を調査)

Action Controller の概要 - Railsガイド

HTTPSプロトコルとHTTPプロトコルの違いは、HTTPSの方が暗号化されて情報が送られるのでより安全になる。
HTTPSでデータがやりとりされた方がいいと判断したのでエラーメッセージにあったコメントアウトを外した。
（勉強になった）

先ほどと同じように、問題がないと、No warnings foundって出てくるので嬉しかった。

2つのgemについて

実際に入れてみてどちらも良さそうだったので、今後のRailsアプリ作成時の必須gemの仲間入りにしようと思った。

（１）まずはgemを使ってエラーを見つけたら解決できるようになる 👉今日できたこと。 （２）解決できるようになったらチェックを自動化する 👉次回、チャレンジしてみよう☺️

memberとcollectionの違いについて

• ルーティングに設定するmemberとcollectionについて復習になった。

• 「member」は、「resources以外のメソッドを追加したい」且つ「id情報を伴うURIを生成したい」時に使用。👉購入機能など（特定必要）

• 「collection」は、「resources以外のメソッドを追加したい」且つ「id情報を伴わないURIを生成したい」時に使用。👉検索機能など（特定不要、結果を表示させるのみ）

• ”resources以外のメソッドを追加したい”というところが一番しっくりきた。７つのアクションの時には、自動でアクションを割り振る。idも必要か自動で判断してくれる。

• なので、７つのアクションの中に入れ構造にすることによって、「検索した後に詳細」「検索した後に削除」等が実現できるのかと復習になった。

オリジナルアプリ

• whenneverという定期実行してくれるgemを発見。AWSのデプロイの時に使ったCapistranoとの相性も良いとのこと。

github.com

PHP

switch文について。
その都度、breakが必要なことが勉強になった。

 <?php

    // 変数$numを定義し、好きな数字を代入してください
    $num = 0;
  
    // 変数$remainderを定義し、変数$numを3で割った時の余りを代入してください
    $remainder = $num % 3;
    // switch文を用いてください
    switch ($remainder){
    case 0:
      echo "大吉です。";
    break;
    case 1:
      echo "中吉です。";
    break;
    case 2:
      echo "小吉です。";
    break;
   default:
      echo "凶です。";
    break;
    }
  ?>

感想

• 今年を振り返ってみると、プライベートも会社も新しいことに色々チャレンジした一年だった。
  （プライベート：プログラミング・ICL・歯列矯正、　会社：新しいネットワークの構築・場づくり・仕組みの提案等）

• プログラミングを始めてよかったことは沢山あるけれど大きく３つ良いことがあった。

（１）自分の弱さに向き合う機会が多いこと。

• プログラミングは思うようにいかないことだらけだった。

• しかし、その機会が多いのでどうしたらいいかと試行錯誤する中で、他人との比較癖があったこと、弱い自分も受け入れるのが下手くそだったことに気がつけた。

• 今も、癖で、その感情が発動する事があるけれど「あ、その癖が発動しているから、気をつけよう」と自分の感情に対して外から見られるようになった。注意できるようになった。
  （以前は、それに気がつけず、苦しみの中にいた感じだったため、改善）

（２）良い人に巡り会えたこと。

• テックキャンプのスタッフや仲間に出会えたこと。

• うまくいかない時に色々弱音を吐いてきたけれど支えてくれたり、困った時に助けてくれた。

• 今まで家族と会社の繋がり以外、ほとんどなかったので、それ以外の方の価値観に触れられたことも良い刺激になっている。

• このブログやTwitterを始める事によって、銭神さんや岡山さんなど、考え方に共感して憧れるエンジニアに出会えたこと。少しでも繋がりをもてたこと。挫けそうになったときの自分の励みに繋がっている。

（３）好奇心が尽きない環境なこと。

• プログラミングは「どういう意味？」「何故？」「もっと知りたい」だらけなこと。

• 今も調べても分からないこともあるけれど、数ヶ月後みると以前よりも意味がわかるようになっていたり（最近だと自動化・デプロイ・環境構築・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
9	コメント機能(即時更新)	1/8
10	クレカ登録	1/10
11	パンくず	1/14
12	日本語エラー	1/18

身に付ける力（直近）

• PHP7

• Docker

身に付ける力（ゆくゆく・覚書）

• ドメイン駆動開発

• 環境構築

• 環境変数などのOS知識

• バージョン対応力

• データベースをインポートする力・エクスポートする

• GitHubActions×OpenAPIGenerator（APICilent）

20201230_アウトプット（タグ付機能・オリジナルアプリ）

今日行ったこと　5時間15分

• 要件定義の提出　1時間
  👉提出完了

• タグ付機能アプリ　1時間　
  👉新しいgemの開拓・イシューの作成

• オリジナルアプリ　3時間
  👉どうやったらカウント機能付けられるか

• PHP勉強　15分

新しい発見　

新しいgemを取りれてみた。

ルボコップのように入れておくと便利なものはないか調べていたところ、２つのgemを見つけた。

• rails_best_practices👉綺麗で読みやすいコードか確認できる

• brakeman👉SQLインジェクションやXSSなどの脆弱性に繋がるコードがないか確認できる

どちらもアプリケーションにとってメリットがあると感じたため、ミニアプリに入れてみた。

両方とも、ルボコップのようにコマンドを実行するとエラーがないか確認開始されるものだと理解。 今日は、ミニアプリにエラー内容をhtml化できるように設定するところまで完了した。

（１）まずはgemを使ってエラーを見つけたら解決できるようになる
（２）解決できるようになったらチェックを自動化する
のステップで、身に付けていきたいと思っている。

オリジナルアプリ

• 「アプリが成立する上でこの機能が必須」という部分はどこか再考。

• その上で小さい毎日の習慣を「カウント」する機能は必須だった。

• しかし、その機能をどうやって形にすればいいか分からなかったので、調べたり、過去のJavaScriptアプリをいじって方法を模索。

• JavaScriptアプリをいじる際、コピーで複製したが、database.ymlにおいて設定しているのデータ保存先を、新しいアプリ名に変更しないと、過去のデータベースにカラムが追加されてしまうことを新しく学んだ。

• JavaScriptアプリを実際にいじってみることで、リロードすると数字が消えてしまうので、保存するのであれば、サーバーサイドとのやりとりが必要になることに気づけた。

PHP

• Rubyで使えるelsifは、phpだとelseifでないと使えないことに気がついた😱

• 何度やってもプロゲート で進まなくて、詰まっていたら、間違いはそこだった。勉強になった。

感想

• オリジナルアプリは、まず必須機能を形にできたら、ビューを整えようと思った。

• もう一度、計画を整理したおかげで、楽しみながら今日できたからよかった。

• オリジナルアプリを作る時（必要な機能の実装を考える時）、当たり前かもしれないけれど「どういう機能をつけたいのか」の前提を明確にしないと実装方法も定まらないことを痛感した。例えば、習慣を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
9	コメント機能(即時更新)	1/8
10	クレカ登録	1/10
11	パンくず	1/14
12	日本語エラー	1/18

身に付ける力（直近）

• PHP7

• Docker

身に付ける力（ゆくゆく・覚書）

• ドメイン駆動開発

• 環境構築

• 環境変数などのOS知識

• バージョン対応力

• データベースをインポートする力・エクスポートする

• GitHubActions×OpenAPIGenerator（APICilent）

20201229_アウトプット（SNS認証によるログイン機能の実装・複数条件検索の実装）

今日行ったこと　10時間35分

• SNS認証によるログイン機能の実装　6時間5分
  👉完成✨

• 複数機能検索の実装　4時間30分
  👉完成✨
  
  

新しい発見

SNS認証によるログイン機能の実装について（Facebook・Googleアカウント）

今回の仕様

• 「Facebook/Google登録を押すと（SNS認証を挟み）ニックネーム＆メールアドレスが入力された状態でユーザー登録が始まる

• SNS認証での新規登録の際は、パスワードが自動生成され、ユーザーはパスワードを入力しなくて良い

流れ	処理内容	理解した部分
1	クライアントサイド側から入力によりFacebookあるいはGoogleの認証が開始
2	サーバーサイド側はWebAPIに対し、リクエストを送る	omniauth_callbacks_controller.rbにauthorizationメソッドを定義して、「API使わせて！」と送る。
3	認証を経て、コントローラーにSNSに登録されている情報が送られる	models/user.rbにクラスメソッドを定義して、APIから受けた情報を受け取るための引数を定義する。
4	SNSの情報から、ユーザー情報のみを取得して、既存のユーザー情報と照合を行う	providerとuidを使って、SnsCredentialモデルにSNS認証したことあるか探しにいく。 ⚠️first_or_createメソッドを用いる。 ある→user_idとの紐付け（ログイン処理）。 ない→providerとuid保存しつつ次のステップへ（下記の新規登録画面へ）。
5	その照合結果から、今回SNSで認証されたユーザーが、すでにアプリに登録されているユーザーなのか判断する	メアドで検索。 ⚠️first_or_initializeメソッドを用いる。 ある→ニックネームとメールアドレスをビューに返す(入力の手間を減らす)パスワードは自動生成するよう実装したためhidden（ビューで条件分岐） ない→新しくインスタンスを作る。

大きな流れとしては、
（１）認証に必要な専用gemを導入する。
（２）環境変数を設定する。
（３）gemのメソッド、プレフィックス、引数等を使いながら、データの受け渡し・既にあるユーザー情報との照合・必要なユーザー情報の取得を行う。
と理解。

間違えていたら教えてください！💦

複数条件による検索(ransack)

新しく学んだこと

ポイントとしては、

1. 【導入】 ransackというgemを導入すること。（メソッドが使えるようになるため）

2. 【生成・運ぶ】コントローラーで「検索オブジェクト」を生成。具体的には:pをパラムスとした「検索オブジェクト」を生成し、運ぶ準備をする。

3. 【該当したものを判断して表示】ビューでransackのメソッドを使い、上記で運ばれてきたものの中から一致するものを表示する。

ということを理解。

（１）ransackというgemについて

• シンプルな検索フォームと高度な検索フォームの作成を可能にするgem。

• gemの話とずれるが、下準備として、seedファイルが活用できることを理解。
  （本番環境において、seedファイルを作成するには、heroku run rails db:seedが必要であることも新しい気づきだった。）

（２）コントローラーの設定について

• N＋1（DBへのアクセス回数が増えパフォーマンス低下）問題を解消するために、includes(:紐付くモデル名)を活用すること。（復習になった）

  # @pに対して「.result」とすることで、検索結果を取得している
  def search
    @results = @p.result.includes(:category) 
  end

• はじめに読み込むようにするために、プライベートメソッドに検索オブジェクトを生成すること。

  def search_product
    @p = Product.ransack(params[:q])  # 検索オブジェクトを生成
  end

• データを取得する際に、重複しているものを削除するdistinct（ディスティンクト）メソッドがあると理解。

• これも、はじめに読み込ませたいので、プライベートメソッドに定義する。（カラムごとに変数を定義）

  def index
    @products = Product.all
    set_product_column       # privateメソッド内で定義
  end

（省略）

  def set_product_column
　# 重複なくnameカラムのデータを取り出す
    @product_name = Product.select("name").distinct  
  end

（３）ビューの設定について

• search_form_forとcollection_selectという２つのメソッドを使用した。

• search_form_forは、ransack特有の検索フォームを生成するヘルパーメソッド 。（「form_forのransack版」というイメージ。）

• collection_selectは、DBにある情報をプルダウン形式で表示できるヘルパーメソッド 。

collection_selectの詳細について

<%= f.collection_select 第一引数, 第二引数, 第三引数, 第四引数, オプション %>
という形で使う。

今回は以下のような実装をした。
<%= f.label :name_eq, '商品名' %>
👉「選択した商品名に合致するものを選ぶ」とラベル指定。
<%= f.collection_select :name_eq, @products, :name, :name, include_blank: '指定なし' %>
👉「ラベル」の中身をプルダウン形式で表示するためにDBから取ってきて表示。

引数	役割
第一引数（メソッド名）	（今回で言えばラベルに指定した）どのname属性、id属性をプルダウンにするか決める
第二引数（オブジェクト）	コントローラで定義している配列データ（変数）を指定
第三引数（value）	参照するDBのカラム名
第四引数（name）	実際に表示されるカラム名
オプション	何も選択していないときに表示される内容

感想

• 今日は岡山さんのTwitterのきっかけで「Tech Kids Grand Prix 2020 」を見た。凄すぎ😲

techkidsschool.jp

凄いと感じたところ

• 自分が小学生の頃、ゲームを作る側に回るっていう発想がなかった。

• 質問に対して「こう思う」と自分の言葉で表現できている。

• アイデアが柔軟で面白い。一番発想で印象的だったのが、TATAという小さな頃から一緒に寝ているぬいぐるみが朝起きるとベットの下に落ちていて僕が寝ている間に遊んでいるのではないかという発想。可愛い。しかも、そこからゲームの構造に持っていっていて形にしている。（僕が朝起きるまでの制限時間内に⭐️を獲得する。途中、音を出す・僕の視線に当たる・ママに見つかるとゲームオーバー）TATAの視線が左下にあって、ユーザー目線の実装までしている・・。すご！

• プログラミングだけでなくて、音楽・バスケ・書道など自分のプログラミング以外の好きなこととを、掛け算にして形にしている。（プログラミング技術だけでも凄いのに、それ以外にも夢中になれること複数ある）

• 皆に共通していたのは「楽しんで取り組んでいる」ことだった。

動画を見ながら、ついつい「卑下する気持ちになる自分」と、「それを今いってもしょうがない。今プログラミングの楽しさに気づけたのだから良かったんだ」と感じる自分がいた。

グランプリに出ていた小学生たちは、何がきっかけでプログラミングに出会ったのだろうか。新しい技術を取り入れるときに、どうやって実装して行っているのだろうか。日々どんな風に継続して行っているのだろうか。 そんな疑問を感じた。

比べても自分が成長するわけではないので、憧れの気持ちを抱きつつ、自分のスキルを一つずつ身に付けていこうと思った。

悩み・今の感情

• ここ最近「〇〇をやろう」がいっぱいあって「追われている」感じになってしまっていた。

• 上記の状況だと、どんなに取り組んでも足りないのではないかと焦る気持ちになってしまう。

• 調子がいい時は、目標のために行うタスクについて、ゲーム感覚で達成していくような感じを持てている。（勉強が終わった後に「ここまでやった！」、プラスでやっている部分に対して「ボーナスタイム！」という感覚。）

• 「余裕がない（気持ちの焦り）→計画の見直し→良い調子」の波があるように感じる。「良い調子」が続くように、再現性を持たせられるようにはどうしたらいいか。今一番、そのことについて悩んでいる。

• 原因は「計画」ではないか。自分にあっていないから、予測を立てられていないから、自分が立てた計画に自分が苦しめられているのではないかと思った。

• 達成しようがしまいが、結果を受けるのは自分なので、それなら楽しんでやりたい。一つずつ着実に力をつけていきたい。

覚書（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

身に付ける力（ゆくゆく・覚書）

• ドメイン駆動開発

• 環境構築

• 環境変数などのOS知識

• バージョン対応力

• データベースをインポートする力・エクスポートする

• GitHubActions×OpenAPIGenerator（APICilent）

20201228_アウトプット（SNS認証によるログイン機能の実装・オリジナルアプリ）

今日行ったこと　8時間45分

• オリジナルアプリ（要件定義・画面遷移）6時間35分
  👉「大きい目標」にあたる部分のフォーマット（カラムに繋がる部分）や、「小さな習慣」の可視化にあたる部分について、どうやったら使ってもらえるのだろうか（使いやすいのだろうか）フックモデル
  👉そもそも現実的に現在の技術で実装できるのか（カレンダーを塗りつぶす機能） などについて考えていた（なかなか思うように進まない）

• SNS認証によるログイン機能の実装　2時間10分
  👉”SNS認証の場合にパスワードが自動生成される部分”が上手くいかず明日に持ち越し。
  
  
  

新しい発見

SNS認証によるログイン機能の実装について（Facebook・Googleアカウント）

• SNS認証を実現するには、ドキュメントにあるメソッドを実装していく。

OmniAuthのGithub↓

github.com

google-oauth2のGithub↓

github.com

流れ	処理内容
1	クライアントサイド側から入力によりFacebookあるいはGoogleの認証が開始
2	サーバーサイド側はWebAPIに対し、リクエストを送る
3	認証を経て、コーンとローラーにSNSに登録されている情報が送られる
4	SNSの情報から、ユーザー情報のみを取得して、既存のユーザー情報と照合を行う
5	その照合結果から、今回SNSで認証されたユーザーが、すでにアプリに登録されているユーザーなのか判断する
6	【既存のユーザーがいない】新規登録画面に遷移する
7	【すでに既存のユーザーだった】ログイン処理を行う

【コントローラー】

• authorizationと呼ばれるメソッドをprivateメソッド内に定義。

• facebookとgoogle_oauth2というアクションを定義。

【ビュー】

• link_toを使って、コントローラーのアクションが呼び出されるように定義。

• プレフィックスとHTTPメソッドは、OmniAuthのGitHub通りにかく。（例　user_facebook_omniauth_authorize_path, method: :post）

上記の部分まで理解。

• 本番環境について。環境変数を設定しても、そもそものURLをAPIとして使うことの申請していなければ使えないことに気が付く。

オリジナルアプリ（要件定義・画面遷移）について

• 要件定義と画面遷移について考えて、書き出し。

• 銭神さんのフックモデルのつくりかたを見ながら、考えて書き出し。

感想

• オリジナルアプリ、思うように進まない😓

• 何故か理由を考えると、技術的にどうやって実装したらいいかを考えてしまい（見通しが立たなくて）不安になってしまったこと。

• 上記が不安になってくると、そもそもこの機能で本当にユーザーは使いたい気持ちになるのだろうか？という部分まで不安になってきたこと。

• 今、日記を書いていると（客観的に見ると）自分のためのアプリだから、不安な気持ちはわかるけど、どこまで実装できるか試してみようくらいの気持ちで進めていかないと前に進まないと感じた。

• あと、今日は、オリジナルアプリを先に考えた後、夜ミニアプリのコードを進めた。それだとオリジナルアプリが上手くいかなければいかないほど「前に進んでいない感覚」となり、気持ち的に焦ったため、明日からはミニアプリ作ってから、オリジナルアプリを図に落とし込む作業をしようと思った。

• あと銭神さんがTwitterで言っていた環境変数のやる時間をあらかじめ決めておくのと同じように、PHPをやる時間を毎日一日15分（目標は小さめに）行なおうと思った（この調子だとPHPについて後回しにしてしまい、全く勉強出来なさそうだと危機感を感じたため）

覚書

ミニアプリ（目的：知識の引き出しを増やす）

• コメント機能の実装

• ウィザード形式の実装

• SNS認証によるログイン機能の実装

• 複雑な検索機能の実装

• タグ付機能の実装

• パンくず機能の実装

• クレジットカード決済機能（ユーザーに紐付け）

• エラーメッセージの日本語化（チャットアプリに追加実装）

• プレビュー機能の実装・複数枚の画像投稿の実装

優先順位

（１）ミニアプリの作成（実装方法の理解）・個人アプリのためのインタビュー・DB設計等
👉12月29日（火）締め切り

（２）個人アプリの作成。
👉1月11日（月）締め切り（基本実装）

（３）（１）で学んだことを「フリマアプリ」あるいは「個人アプリ」に反映。
👉1月17日（日）締め切り

追加：（１）（２）（３）と同時並行で、PHPについても学ぶ。

身に付ける力（直近）

• PHP7

• ドメイン駆動開発

• Docker

身に付ける力（ゆくゆく・覚書）

• 環境構築

• 環境変数などのOS知識

• バージョン対応力

• データベースをインポートする力・エクスポートする

• GitHubActions×OpenAPIGenerator（APICilent）

20201227_アウトプット（SNS認証によるログイン機能の実装・ユーザーインタビュー）

今日行ったこと　8時間30分

• SNS認証によるログイン機能の実装　5時間30分
  👉今日からスタート、60％進む

• ユーザーインタビュー（2人にインタビュー）　
  👉インタビュー総時間：40分
  👉インタビュー内容をまとめ・オリジナルアプリの練り直し：2時間20分
  （ペルソナ・要件定義について練る・実装方法の検索）

新しい発見

SNS認証によるログイン機能の実装について（Facebook・Googleアカウント）

• omniauth（オムニオース）というGemを使う

• CSRF脆弱性（ログインしたままの状態を狙われて攻撃される）を対策するため、omniauth-rails_csrf_protectionというGemも使う

• 「env」は「environment（インバイラメント）」の略と知る。（「環境」という意味。そのままだ😅）

• SNSによるユーザー認証を行うということは、入力すると、アプリケーションを通して、APIに対して「教えて」とリクエストする。

• 「教えて」の返事として、こちらが欲しいユーザーの個人情報と共に、「uidとprovider」が送られてくる。（Facebookの識別子何番のお客さんの情報どうぞ）

• そのレスポンスが返ってくるタイミングと、ユーザー情報を保存するタイミングは異なるため、「uidとprovider」を保存するための別モデルを作成することを学んだ。（今回は、SnsCredentialモデル）

オリジナルアプリの構想について

ユーザーインタビューについて

いろんな方の「良い習慣」や「悪い習慣」などを聞いて視点が広がったのはもちろんのこと、以下のことに新しく気がつけた！

• どんなユーザーに対して届けたいか（ペルソナ）と機能のずれ

• 自分が「ここまでやった✨」と上手にバランスを保てている人は、記録していなくても継続出来ている

👉「付けたい機能盛り沢山」な状態になりつつあったことを反省😅
👉ユーザーが解決したい問題はなんだろうか、それを実現するための機能は何か
👉途中、この機能ってどうやって実装するんだろう（Gem等あるのかな）と脱線

感想

• 今日までで合計9人にインタビューすることが出来た。（本当にありがとうございました）

• 機能をシンプルにする、というのが難しい。目的がぶれているとも感じた。（ペルソナの2年前の自分と今の自分、欲しいものがごっちゃ）

• 今日の反省としては、色々機能に夢が広がり、どんな風に実装するんだろう😍と、調べたこと。目的から逆算して、必要な機能を検索するのではなく、目的が曖昧なまま、「こんな機能あったら良いな」を色々調べていたため進まなかった。

• 銭神さんのRailsデザインパターンまとめ、分かりやすいなあ。

• 必要な機能を実装したアプリはもちろんのこと、デザインパターンのようなルールに沿ったアプリを作りたい。（開発者にとっても良い→コードの再現性、見やすさ→改善がしやすいので後々ユーザーに還元）

• 予定の立て方、無理あったので方向修正しよう。

• 嬉しかったこととしては、「GitHubを使いながら、アプリを開発環境と本番環境で作っていくこと」について上達したこと。今まではその都度、カリキュラムを見直して「えっと、、次はこのコマンド」ってやっていたけれど、「自分がよく使うコマンド」メモを作り、「次はこれだな」と頭の整理が出来てきたこと。（なるべく手間を省きたい&綺麗に作りたいため、GitHubのプルリクのフォーマットなども「自分がよく使うコマンド」メモに貼り付けている）

覚書

ミニアプリ（目的：知識の引き出しを増やす）

• コメント機能の実装

• ウィザード形式の実装

• SNS認証によるログイン機能の実装

• 複雑な検索機能の実装

• タグ付機能の実装

• パンくず機能の実装

• クレジットカード決済機能（ユーザーに紐付け）

• エラーメッセージの日本語化（チャットアプリに追加実装）

• プレビュー機能の実装・複数枚の画像投稿の実装

優先順位

（１）ミニアプリの作成（実装方法の理解）・個人アプリのためのインタビュー・DB設計等
👉12月29日（火）締め切り

（２）個人アプリの作成。
👉1月11日（月）締め切り（基本実装）

（３）（１）で学んだことを「フリマアプリ」あるいは「個人アプリ」に反映。
👉1月17日（日）締め切り

追加：（１）（２）（３）と同時並行で、PHPについても学ぶ。

身に付ける力（直近）

• PHP7

• ドメイン駆動開発

• Docker

身に付ける力（ゆくゆく・覚書）

• 環境構築

• 環境変数などのOS知識

• バージョン対応力

• データベースをインポートする力・エクスポートする

• GitHubActions×OpenAPIGenerator（APICilent）

20201226_アウトプット（ウィザード機能の実装・ユーザーインタビュー）

今日行ったこと　9時間

• ウィザード形式の実装 2時間30分
  👉詰まっていたところ自己解決できた〜！嬉しい〜！

• ユーザーインタビュー（5人にインタビュー）　
  👉インタビュー総時間：2時間30分
  👉インタビュー内容をまとめ・オリジナルアプリの練り直し：4時間
  （リーンキャンバスの作成・ペルソナの作成）

新しい発見

ウィザード形式の実装について

20201224_アウトプット（ウィザード形式の実装） - ちぇりころ日記

この日から詰まっていたform_forをform_withにする実装だが、朝ひらめいて出来た〜！！！

ユーザー情報登録

【before】

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>

【after】

<%= form_with model: @user, url: user_registration_path , local: true do |f| %>

ポイントとしては、
画面上、エラーは出ないけれど画面遷移しない（動かない）原因はlocal: true doだった。
（HTMLとしてフォームを送信する際は、つける必要があるlocal: true do。）
あとは、beforeと違い、resourceでモデルを探しに行ってくれているわけではないため、urlのパスとしてuserをつける必要があると理解。
（その後の、プレフィックス後の(resource_name)をつけていたら、「引数の数違う」とエラー出た）

住所登録情報

【before】

<%= form_for @address do |f| %>

【after】

<%= form_with model: [@address] , local: true do |f| %> 

ポイントとしては、
「住所情報」はルーティングで「ユーザー情報」の中にネストされているため、モデルのバリューを[ ]で囲う必要があると理解。

オリジナルアプリの構想について

ユーザーインタビューについて

いろんな方の「良い習慣」や「悪い習慣」などを聞いて視点が広がったのはもちろんのこと、以下のことに新しく気がつけた！

• 自分の仮説について説明が足りない（前提）

• それぞれ、重きをおいているところ（目標を立てる・計画を立てる・行動に落とし込む・振り返る等）が異なるが、「手間が少ない」「タイミングが決まっている」が今のところ共通している。

• すでにあるアプリも見て、それにはない価値を付けようと気づけた。（すでにある習慣のアプリを教えてもらい、他のアプリそういえば調べてないやと気づけた）

プロダクトマネジメント入門について

product-development.io

• この左側の軌跡？がとてもわかりやすい😭

• 先にプロブレムインタビューをしてしまっていたことに気づいたため、明日せっかくインタビューがあるので、聞きたいことに漏れがないよう「リーンキャンバス」「ペルソナ」を行った。

• リーンキャンバスは「収益の流れ」「コスト構造」「主要指標」が難しかった😭しかし、こういうのも必要なのかと初めて気がつけたので、100％わからなくとも、引き出しとして持っておこうと思った。

• ペルソナは、２年前の私にしたので比較的書きやすかった☺️明日、昔のノート引っ張り出して、共感マップもやってみよう。

感想

• 5人もインタビューに答えてくれる人がいて幸せだった。優しい。（目標人数5人だったので、現在7名✨目標を超えられて嬉しい。）ありがとうございます！！

• 明日も2人、受けてくれる方がいるので、楽しみ☺️

• インタビューをするたびに、一人で「こんなアプリ作りたい！」と当初構想していたアプリに比べて、より客観的なエッセンスを入れられていると思うので、やってよかった！！（聞くたびにいろんな視点があって面白い。インタビューが終わるたびに、良い方向性に微修正出来ていると思う。）

• たまたま銭神さんの記事に出会えてよかった！！初オリジナルアプリだけど、楽しみながら頑張って作りたい＾＾

覚書

ミニアプリ（目的：知識の引き出しを増やす）

• コメント機能の実装

• ウィザード形式の実装 👉12/23 70％

• SNS認証によるログイン機能の実装

• 複雑な検索機能の実装

• タグ付機能の実装

• パンくず機能の実装

• クレジットカード決済機能（ユーザーに紐付け）

• エラーメッセージの日本語化（チャットアプリに追加実装）

• プレビュー機能の実装・複数枚の画像投稿の実装

優先順位

（１）ミニアプリの作成（実装方法の理解）・個人アプリのためのインタビュー・DB設計等
👉12月29日（火）締め切り

（２）個人アプリの作成。
👉1月11日（月）締め切り（基本実装）

（３）（１）で学んだことを「フリマアプリ」あるいは「個人アプリ」に反映。
👉1月17日（日）締め切り

追加：（１）（２）（３）と同時並行で、PHPについても学ぶ。

身に付ける力（直近）

• PHP7

• ドメイン駆動開発

• Docker

身に付ける力（ゆくゆく・覚書）

• 環境構築

• 環境変数などのOS知識

• バージョン対応力

• データベースをインポートする力・エクスポートする

• GitHubActions×OpenAPIGenerator（APICilent）

20201225_アウトプット（PHP・ウィザード形式の実装）

今日行ったこと　3時間10分

• PHPの学習（プロゲート）40分

• ウィザード形式の実装 2時間半 👉引き続き、詰まっている。前提の確認。メンターさんに質問もした。

新しい発見

PHPについて

• Rubyのputのような感覚でecho（エコー）で表示させる。

• 文章の終わりにセミコロン;がいる。

• 文字列・数値の表示、演算子系や条件分岐について、Rubyとほぼ同じ（elsifも使える👉12/30訂正！elseifだった💦）

• 変数には$をつける。

• 式展開も$をそのまま使う形となり、Rubyなら#{〇〇}がPHPだと{$〇〇}になる。（変数展開という）

• 文字列の結合にはドット.を用いる。

• ++の記入する位置によって、足し算（--の場合は引き算）されるタイミングが異なると理解。

$x = 3;
$y = 3;

echo ++$x; 
//結果は4。`echo`の前にプラス１されるため。

echo $x++; 
//結果は3。`echo`の後にプラス１されるため。

form_withに変更したいが上手くいっていない状況について（未解決、前提を整理）

そもそもform_forとform_tagの違いは何か？（復習）

保存するテーブルが存在するときにはform_for。
そうでない場合（検索などの入力フォームだけ作りたい）はform_tagと理解。

form_withは何か？（復習）

【Rails】form_withの使い方を徹底解説！ | Pikawaka - ピカ1わかりやすいプログラミング用語サイト

form_forとform_tagの機能をあわせ持つもの。(rails5.1から新しく出来た)

# データベースに保存しない時の書き方
<%= form_with url: プレフィックス do |form| %>
  フォーム内容
<% end %>

# データベースに保存しない時の書き方
<%= form_with model: モデルクラスのインスタンス do |form| %>
  フォーム内容
<% end %>

resourceって何？

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: @user %>

• ここで出てくるresourceは、どのようなModelのインスタンスが来ても大丈夫なように定義できるもの。as:オプションにより、params[resource_name]で参照できるようになることを理解。

Ruby on Rails - deviseのform_forに関して｜teratail

よくわからなかったコントローラーについてすっきり

今回のコントローラーで一番意味わからなかったところ（抜粋）

　（省略）

def create
    @user = User.new(sign_up_params)
    render :new and return unless @user.valid?

    session['devise.regist_data'] = { user: @user.attributes }
    session['devise.regist_data'][:user]['password'] = params[:user][:password]
    @address = @user.build_address
    render :new_address
  end

　（省略）

session['devise.regist_data'][:user]['password'] = params[:user][:password] の意味がわからなかった😭何で配列横に並んでるのー😩（メンターさんに聞いた）

間違えていたところ

session[:user]もsession['password']も空だし、何の意味があるんだろう？と思っていた↓

正しくはこうだった

params[:user]とparams[:user][:password]と調べるとちゃんと値でる。↓

上記のことから、session['devise.regist_data'][:user]['password'] = params[:user][:password]の意味が、 session['devise.regist_data']に、params[:user][:password]を付け加える意味なのかとわかってすっきりした。

感想

• 細かいところで詰まってしまっているけれど、こういう時こそ、成長の糧になると思って頑張る。

• そんな時（本当はもっと早く進みたい、追加実装の一つ目でなぜこんなに詰まっているのかと考えている時）に、ご飯中にyoutubeでたまたま見ていたイチロー選手のインタビューで「人より頑張ることは出来ない。はかりは自分の中にある。自分なりにそのはかりを使いながら自分の限界を見ながらちょっと超えていく。それを繰り返していく。そうするといつの日かこんな自分になっているんだっていう状態になる。なので小さい積み重ねでしか自分を超えていけない。一気に高みに行こうとすると、今の自分とギャップがありすぎて続けられない。ある時期は後退しかないこともあるが、自分がやると決めたことを信じてやっていく。ただそれが正解とは限らない。遠回りすることでしか本物の自分に出会えない。」という記者会見をみて、すごい励みになった😫♡

覚書

ミニアプリ（目的：知識の引き出しを増やす）

• コメント機能の実装

• ウィザード形式の実装 👉12/23 70％

• SNS認証によるログイン機能の実装

• 複雑な検索機能の実装

• タグ付機能の実装

• パンくず機能の実装

• クレジットカード決済機能（ユーザーに紐付け）

• エラーメッセージの日本語化（チャットアプリに追加実装）

• プレビュー機能の実装・複数枚の画像投稿の実装

優先順位

（１）ミニアプリの作成（実装方法の理解）・個人アプリのためのインタビュー・DB設計等
👉12月29日（火）締め切り

（２）個人アプリの作成。
👉1月11日（月）締め切り（基本実装）

（３）（１）で学んだことを「フリマアプリ」あるいは「個人アプリ」に反映。
👉1月17日（日）締め切り

追加：（１）（２）（３）と同時並行で、PHPについても学ぶ。

身に付ける力（直近）

• PHP7

• ドメイン駆動開発

• Docker

身に付ける力（ゆくゆく・覚書）

• 環境構築

• 環境変数などのOS知識

• バージョン対応力

• データベースをインポートする力・エクスポートする

• GitHubActions×OpenAPIGenerator（APICilent）