学習履歴一覧

551件中の 376-400件 を表示

[Vue.js]Vue.jsのツボとコツが分かる本 4章〜5-3まで jsonとjsonpファイルを読み込んで処理する [就活]wantedlyのプロフィール文をレビューに基づいて修正

やったこと ■Vue.jsのツボとコツが分かる本4章 Ajaxで商品データを外部ファイルから読み込む まずJavaScriptでAjaxを使ってみる 次にjQueryでAjax 最後にVue.jsでAjax ■Vue.jsのツボとコツが分かる本5章 自動見積りフォームの作成。オプションにチェックが入ったり、写真の枚数が変わったりと、ユーザーの操作に応じてリアルタイムで見積もり金額が変化、表示されるようなもの まずはJavaScriptで実装 そのあとVue.jsで実装(途中まで) ■就活 wantedlyのプロフィールをキャリアアドバイザーのレビューを元に修正。 わかったこと responseにjsonのデータが入ってる。responseを変数に格納してその配列を加工、描画に反映する jQueryだと$.ajaxという便利なメソッドが使える。メソッドチェーンした.doneには通信成功時に実行したい処理を、.failには失敗時にしたい処理を書く jsonpを使うことでクロスドメイン制約を回避することができる→Chromeでも表示できる VSCodeのライブサーバーを使うことでサーバーに置いたJSONPファイルを読み込むというコードで動かすことができた 自動見積りフォームでは、Vue.jsに置き換える際、dataとしてもたせる値と算出プロパティとして用意するものを設計段階で分けることが重要 次やること 自動見積りフォームの完成 jsonpと$.ajaxについて調べる

Rails
Vue.js

2020年06月08日(月)

5.4時間

[Vue.js]JS-ProでVue.jsとVuexの章を勉強する。[TechCommit]個人アプリの制作相談&進捗共有会に参加 [Rails]フラッシュメッセージ日本語化、無駄ファイル削除、Emoji Prefix導入

やったこと JS-ProでVue.jsの学習 JS-ProでVuexの学習 YWT Questのフラッシュメッセージ日本語化 GitHub Projectを触ってみる Emoji Prefixを使ってみる wantedlyのプロフィール追記 職務経歴書の職歴とWebエンジニアになりたい理由を書く TechCommitの個人アプリ制作相談&進捗共有会 わかったこと ライフサイクルについてちょっと分かった。createdとmountedをよく使うので覚えておく VuexはMVVMの弱点を補うためのもので、ReactのReduxやFluxに影響されているものらしい フラッシュメッセージ日本語化はコントローラーの名前ごとに辞書のネストを作ればlazy lookupで書ける GitHubのProjectはTrello感覚で使える。Automatedのテンプレートを使えばIssueが閉じると自動でDoneに移動する Emoji Prefixはかわいくて楽しい。ただVSCodeだとcommit_templateが使えないようだ 次やること YWT Questのインセプションデッキを改めて作って、今後の開発方針を考える issueには何故やるか、何をゴールとするかを書く。またこの雛形を作って使えるようにしたい Vue.jsをどうやって学ぶか考える Emoji Prefixに慣れる 今日一日やりたいことを宣言する 朝もくもく会めちゃめちゃ良い

Rails
Vue.js

2020年06月07日(日)

6.5時間

[Rails]Log/Indexの日本語化。カードのカラーを仮で変更。tooltipにも辞書ファイルを当てる [転職活動]アドバイザーに現状共有。自己分析シートを埋める。転職したい理由がはっきりした

