CSVデータの読み込み
アプリを作る際に材料リストをGoogleのスプレッドシートで作成しました。 データの数が多いので、自動で取り込む方法を検索し、ファイルをCSV変換してRubyでデータを取り込む方法を発見しました。 CSVデータを使おうと思ったのはGoogleのスプレッドシートから簡単に変換できるからです。
CSV読み込みのメソッドについて調べると以下2つが見つかりました。
CSV.readメソッド
指定パスのCSVファイルの内容を変数の中に一気に読み込むメソッド
https://docs.ruby-lang.org/ja/latest/class/CSV.html#S_READ
CSV.foreachメソッド
CSVファイルから1ずつ行(データ)を読み込むため、大量のデータが格納されたCSVファイルを読み込む時に向いているメソッド
データの量が多かったのでCSV.foreachメソッドを使用することにしました。
実際の方法についてはこちらを参考にさせていただきました。
rake db:seedを使った初期データの投入 - Ruby on Rails入門
以下がコードとCSVデータの抜粋
require "csv" CSV.foreach('db/menutable_app_food.csv', headers: true) do |row| Food.create( name: row['name'], ancestry: row['ancestry'], keyword: row['keyword'], unit: row['unit'] ) end
https://scrapbox.io/files/6302e2c309c2a20020cdd64f.png
実行してみた結果
なぜか、200件あるうちのデータが9件のみしか取り込めていませんでした。
リトライ⑴
リトライする前に行ったこと
何したらいいのかわからなかったのでひとまず再度参考にした
rake db:seedを使った初期データの投入 - Ruby on Rails入門
を見ながらCodeを確認。
データベース上のカラム名にズレがないか、タイプミスないかを確認しました。
再度実行しましたが結果は変わらず。
リトライ⑵
リトライする前に行ったこと
⑴データベース上のテーブルの再設定
カラムの設定が合っていないかもしれないと考えて、一度データベース上のデータを全削除し、テーブルも削除。再度テーブルを作成しました。
⑵コード一度削除し、再度書き直す
自分の目で確認はしましたが、タイピングミスがあるのかもしれないと考え、念の為コードを再度書き直しました。
再度実行しましたが結果は変わらず。
その後もコードを少しずつ書き換えてリトライ②の工程を2〜3回繰り返しました。
リトライ⑶
リトライする前に行ったこと
⑴「ruby csv取り込み できない」で検索して対処法を探す
何らかのエラーメッセージが出てきてるパターンがほとんどで私と同じようなパターンは見つかりませんでした。 ただ、いろいろなサイトを見て、CSVデータはコンマでデータを区切ったものであり、エクセルからCSVデータに変換するときに文字化けするケースがあるとのことを発見しました。
⑵ CSVデータを確認
文字化けしていてデータが読み取れないのかと思いCSVデータを確認することにしました。取り込めたデータとそれ以外のデータを比較しましたが、コンマの数も同じ、文字化けもありませんでした。
⑶ CSVデータの再作成
一応やっておくのが無難かなと思いエクセルから再度CSV変換し、ファイルを作成。前のCSVデータと入れ替えました。
再度実行すると、成功!
全部データが取り込めました!
原因は何だったのか?
CSVデータを入れ替えたことで成功したので、成功したファイルと失敗したファイルを比較してみました。
カラム名の部分、1つコンマが多い。 なぜ多くなってるのか、原因はわかりませんでした。 (全く同じスプレッドシートから作成したcsvファイルは問題なかったです。)
カラムの数が多くなるので、ひとつづつデータの値がずれる
↓
ancestryのカラムに文字列のデータが送られたためエラーが発生、ancestryがnilとなっていたデータのみが取り込めた
↓
結果 200件あるうちのデータが9件のみ取り込めた
しかし、取り込めたデータも確認するとancenstry:nilとなっていてカラムの内容もずれてましたので、1つとして成功はしてませんでした。
今回の学び
⑴エラーメッセージないと困ること
ここ変だよ!って教えてくれるエラーメッセージってありがたいものだったんだなと思いました。
調べたところ、create!を使用するとエラーメッセージが表示されるので、今後は活用していきたいと思います。
ちなみに今回のケースもcreate!を使用すると
ActiveRecord::RecordInvalid: Validation failed: Ancestry is invalid
とエラーメッセージが出ました。
⑵ トラブルシューティング
トラブルが起きた時に私は闇雲に全部見てみるとか書き換えるなどをしてしまいます。調べてみた所、巷には以下linkのような基本的なトラブルシューティングに向き合うときに使える考え方があるようです。
今回の場合は、問題の切り分けとして、
- データが悪い
- プログラムが悪い
の大きく2つの方向性で原因調査にあたれると考えられるので、今後はこうした切り分けを行った上で解決していけたらとおもいます。
アプリ作りの流れ
アプリを作るにあたり、一連の流れがわかるものが欲しいと思い、1冊ですべて身につくHTML & CSSとWebデザイン入門講座を読みながら進めました。
制作の流れ
1.企画を立てる
Webサイトの目的:夕飯決めの流れを楽にするために’メニュー決めたら買い物リスト作る’ なぜこのアプリを作ったのかに詳細を書いたので省略します
2.サイトマップを作る
サイトマップとは?
サイト全体にどのようなコンテンツがあり、各コンテンツがどのような動線でつながっているのかを可視化したもの
1)欲しい機能を書き出す
- ログイン機能
- アプリの使い方の説明
- レシピの登録・編集
- メニューの登録・編集
- 買い物リストの作成・編集
2)必要なページを書き出す
3)サイトマップを作成する
サイトマップのツールもあるようでしたが今回はGoogleのスプレッドシートで作成しました。
必要なページをグループ分けし、階層が多くならないように必要なものを絞りました。
1つのページに複数の機能が集まると使いにくいと思ったので絞り込むのが意外と難しかったです。
サイトの構成図
3.ワイヤーフレームを考える
ワイヤーフレームとは?
webページのレイアウトを定めるもの
凝ったものを作る予定がないので、iPadのGoodnoteを使って作成することにしました。
よく使う項目などを見やすい位置に設置することに注意して決めました。
ワイヤーフレームは主に配置などを決めていっただけだったのでGoodnoteを使って手書きでも問題なく進めていくことができました。
4.デザインを考える
ワイヤーフレームが決まったので細かいデザインの設定に移ります。
フォントの種類、配色、大きさなど細かい設定が必要となり、自分で決めていくのはとても楽しかったです。
しかし、
- 決めなければいけないものが多い
- 配色などの知識がないので決めていくうちにズレが生じる
- 情報量が多くて管理できない
と課題が出てきたためGoodnoteのみでデザインを決めていくのは難しいと感じるようになりました。
UIデザインツール
何か役立つものはないか調べてみました。
私が求めているのは - 導入が簡単 - 費用が安い - 操作が簡単 - 配色、配置設定など機能は最小限
Webデザイナーを目指してるいるわけではないのでデザインの勉強はしていませんでした。
高機能よりも基本的なものを抑えられていて、操作の少ない簡単なものをという考えです。
figma
UIデザインやワイヤーフレームの作成に便利なデザインツールで、以下の点が自分に合っていると思い使い始めました。
- WEBブラウザ上で作業
登録のみで導入しやすい。ブラウザが開ければどこでも使用できる。
- 操作がシンプル
操作がシンプルで初心者でも使いやすい
- 図形描画ツールやテキストツールなど一通りデザイン制作に必要なツールや機能がある
パワーポイントの操作に似ていて初心者の私でも抵抗なく使用できたのが1番のポイントでした。
無料で使用できるツールは他にもありましたが今の自分に合ったシンプルなものを導入してみました。
使用してみてよかった点
1ページ完結ではなくWebアプリ全体のデザインをイメージしやすく、操作や使用感を考えてデザインができました。 色や配置、大きさなど細かいものをも数値で入力表示されるので、統一しやすく微調整の時間など作業時間を削れたと思います。
Webアプリ作成には多くのツールが存在しますが、自分に合ったものを選んで使用することで作業効率を格段に上げることができるのだということを学べた出来事でした。
どんなものを作るか
ポートフォリオを作ろうとなった時にどうせなら困っていることを解決できるものをと考えました。 一番に浮かんだのが夕ご飯のメニュー決めと買い物
我が家の夕ご飯は1週間分のメニューを決めてネットスーパーと週末の買い出しで食材を準備しています。 1週間のメニューはレシピサイト(クックパッドやクラシルなど)を利用。メニューを決めたら材料を細かく書き出してチェックリストを作成し、ネットスーパー注文しています。
まとめると手順は以下の通り
- レシピサイトで夕飯のレシピを探す
- 1週間分の夕飯のメニュー決める
- 夕飯のメニューを曜日別にしてリストを作成
- レシピを見ながら材料を1つずつ確認して買い物リストを作成
- ネットスーパーで注文するものと近所のスーパーで購入するものを選別
- チェックリストを見ながらネットスーパーで注文、週末に近所のスーパーに買い出し
食べたいものなどが決まっていればメニュー決めはすぐにできますが、4の手順だけはどうしても時間がかかてしまい、私には苦痛でした。
メニュー決めたら買い物リスト作ってくれるアプリがあれば私の希望は叶うはず。
ということで’メニュー決めたら買い物リスト作ってくれる’アプリを作ることに決めました。
gitに挑戦してみた ①gitとは?〜ひとまずpushするまで
バージョン管理、グループ開発には必須となるGitに挑戦してみた
Gitとは?
分散型バージョン管理システムの一つ
local(PC) >>(push)>> romote(クラウド) -- gitHub.com(クラウド) >>(pull)>> local(PC)
>更新履歴として保存
>編集箇所の差分を表示。
gitリポジトリ(repository)とは?
ファイルやディレクトリの状態を記録する場所
保存された状態は、内容の変更履歴として格納
- リモートリポジトリ
専用のサーバに配置して複数人で共有するためのリポジトリです。
- ローカルリポジトリ
自分の手元のマシン上に配置するリポジトリ。ユーザー一人一人がもつ
普段の作業はローカルリポジトリを使って全て手元のマシン上で行い、リモートリポジトリを通してほかの人の作業内容を確認・取得することもできる。
ブランチとは?
履歴の流れを分岐して記録していくためのレーンのようなもの。
分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ中で複数の変更を同時に進めていくことができる。
gitに変更履歴を積むにはどうするのか??
※[ ]で記載してるのはコマンド
リポジトリの作成
1)[git init ]
>指定したディレクトリに対するリポジトリを作成する
*文書ファイルやプログラムのソースファイルなどが既にある場合は、
ファイルを保存したディレクトリを対象に[git init]を実行するとリポジトリが作成される
2)リモートリポジトリの設定
[git remote add リモートリポジトリ先の任意の名前(デフォルト:origin) リモートリポジトリのアクセス先]
>リモートリポジトリのアクセス先を設定する。デフォルトではoriginという名前になる
commitする(localリポジトリに変更履歴を積む)
ファイルはワークツリー上のuntracted fileとして管理される。このままではcommitできない。のでcommitできる状態にする必要がある
<イメージ>
ローカルリポジトリ:変更履歴を積んだもの。
インデックス(staging):変更履歴を積む準備ができたものをおく。変更などはできない。*[git status]で緑色で表示
ワークツリー:コード入力など変更操作可能なものをおく。(untracted file)
*[git status]で表示すると赤色で表示
1)[git add ディレクトリ名]
commitしたいuntracted状態のファイル/ディレクトリをインデックス上にあげる
>commitできる状態になった!!
2)[git commit ディレクトリ名]
localリポジトリ上に変更履歴を積む
>pushできる状態になった!
pushする
1)[git push リモートリポジトリ名 ブランチ名
リモートリポジトリに自分の変更履歴がアップロードする。
リモートリポジトリ内の変更履歴がローカルリポジトリの変更履歴と同じ状態になる
続きを読む
勉強を開始
Progate
2021年12月からプログラムの勉強を開始。
はじめはprogeteを利用。
プログラミングってそもそもなに?って感じの私にはとっつき易くてゲーム感覚で面白い
- HTML,CSS
- JavaScript
- Ruby
- Command Line
- SQL
- Git
- Ruby on Rails
の順でやっていって、かじる程度だけどなんとなく枠組みを掴んだ感じ。
サクサク進むので楽しいけど、自分で考えて全部コードを書くわけではないので身についてる感じはあまりしなかった。
そして、progeteばかりしていてもしょうがないと思ったので、現役エンジニアの相方さんに相談。
「やっぱ何かアプリみたいなのを作ってみては?」
作りながらの方が勉強しやすいと思うとのこと
そして、Ruby on railsでwebアプリを作ってみることに。