実践で学ぶオブジェクト指向⑤ テスト実践編(Rspec)

前回学んだことを踏まえてRspecで各モデルのテストを書きました。 Gameモデルのspecを最後に書いたんですが、1つのメソッドで副作用がたくさん起こるのでテストが書きづらかった。 「テストを書くのに苦労するとき、アプリケーションの設計がマズい可能性が…

実践で学ぶオブジェクト指向④ 効果的なテストを行う

今回はテストについて考えたいと思います。 『オブジェクト指向設計 実践ガイド』の9章の部分です。 なぜテストを書くのか 変更可能なコードを書くための3つのスキル オブジェクト指向設計への理解 リファクタリングの能力 リファクタリングとは「ソフトウェ…

実践で学ぶオブジェクト指向③ メソッドの粒度

メソッドを小さく分ける 前回のコードには問題が残っています。Judgeが本来の責任に加え、処理分岐の知識を持ってしまっていることです。 これは良くないので、分岐に関する知識をGame_Masterに戻しましょう。以下のようになります。 def open(card_id) if c…

実践で学ぶオブジェクト指向② if分岐のネスト/デメテルの法則

繰り返されるif分岐 今回はまず、GameMasterクラスのopenメソッドについて考えてみようと思います。 このメソッドはアプリケーションの中で一番行数が多く、まず着手すべき部分であることは自分でもすぐに分かりました。 以下が現状のコードです。

実践で学ぶオブジェクト指向① 神経衰弱ゲームを設計する

「理解していない」という事実を分かってなかった…… 自分が今までオブジェクト指向設計を全く考慮せず、不安定なrubyの知識の上でMVCを理解しないままアプリケーションを積み上げていた、という衝撃の事実を先週知りました。 「コントローラーに処理を全部書…

test-utilsでVueのテストを書きたい②

webpack.config.jsの書き方が分かってとりあえずテストが動いた! webpack.config.js const ExtractTextPlugin = require("extract-text-webpack-plugin") const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: 'development…

test-utilsでVueのテストを書きたい①

Vue.jsのテストもやらねばと思って色々やってみたがなかなか進まない。 test-utilsってVue.jsの公式テストライブラリを使ってみたんだけど、 WEBPACK Failed to compile with 1 error(s) Error in ./app/javascript/router-view/zip-code.vue?vue&type=style…

Promiseの基本

Promiseとは 非同期処理を抽象化したオブジェクトとそれを操作する仕組みのことを指す。 Javascriptの概念ではなく、プログラミング言語におけるデザインの一種。 JSにおける非同期処理にはコールバック関数を利用するものもあるが、Promiseは非同期に対して…

並列処理/並行処理とか同期処理/非同期処理について

プロセス プログラムの実行単位のこと。リソースを共有しない固有のメモリ空間を持つ。 スレッド プロセスの実行単位のこと。リソースを共有する共通のメモリ空間を持つ。 シングルスレッド 処理の流れが一つのみ マルチスレッド 二つ以上の処理が同時に実行…

Vuexのストアをモジュールに分割する

Vuexストアのモジュール分割を試したのでまとめる。

Mixed Content(混合コンテンツ)エラー

ユーザ情報登録ページで、 郵便番号入力→「住所を取得」ボタンクリック→住所欄に取得したデータを表示 を実装しました。

create→ROLLBACKの原因を知りたい

Herokuにデプロイしたあと、UserのCreateがロールバックされてしまい、その理由がログに出ないので困り果てていました。 def create @user = User.new(user_params) @user.save! end save!で例外を発生させるようにすると、ログにエラー内容が出るようになり…

v-bind:classとcomputed

v-bind:classにオブジェクトを渡すことで、クラスを動的に切り替えることが可能です。 <div v-bind:class="{ active : loggedIn }"> <p>投稿する</P> </div> 渡すオブジェクトを算出プロパティとして作成すると、より複雑な処理が可能になります。 <div v-bind:class="classObject"> <p>投稿する</P> </div> vueファイル data: { loggedIn: true, error: null }, co…

JavaScriptで今週の月曜日と日曜日の年月日+曜日 を取得するメソッド

アクセスした時点での週の始まりと終わりを返すメソッドです。 2018年12月31日 (月) ~ 2019年1月6日 (日) という形になります。

VuexのデータをlocalStorageに保存する(ログイン状態の保持)

検索で来た方はこちらのページが綺麗にまとまっていて分かりやすいです。 pizzamanz.net

Vue.jsにfirebaseでユーザー認証を導入