やったこと Log/indexの日本語化 tooltipも日本語化 辞書ファイルを少しだけいじって、lazy lookupも使いつつ分かりやすく呼び出せるように .float-right =link_to edit_log_path(log.id), class: 'text-reset', 'data-toggle': "tooltip", 'title': t('.tooltip.edit'), "data-turbolinks": false わかったこと tooltipにはclass: 'text-reset', 'data-toggle': "tooltip", 'title': t('.tooltip.edit')な感じで書ける。 また、lazy lookupを使いつつ分かりやすく階層を分けてあげた。 改善前 ja: logs: index: levelup_now: レベルアップしました! level_calc: "%{oldlevel} → %{current_level}" close: 閉じる term: "%{start_on}から%{end_on}" worktime: "%{worktime}分" delete: 削除 edit: 編集 これでもtooltip用にt('.delete')で呼び出せるけど、ごちゃごちゃするので、 ja: logs: index: levelup_now: レベルアップしました! level_calc: "%{oldlevel} → %{current_level}" close: 閉じる term: "%{start_on}から%{end_on}" worktime: "%{worktime}分" tooltip: delete: 削除 edit: 編集 このように編集し、`t('.tooltip.delete)'で呼び出せるようにした。 次やること 自己分析シートの続きを埋める Log/indexのカラー周りを考える 引き続き日本語化 JS-Proすすめる

Rails
Bootstrap

2020年06月02日(火)

2.1時間

[卒業制作]UserのSystem Spec. SignUpのテストで、メール認証をSystem Specで通す方法が分からなかったけど解決。Log作成のテスト途中まで。

やったこと UserのSystem Spec サインアップができる ログインができる ログアウトができる ログインしてる状態でサインアップのページには飛べない 以上のSystem Spec実装 LogのSystem Spec ログを作成し送信ボタンを押すと確認画面に遷移、途中まで実装 OAuthの設定(認証URL、URI)間違っていたので直す わかったこと UserのSystem Specで、Deviseを使用したメール認証をどのようにテストするのか分からず困っていた。 メールが飛ばされるが、letter_openerをテストで使用しようと思っても、テストブラウザ上で開いてくれず、click_onで認証用ページを開けない。 Devise confirmable用のテスト(フィーチャスペック)を書く(解説動画付き) これを参考に、以下のように実装することで解決。 describe 'ユーザー登録画面' do before do visit new_user_registration_path end context 'ユーザーのデータがなくログインしていない場合' do example 'ユーザー新規登録が出来る' do fill_in 'user[name]', with: 'firstUser' fill_in 'user[email]', with: 'firstuser@test.com' fill_in 'user[password]', with: 'password' fill_in 'user[password_confirmation]', with: 'password' click_button '登録する' # 登録するボタンを押した時にuserの作成はされる # なのでUser.lastでその情報を持ってきて user = User.last # 変数にuser.confirmation_tokenを代入 token = user.confirmation_token # 本来はメール本文に貼ってある確認用のリンクにvisitし # confirmation_tokenに変数tokenをセットすることによって # メール認証をしたことにできる visit user_confirmation_path(confirmation_token: token) expect(page).to have_content 'メールアドレスが確認できました。' end end end ポイントはuser = User.lastで新しく登録されたUserの情報が取得でき、その確認用のコードがtoken = user.confirmation_tokenとして取得でき、さらにvisit user_confirmation_path(confirmation_token: token)で認証が通せること。 ログのテスト時、date_fieldに日付を渡す方法が分からなかった→Date.todayでごまかす ネストしたフォームへデータを入力するには、以下のように書く # やったことフォーム fill_in 'log[dones_attributes][0][title]', with: 'やったこと' fill_in 'log[dones_attributes][0][worktime]', with: 90 fill_in 'log[dones_attributes][0][comment]', with: 'やったことの詳細' # わかったことフォーム fill_in 'log[knowledges_attributes][0][title]', with: 'わかったこと' fill_in 'log[knowledges_attributes][0][comment]', with: 'わかったことの詳細' # 次やることフォーム fill_in 'log[todos_attributes][0][title]', with: '次やること' fill_in 'log[todos_attributes][0][when_to_do]', with: Date.today + 3.days ストロングパラメータで値を許可してるときと同じ感じ。違うのはattributesのあとの[0]で、配列のインデックスみたいなものだと思われる。 フォームを追加したら[1]とかで入力できると思う 次やること 追加したフォームへの入力の可否を確認 関連付いたデータをFactoryBotで作成、そのテスト

Rails
Bootstrap

2020年05月25日(月)

3.9時間

[卒業制作]レベルアップの演出の実装。Landingページのデザインと実装。seedデータの作成。herokuにデプロイ。SendGridの設定、未日本語化部分を日本語化。卒業課題提出!!

やったこと モーダルの中のプログレスバーが、モーダルが開いてからアニメーションするように モーダルをログ作成した結果レベルアップした時に表示するようJavaScriptで制御 console.logで動作を確認するのを思い出して、console.logデバッグする レベルアップした時に表示、という条件をJavaScriptの中に書き込む そのため、JavaScriptタグ内にRubyの変数を渡して使えるようにする oldLevelがいつまでも残っていてoldLevel=0と判定されてしまい、無限にレベルアップウィンドウが出てきちゃうのを修正 Landingページの実装 float-rightで画像の横に文章を回り込ませられるけど、画面幅を変えるとぐちゃぐちゃになるので全部センター寄りに戻した max-width:50%を設定して、親要素にtext-align:centerを設定することで画像の中央寄せを実現 親要素に高さをもたせることで背景色をもたせて白と水色の2色でランディングのレイアウトする メーラーの設定をすっかり忘れていたのでherokuでSendGridを導入してメールを送れるように そのメーラーのアドレス設定をdevise.rbに書く 新規登録時のフォームで、バリデーションエラーが出た時の英語メッセージの日本語化 herokuに環境変数設定 herokuに自動デプロイ設定 わかったこと slimのjavascriptタグ以下ではRubyの変数をそのまま使うことは出来ない、ので以下のように記述する必要がある var oldLevel = #{@oldLevel} var currentLevel = #{current_user.level} このようにJavaScriptで定義しなおしてあげることでJavaScriptの式の中で使うことができる。 if (oldLevel === currentLevel) { } else if (oldLevel !== 0) { console.log("false") $('#exampleModal').modal(); $('#exampleModal').on('shown.bs.modal', function(){ bar.animate(1.0); }); } else { }; modalを開くJavascript、$('#exampleModal').modalが動かなくて困っていたけど、後ろにカッコがないのが原因だった。 $('#exampleModal').modal();これで動く。 JavaScriptタグ内のデバッグはconsole.logでデバッグできる Landingページ、TechCommitのLandingページを参考に実装しようとするも最初の文章の部分以外うまくいかない。 改行を含むテキストをpタグでまとめる時は以下のような書き方が出来る p.main-text | 学習を習慣化するための、<br> YWT記録アプリ 親要素にtext-align: center; 中央揃えしたい画像にmax-widthで画像の中央揃え出来る。 .content-1 { text-align: center; .index-image img{ max-width: 60%; margin: 0 auto; } } 親要素に高さをもたせることでbackground-colorがその高さの分効く SendGridの設定をしないと本番環境じゃメールが送れない 環境変数のセットとheroku addonsの追加で使えるようになる またGoogle Oauthで許可するURL、URIの設定をしないと本番環境でSNS認証できない Oauth用の環境変数もherokuでセットする必要がある バリデーション失敗時のアラートメッセージ、日本語化するのにgemの中身を書き換えたけど、herokuじゃ環境構築をherokuのサーバーの中でやるので、意味がなかった 次やること JavaScriptのコードが汚すぎるので条件分岐考え直す タグ付けの説明(ヒント文)を追加 過去つけたことのあるタグを候補として表示する?

Rails
Bootstrap

2020年05月23日(土)

8.0時間

[卒業制作]絞り込み検索機能実装。レベルアップの演出の実装に取り掛かるが、モーダルの中でプログレスバーをアニメーションさせるのがうまく行かず、progressbar.jsを試したりするもまだ解決していない

やったこと Y,W,Tのみ表示の実装 ボタンにリンク貼ってd-blockにしてテキスト部分以外もクリックできるように そのボタンをパーシャル化 レベルアップ演出に取り掛かる まずボタンを押してモーダルを表示するコードを試す→問題なし 次にモーダルの中にBootstrapのプログレスバーを表示させる→問題なし 検索して出てきたプログレスバーをアニメーションさせるコードを試すもうまくいかない jQueryのinviewというライブラリをCDNで試すも読み込めなかった progressbar.jsをアニメーションさせるコードがあったので試す モーダルの中でもアニメーションしてるのを確認 発火タイミングをずらすためにshown.bs.modalというイベントを使用してみるもうまくいかない 質問をメンターに投げて終了 わかったこと namespaceで作ったルーティングはlogs配下になり、しかもlogsのコントローラを参照してしまうので昨日のは失敗だった コントローラを分けるとだいぶすっきりする 横に並ぶcardの数をこっちで決めて制御するのはcard-deckを使えばいけそうだった jQueryなんもわからない JavaScriptなんもわからない 発火したいタイミングを検索すればそれに対応したコードは出るけど、じゃあそのコードをどう使うか?どう書くのが正解か?ということが分かっていない 次やること JavaScriptの復習 jQueryの復習 演出が無理そうならテストコードの実装に入る

Rails
Bootstrap

2020年05月22日(金)

4.6時間

[卒業制作]Donesコントローラ作成。ネストしたルーティングについて調べる。namespaceを使ってdones/showなURLを持たせることに成功。データの取り出し方とviewはまた要検討……

やったこと ネストしたルーティング・コントローラについて調べる DonesControllerを作る showアクションを作る viewの表示を考える namespaceを使ってlogs/dones/showというURLを持つdones#showアクションのためのURLを生成 わかったこと ネストの深さは1つまでを推奨していること donesControllerはlogsフォルダを作った中に作るべきか?と悩んだけどルーティングを設定したあとrails routesでチェックすれば分かる(結果Logsフォルダを作ったほうが良いっぽい) donesだけ取得したとして、そのdonesをやった日付けはどうやって取得するかという問題が出てきた。 current_user.logs.includes(:dones)で、その中のdonesとlogsのstarted_onとended_onだけ取得すればいけそう? 次やること まずdonesControllerでうまくいくか試す rails db:migrate:resetでバリデーション設定前のレコードを削除する viewは最低限で試して、とりあえずY,W,Tすべてのコントローラ作って動くかどうか確かめる できたらviewを作る それもできたら今度はYとW、YとT、WとTといったように2つを表示するためのコントローラと、そのviewを作っていく

Rails
Bootstrap

2020年05月21日(木)

1.3時間

[卒業制作]Yだけ、Wだけ、Tだけ……という形の絞り込みを実装しようと、一度やったことある方法で試すも色々な問題が判明。解消するにはどうしたらいいか考えるも自信がないので相談する。コントローラを分けるという考え方を教えてもらい、一歩前進。実装の流れが見えてきた。

やったこと 絞り込み検索実装のため、以前万葉の課題をやった時と似たようなコードを書いてみるが、うまくいかない current_user.donesという形で取得して表示するも、なぜかDonesがないものまで取得されてしまう ↑の原因を探る 絞り込み検索で、期待する動作を書いてみる それを実装するために必要なコードを考える 考えるも、いまいち自信がないのとActive RecordでLogs.donesのような取得の方法が分からないので質問を投げようとする 井上さんに思い切って相談する コントローラに関するRails作者の考えを読む わかったこと 万葉の課題と一緒じゃ駄目な理由→Logの下にある3つのテーブルの有無を絞り込みの条件とするので、勝手が違う。 donesがないものまで取得されてしまっていたのは、実際にはDonesが作られてるけど表示されないだけ(worktime==0しかないdonesテーブルはviewで表示していなかった) default値が0に設定されてるからdonesが−ボタン押しても削除されてない……と思ったら、titleのバリデーション作成前に作ったレコードだからだった 1つのコントローラにはCRUD機能以上のものを実装しない。コントローラは機能ごとに細かく分ける。 今回の場合だと、例えばDonesを検索するならLogの中で新しいアクションを作って追加するのではなく、Donesを検索して表示するんだからDonesのコントローラを作ってそのshowで検索し絞り込んだ結果を表示すればいい ボタンにdones#showのようなリンクを貼って、遷移したviewにはDonesのみのカードが表示されてるページを用意すれば実装できそう YとW……みたいな場合は、YとWを表示ボタンを作って、DonesAndKnowledgesControllerでShowアクションみたいな感じかな…… 紙で整理して人に話して、アドバイスを聞くというのは自分の頭の中で整理されてやりたいことが明確になる 次やること バリデーション設定後は必ずデータベースをクリーンな状態にする コントローラにはcrud以上のものを書いていかない 説明が下手だからうまくなるためにどうしたらいいか調べる

Rails
Bootstrap

2020年05月20日(水)

2.8時間

551件中の 376-400件 を表示