個人アプリ開発 #4 即時検索先方一致、フロント(jquery)実装 データの受け渡し

こんにちは、Masaです。

 

個人アプリ開発#4

 

今日もコツコツ開発を進めています。

 

本日は

■入力した値を元に検索をかけてDBから先方一致したものを表示させて

クリックしたら表示させるという処理を作成しました。

 

■paramsに渡すデータを整えておりました。

 

f:id:masataka_sugita:20190718201524p:plain

以前にもあいまい検索機能を作成したことがあったので難しくはなかったのですが

・paramsに複数のデータをどうやって渡すのか

・表示させるvalueと内部で欲しいvalueは違うかたどうするのか

 

という点で少し頭を悩ませ

 

hidden_fieldを使い裏でデータを保持したり

jqueryの指定のセレクタを取得することに苦労したり

paramsで同じkey配列としてデータを渡したり

 

なかなか勉強になることばかりでした。

 

こうしてアプリを1から作成していると

フロントエンドとバックエンドの境目がよくわからくなりますね。

 

見た目だけではデータを渡すことはできないし

ユーザーが入力した情報をバックで欲しいデータを整えるのは

フロント部分でしないといけないし。

 

とはいえ色々作るのは楽しいので

変わらず作ります。

 

【今回の反省点】

今回作った機能は色々と修正箇所があるが

それを見越して作ると確実に時間かかりすぎるので

まずは

「動くもの」

という意識で作成したが現場はどうなんだろうか

見通しの甘さが今回も出てしまったなぁと思うので

次の機能ではもっと事前に何をどうするのか決めてから作ろうともう。

 

最後まで読んで頂きありがとうございました。

 

明日も楽しみつつ頑張ります。

 

 

 

 

 

個人アプリ開発日記 #3 フロント(jQuery)に苦戦【初terateil】

こんにちは、Masaです。

 

投稿機能の画面部分を実装中

 

動的に追加した要素にイベントをつけることはできたが

その中身の値を取得することができずに苦戦中。。

f:id:masataka_sugita:20190717210902p:plain

動的要素に対してのイベントと値を元にした処理

 

➕ボタンを押すとinputタグが出てきて

そこに書き込んだ値を元に

DBに入っている700近い材料の初期データを検索して

表示させるということをしたいが

追加した要素の値が取れない

 

const $marerial_text = $(".material_text-area");
$(document).on("keyup",$marerial_text,function(){
var material_item = $(this).val();
console.log(material_item);
});

 

 動的に追加した要素に対してイベントはこのように書くが

$(this)が$(document)を取得してしまい

狙いのデータが取れない

 

検索かけても今回実現したいことに関する記事はなく

できる範囲のことは試してみて

思考が尽きたので

terateilに質問をしてみた。

 

回答きて解決したら幸い。

 

自分のドジではなければ

Qiitaに書いて置きたい内容ですね。

 

引き続き開発頑張ります。

 

では最後まで読んでいただきありがとうございます。

 

開発日記 #2

 こんにちは、Masaです。

 

開発日記#2

 

就活と並行して開発をしていると

やることだらけでまともに開発に注力できませんね^^;

 

IT業界のことを色々調べてますと

やはり全て面白そうに感じてなかなか自分の方向性を定めるのが大変ですね。

 

学びたいことが多い、が自分の身は1つかなくて全部やるのは不可能。

 

IT業界未経験の大変だなと思うところは

・現場で実際にどのような感じで業務を行なっているのか分からない

・業界の詳しいことまで知ることができない(イメージしずらい)

 

色々と検索して記事をみてはいますがやはり

「現場に入ってみないことには分からないなぁ」

と思いながらコツコツを

 

個人アプリの開発を進めています。

今は投稿機能を作成しています。

 

700近い食材の初期データを流し込み

下準備を行い

作っていますが

 

フロントの処理ができてから裏の処理ができるので

まずはフロントの処理を行なっています。

 

jqueryで動的に要素を追加しながら

情報がしっかりを渡って来るのを確かめる。

 

自分で作るとなると

フロントをどのようにしようか迷うので

とても時間がかかりますね。。。

 

引き続き頑張ります。

個人アプリ開発日記 #1

先日から個人アプリを開発し始めました。

 

