読者です 読者をやめる 読者になる 読者になる

根性駆動開発

備忘録とか日記とか

railsのrailに乗らずにjqueryだけでSPAしようとしたらクソ辛かった話

javascript ポエム 日記 プロジェクト jQuery ajax

かなり久しぶりの投稿です。死んでないです。

素直にreactとか使えば良かったものをjqueryで頑張ったら辛かった話をします。

しょぼいなwとか、こうはならないようにしようとか思って読んでくれれば幸いです。

前置き

ぼくの大学ではプロジェクトという3年生限定のゼミっぽい授業が存在していて、そこで一人暮らしの大学生が余り物をとうふドーナツに混ぜることで上手いこと消費出来るようにしようという話になりました。豆腐はヘルシーだし安いとかそんな理由です。

ぼくはwebアプリを作る担当チームに参加し、3人で冷蔵庫の中身を任意で友達とシェアし、上手いこと余りものをみんなで消費出来る仕組みを作成することになりました。

タイトルにもありますがruby on railsを利用して開発しました。

ぼくはそのチームで冷蔵庫中身共有ボードをSPA化する仕事と、github管理をする仕事を担当しました。

github管理も経験が浅くてなかなかに辛い物があったのですがここでは割愛します。

どうして素直にreactしなかったのか

1番の理由は難しいのでは..みたいなビビりがあったためです。

今年の春からプロジェクトはスタートしたのですが、その時点ではチュートリアルを片手間にちょっと触っただけで何か作れるレベルじゃないという認識でした。

あとメンバーでreactを少しでも触れた経験があるのがぼくしかいなくて、あまりメンテナブルじゃないなとかそういう理由もあります(結局jsでロジック書いたのは僕だけだったのでこれはあまり意味のない配慮でした)。

作ったところの機能

ぼくが作った共有ボードには以下の機能がありました。

  • 共有された食べものリストを、投稿された順/ユーザ名順/食品順 にソートする。
  • ふぁぼる。ふぁぼると一緒に消費するイベントリストに登録される
  • リプを飛ばす
  • 貰ったリプを表示する

画面としては以下のような雰囲気です。デザイナーのメンバーもいたので見栄えは結構良いんじゃないかなと思います。

f:id:syathi:20161226174646p:plain

これだけなのでその気になれば数日で出来るのではみたいな気持ちにはなるのですが、なんだかんだ夏くらいからダラダラやってたらかなり時間を使いました。

辛かったポイント

html.erbファイルが猛烈に読みにくくなった

全体的な機能の実装とか骨組みを作成するとかを担当していたメンバーはjsonを飛ばしてそのデータからフロントエンドであれやこれやするという設計をしていなかったため、サーバから送られてくるデータはhtmlの形式でした。

そのため、サーバから送られる変数はstyle="display:none;"とか属性をつけてhtmlに埋め込んでjsから利用しました。

ActiveRecordのモデルクラスのインスタンス変数とかはgonみたいなgemを使えば上手いこと出来るっぽいですがそういう変数でもなかったので仕方ないのかなという印象です。

もしかしたらぼくのググり力が足りないだけで全部いい感じに出来るのかも知れないです。

なんかちょっとメンバーのせいにしてるっぽいけど別に僕もrailsわかるので適当にコントローラ書き換えれば良かっただけの話で、横着が辛みに繋がった感じでした。

DOMの操作が結構わかりにくかった

テーブルのソートをするのにDOMの深いところをいじるのですが、その選択が分かりにくくてパッと見なにをいじってるのか分からない感じになりました。

for(var i = 0; i < tab1FoodsRow; i++){
  tab1FoodsArr[i] = [];
  for(var j = 0; j < no_column; j++){
    tab1FoodsArr[i][j] = $(".foods_article").eq(i).children().eq(j).html();
  }
}
for(var i = 0; i < tab1FreshRow; i++){
  tab1FreshArr[i] = [];
  for(var j = 0; j < no_column; j++){
    tab1FreshArr[i][j] = $(".fresh_article").eq(i).children().eq(j).html();
  }
}

こんな感じでめちゃややこしくDOMを指定してます。

(友達にはこれでも綺麗と言われました...jQueryって闇なんですね)

jQueryのノウハウがある人ならもうすこし綺麗に出来たのかもしれないですが、そうもいかなくてjQuery嫌いになりそうでした。

railsのrailをあまりよく分かってなかった

正直今もあまりよく分かってないのですが、jQuery使うにしてもjQuery-railsとかのgemがあるみたいで、そんなことも知らずに実装を始めて引けずに力技で実装をするのを続けてました。

あと、ajaxで非同期に通信するときにPOSTとかする用のrailsが発行するトークンをつけてなくてCSRFの例外を踏んだりとか、動的に変わるパスの為にたくさんhtmlに変数を書き込んだりとか、非同期通信周りでrailsをきちんとわかってあげられていなかったことに起因する問題を踏みまくりました。

このあたりは全体的にごり押しで実装出来なくはないのですが、なんか汚いなとか納得いかない感じのコードしか出来上がらなくて、一番モチベーションが上がらない作業でした。

<td class="heart">
  <% if @list = List.find_by(refrigerator_id: fridge.id, user_id: current_user.id, delete_flag: false) %>
    <div>[♥︎]</div>
    <div style="display:none;">1</div>
    <div style="display:none;"><%= fridge.id %></div>
    <div style="display:none;"><%= current_user.id %></div>
    <div style="display:none;"><%= lists_path(@list) %></div>
  <% elsif fridge.user != current_user %>
    <% if List.find_by(refrigerator_id: fridge.id, user_id: current_user.id, delete_flag: true) %>
      <% @list = List.find_by(refrigerator_id: fridge.id, user_id: current_user.id, delete_flag: true) %>
    <% end %>
    <div>[♡]</div>
    <div style="display:none;">0</div>
    <div style="display:none;"><%= fridge.id %></div>
    <div style="display:none;"><%= current_user.id %></div>
    <div style="display:none;"><%= lists_path(@list) %></div>
  <% else %>
    <%= "#{List.where(refrigerator_id: fridge.id).count}人" %>
    <div style="display:none;">2</div>
  <% end %>
</td>

こんな感じで変数をめちゃ埋め込んでます。

たぶんこういうのもgemを探して上手いことやるのがベターだったんだと思います。

CSSわからなくて思ったように画面に配置出来ない

タイトルと関係ないですがCSSが分かりにくくてここでも結構苦労しました。

結局デザインに当たる部分はデザイナーのメンバーに任せてしまったのでロジックにちょっと関わってるところとかだけ触れたのですが、それだけでも結構ハマってきつかったです。

まとめ

こんな感じでフレームワークの恩恵を得ることなくごり押しまくり、綺麗な実装が出来ないときのごり押し力が鍛えられた感じだったのですが、そういうのはかなりミニマムなフレームワークを使ってるときとか、根本的なプログラミング力を(プロコンとかで)鍛えている時とかそういう場面でやるべきことな気がしました。

せっかくフルスタックのフレームワークがあるのにその恩恵を受けようとしなかったり、もっと場面に適したツールがあるのに(この場面ではreactとか)利用せずごり押したりとか、ただただ自分に苦行を強いているだけで進捗も出ないし、モチベも上がらないし、メンバーにも迷惑をかけるしで良い事ないなというのが今回の開発での所感でした。

今後の開発では適材適所で最適なツールを適切に使っていくことを念頭に置いて行きたいです。

という反省でした。

プロジェクトそのものはみんな仲良くやれて楽しかったです。