「プロジェクトの追加」をクリックすると入力画面が開くので入力してプロジェクト作成

Vuexの導入

アプリケーションの複雑な状態管理を実現してくれるVuexを導入します。 npm install vuex --save store.jsを作成します。

Rails + Vue で単一コンポーネントファイルを使う

Railsプロジェクトの作成とVueのインストールは省略。 /app/views/layouts/application.html.erb <body> <div id="potatoSNS"> <%= yield %> </div> <%= javascript_pack_tag 'main' %> <%= stylesheet_pack_tag 'main' %> </body>

Vue.js + Vuex + Railsでツイッター風のSPAを作った

やりたかった事は ・Vue.jsの基本的な操作おさらい ・RailsはAPIのみに専念させる ・郵便番号から住所を取得するメソッド ・ユーザーに何かしらの数値を持たせて管理する

技術試験

今日、とあるWeb系企業様の二度目の採用面接で、技術試験を受けた。 実際に動いているアプリケーションに対してある項目を追加するという課題で、それに伴う記述も簡単なものだった。 結論から言うと、現時点ではまだまだ技術的に足りなかった。 担当してく…

はじめての Vue CLIとVue Router

技術評論社から出ている『Vue.js入門 基礎から実践プリケーション開発まで』を手に入れた。 前回の競走成績ジェネレーターではRailsのプロジェクトの中でVue.jsを動かすという形で作ったけど、Vue.js主体でアプリケーションを作ることもできるのか?という疑…

Rails + Nokogiri + Vue.jsでスクレイピング & SPAを作った

Rails + Nokogiri + Vue.jsを使ってシングルページアプリケーションを作りました。 史上5頭目の三冠牝馬アーモンドアイの競走成績表を作成してチェックできるアプリケーションです。 ネット競馬.comをスクレイピングしたデータをもとにRailsのモデルオブジェ…

json.jbuilderでオブジェクトの配列を渡す、他

v-forディレクティブのなかでv-on:click="メソッド()"の引数に配列の要素を渡す 特別な書き方は必要なく、そのまま書ける。

モーダルウィンドウを使うときのHTML構成

モーダル表示中はモーダル外を暗くしてその暗い部分をクリックしたときにモーダルが閉じるようにする。 やり方はこんな感じ イメージ

Railsの処理が失敗した時に失敗JSONを返すことでVue.jsの処理を分岐させる

非遷移でVue.jsとRailsがやり取りするにあたって、失敗時の処理を分岐させる方法です。 以下のような形で実装しました。 ①Rails内の処理が成功したか失敗したかを、それぞれ別のJSONを返すことで判定 ②Vue.jsでは、返ってきたJSONによって成否を判断して処理…

データ削除後の表示を非遷移で更新する

シングルページアプリケーションなのでデータの削除時も非遷移で表示が変更されなければいけません。 しかし、Vueのメソッド内で ・axiosでdeleteリクエストを送信 ・データ取得メソッドを実行 とそのまま記述しても ①axiosでdeleteリクエストを送信 ②データ…

axios.POSTした配列オブジェクトをRailsのモデルオブジェクトとして保存する

1つのレースオブジェクト { name: 桜花賞, location: 阪神, weather: 晴 } 複数のレコードオブジェクト(配列) [ { name: 馬A, jockey: 騎手A }, { name: 馬B, jockey: 騎手B }, ...... ] これらを同時にVue.jsから投げ、Railsで取得してそれぞれのモデル…

Heroku上で画像の読み込みが非常に遅い

Herokuに自作アプリケーションをデプロイしたものの、どうも最初にアクセスするときに時間がかかりタイムアウトのエラー(H12)が出る。 開発環境ではスッとアクセスできる。 とりあえずHerokuのログを見てみる。 INFO -- : [3b31ed68-8e79-4c34-b04b-d2c8d08a…

PostgreSQLではINTEGER型のカラムをorderでソートするときNULLが先頭に来てしまう

またしてもデータベースの違いでつまづきました。 とりあえずこれですべて片付いたとは思うけど、今度から開発環境と本番環境で同じDBを使おうと心に誓いました……。 現象 記事(article)にいいね数(likes_count)カラムがあり、その数値でソートして人気記事ラ…

PostgreSQLではstrftimeを使えない。困った

20日間ほどかけて取り組んできたブログサービスをHerokuにデプロイしたところ以下のエラーが。 ActiveRecord::StatementInvalid (PG::UndefinedFunction: ERROR: function strftime(unknown, timestamp without time zone) does not exist LINE 1: SELECT CO…