今回の開発環境

■言語

html(haml),CSS(Sass),Ruby( 2.5.1)

フレームワーク

Rails 5.2.3

■DB

MySQL

■本番環境

AWS EC2

こんな感じで作成しています。

 

前回開発した開発は

Rails 5.0.7.2での開発だったのでそこが少し違うと言う状態

 

今回のアプロは私自身以前から作りたいアプリで

しっかりとリリースして

みなさんに使ってもらい、生きたアプリにしたいと思っています。

 

ですので

現場に入ってもこのアプリをしっかりと作り込んだり

いろんな人が使うようになった時にインフラ周りの知識が必要になってくるので

今後ではあるが、勉強が必要だなと思う。

 

まずは動くものを作成し、

実際に使ってもらっていいものにしたいと思う。

 

ビジョンはこんな感じではあるが。

 

技術面においては

今回絶対に入れたいのは

 

「テストコード」

 

以前に作成した共同開発のアプリは

時間が足らずテストコードを実装することができなかった。

 

世間ではスマホ決済戦国時代なって

様々な企業が一斉に参入しているが

セキュリティー面を不安視するの声もよく聞く。

 

「まずは動くもの!」というのは

大事だともうが

 

大前提で安全なものというのは当たり前ですので

しっかりといろんな方が使ってくれることを意識して

開発を進めて行こうと思います。

 

 

 

 

【名古屋Ruby会議に参加しての感想】

こんにちは、

始めめましてMasaです。

 

先日名古屋Ruby会議というイベントに参加してきました

このイベントは割と有名なのかな?

 

よくわからないですが

名古屋で勉強会自体が少ないので

知って速攻参加申し込みをしました

(東京の人たちが羨ましい・・・)

f:id:masataka_sugita:20190610212511p:plain

名古屋Ruby会議

会場の人数は約100名

歌舞伎とかをする会場で不思議な雰囲気でした。

f:id:masataka_sugita:20190610212644j:plain

会場雰囲気

年配の方々が多いイメージを受けて

「偉大な先輩方がいっぱいおられる!!」

 

とテンション上がりました笑

 

感想

 

いろんな方の話を聞いて

もう本当に何がなんだかわからなくて

「これってRubyなの?」

と目が点になってしました。

 

話を聞きながらひたすら

ググりまくりながらなんとかついて行こうとしましたが

今の僕には到底追いつけるわけもなく

 

「(チーン・・・) 」

 

ruby勉強し始めて2ヶ月満たない時期には早すぎたのかもしれませんね^^;;

(今まで勉強してきたことほとんど出てこなかった・・)

 

早く東京に出て自分にあった勉強会に参加して

ステップアップしたいですね。。

 

いつかこういうガチ?のイベントの話を納得して

一緒に楽しめるようになりたいですね。

 

もっと頑張ります。

 

本日の学習時間10時間

 

最後まで読んで頂きありがとうございした。

 

PAY.JP導入。単体テスト勉強。

こんにちは、

初めましてMasaです。

 

今日はクレジット決済を実現するにあたり

PAY.JPを導入しました。

 

導入の仕方は初めはわけわからなかったですが

公式リファレンス、Qittaを読み解いて

少しずつ点が出来上がり

点が繋がりようやく線になり一気に進みました。

 

公式リファレンスを読むのは本当に大事だなと思いました

というのも

Qiitaに書いてあることは簡潔に書いてあって

わかりやすいのですが

他の記事と書いてあることが違ったり

細かいところまでは書いてないので

 

何かあったら公式見るのは大事だなと思いました。

 

と言いつつ

いつもQiitaに助けられてるのも確かですけど。^^;

 

Qiitaにわかりやすい記事をあげてくださってる先輩方には頭があがりません。。

 

テストコード

 

PAY.JPど導入して今はテストコード学んでいます。

 

スクールの弱点として

テストコードについてあまり深くカリキュラムが作られていないという現状で

僕を含めてチームメンバー全員テストコードを書くことができません。

 

実際の現場では確実にテストは求められるらしいので

進捗から少し外れてしまいますが

しっかりとテストコードかけるようにし、

メンバーにアウトプットをして行こうと思います。

(いつも助けてもらってるので・・・^^;)

 

噂ではテストコード書くの楽しいと聞いたことがあるので

楽しさ見つけれるまでやってみます。

 

本日の学習時間12時間

 

最後まで読んでいただきありがとうございました。

 

リアルタイムで閃いた。笑 PAY.JP導入準備。チームメンバーのコード改善。【サプライズ神回】

こんにちは、

初めましてMasaです。

 

今回記事を書いてる途中でアイデアを閃いて

貴重な修正する過程を残せたので

楽しんでいただけるかなと思います。

最後まで読んでいただけたら幸いです^^/

 

今日はクレジットカード決済を実現させるために

PAY.JPの導入に取り掛かりました。

 

まずはマークアップから

■本家

f:id:masataka_sugita:20190603200606p:plain

本家view

 ■今回作成したもの↓

f:id:masataka_sugita:20190603200716p:plain

今回作成したview

いい感じでできたんじゃないかなと思いっています。

 

楽しかった点

・今回自分なりに楽しかったなと思うところは

selectのプルダウンメニューの改善です。

 

チームのメンバーの一人が以前作成してくれた

 

selectのプルダウンメニューは

f:id:masataka_sugita:20190603201214p:plain

改善前のselectのコード

上記のコードで「おお〜」って思いましたが

実際に表示される桁数が01から表示されていないという問題がありました。

おそらく期待している挙動としては

[01.02.03.04.05.06.07.08.09.10.11.12]

だと思うのですが

表示される表示は

[1.2.3.4.5.6.7.8.9.10.11.12]

このように桁数が省略されていました。

 

別にこのままでの問題ないかなーと思いましたが

ちょうど僕が実現したかった処理が

f:id:masataka_sugita:20190603201744p:plain

狙いの処理

↑こちらのコード。

記事:https://qiita.com/takachan_coding/items/f7e70794b9ca03b559dd

 

本家も01からカウントされててせっかくなら動的な動きも完コピしたいな。。

ということで

 

修正を加えてみたコードがこちらになります。↓

f:id:masataka_sugita:20190603202221p:plain

修正後のコード

桁数の0埋めは初めてのことで困惑しましたが

何とか実現させることができました。

 

ですが・・・

 

画像下の

%select{name: "year", class: "select--item"}
= (19..29).each do |year|
- full_year = "20" + year.to_s
%option{value: full_year}
= year

 こちらのコードに関して今だにモヤモヤしているのは

べた書きで

19..29と書いてしまっていることです。

 

というのも

2020年になったらどうするの?問題です。

 

明らかに時間の変化に弱いコードになってしまっていますね・・・^^;

 

調べて

f:id:masataka_sugita:20190603202953p:plain

ここまで辿りつきましたが

その先にどうしたらいいのか・・・

というところでいきず増しました。

 

その時に頭の中でぐるぐるした考えとして

・年を取得する処理を コントローラに書こうか

・モデルに書こうか

・そういえばモデルとビューの関係性ってどんな関係だっけ?

・モデルで定義した変数ってviewで使えるっけ?

 

あ、今書いてて思いついたことが一つ出たのでやって見ます。

コントローラーで処理の返り値として

現在の年を取得して10を加えてたものを配列として吐き出させて

@arrayとしてインスタンス変数にしてそれをviewでeachで回してみます

 

やって見ます!!

できました笑

(まじでやってました笑)

 

今書いたコードはこちら!

 

■コントローラー

f:id:masataka_sugita:20190603210628p:plain

newアクション部分

■view

f:id:masataka_sugita:20190603210721p:plain

viewに@インスタンス変数array

感動。。

 

まさか記事で振り返りしてる時に

思いつくとは^^;

(記事書いててよかった)

 

今回のコードで2099年までは何とか耐えれそうです笑

 

補修性、変化に強いコードを書くというのは

最近自分の中で大切にしていることなので今回それを実現できてよかったです。

 

本日の勉強時間11時間。

 

長くなってしまいましたが、

最後まで読んでいただきありがとうございました。

 

今回お世話になった記事一覧:

http://cameong.hatenablog.com/entry/20120806/1344271504

https://qiita.com/takachan_coding/items/f7e70794b9ca03b559dd

https://www.javadrive.jp/ruby/date_class/index3.html