とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

RuboCop を使ってみる

目的

コーディングルールが浸透していない Rails アプリケーションに Lint ツールを導入する

RuboCop とは

github.com

  • RuboCop is a Ruby static code analyzer. というわけで平たくいうと Lint ツール
  • たくさんの設定項目があり、微調整できるとのこと

導入

導入の仕方は README の通り Gemfile に下記を追記する

gem 'rubocop', '~> 0.51.0', require: false
  • インストール確認は下記
$ bundle exec rubocop -v

使い方

// カレントディレクトリ配下のすべての Ruby ファイルをチェックする
$ bundle exec rubocop

// 指定したディレクトリ(今回は app/)配下の Ruby ファイルをチェックする
$ bundle exec rubocop app/
  • コマンドのオプションは下記にたくさんある

チェック項目

  • あくまで一例だが、下記の項目などがチェック対象になる
    • ハッシュの { の後ろと } の前にスペースがあるか?
    • 文字列補完が必要ないのにダブルクォートを使っていないか?
    • 一行あたりの文字数が 80 文字以内か?
    • メソッドの return が省略できる場合に省略しているか?
    • メソッドの処理がない時は一行で書いているか?
    • 代替メソッドの提案
      • 例えば xx == 0 の代わりに xx.zero? は使えないか?などをチェックしてくれる

独自ルールの適用

AllCops:
  TargetRubyVersion: 2.4

既存のアプリケーションに導入してみる

事前準備

  • 現在の状態をチェックする
$ bundle exec rubocop --display-cop-names
  • 現在の状態をチェックした上で todo ファイルを作る (.rubocop_todo.yml ファイルが作られる)
$ bundle exec rubocop --display-cop-names --auto-gen-config
  • RuboCop の設定ファイル .rubocop.yml を作る
// .rubocop_todo.yml を読み込むようにしておく
$ echo "inherit_from: .rubocop_todo.yml" >> .rubocop.yml
  • 上記の手順で設定ファイルを用意し、再度チェックを走らすと .rubocop_todo.yml に記載された問題が無視され、検出されない状態になる
  • .rubocop_todo.yml から 1 つの問題を削除する (例えば Style/StringLiteralsInInterpolation)
  • この状態で rubocop を走らせるとエラーが検知されるので対象ファイルを修正する
  • ちなみに Style/StringLiteralsInInterpolation は --auto-correct 対象なので、オプションを付ければ自動で修正される
$ bundle exec rubocop --display-cop-names --auto-correct

Rails で日付表示に年月日のセレクトボックスを用意する

Rails で日付表示に年月日のセレクトボックスを用意

前提

  • 例えば User テーブルの birthday カラムがあり、その情報を年・月・日それぞれ別のセレクトボックスで表現するのに悩んだのでメモ

結論

date_select(:birthday, { use_month_numbers: true }, { class: class_name })

10 月振り返り

会社でやっていること

  • 変わらず Backbone.js on Rails のアプリを触っている
    • 典型的な fat controller であることがわかりどうにかしたい
    • まずは Railsリファクタリングをするためにどういう手法を取るのがよいか調査したい
  • そろそろ Docker を練習しようかと…

個人でやっていること

  • Angular アプリケーションプログラミングを読んでいる
    • Rails API モードと Angular でアプリを作成したい → 来月の目標
  • IDDD の読書会も変わらず継続

出来事

9 月振り返り

転職

  • 新卒で入り 6 年半いた会社を辞めた
  • 理由はこんな感じ
    • もう少しユーザに近いものを作りたいと思った
    • 息の長い自社サービスを作っている会社でものづくりをしてみたかった
    • 今までは幅広く技術を触ってきたので少し特化させてみたかった → フロントエンドに注力
    • そういうお年頃だった

新しい会社

  • フロントエンドエンジニアとして入社
    • 気づいたら 1 ヶ月経ってた早い
  • 純社員は 10 人ちょい、業務委託を含めて 5, 60 人の規模の会社
  • ファミレスブースがあったりリフレッシュスペースがあったり今風

直近の技術スタック

  • Backbone on Rails な感じのフロント開発をしている
    • たまたま今やっているプロジェクトがそういう感じなだけで新しめのプロジェクトは Angular とか使われてる
    • Backbone は Rails Assets で組み込まれてる
  • View のテンプレートエンジンは slim
  • CSS デザインは SMACSS
  • サーバ側はちゃんと見れてないが、DB は MySQL、キャッシュは Redis

その他

JavaScript で HTTP 通信

XMLHttpRequest(XHR)

developer.mozilla.org

  • JavaScript で HTTP 通信をする際に使用する API
  • ページ全体を再読込することなく Web ページの一部を更新することができるため Ajax プログラミングで使われる

使い方

const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.send();

レスポンス受け取り

  • XHR イベントの監視には addEventListener() を使用する

developer.mozilla.org

  • イベントタイプには load を指定する
const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.addEventListener('load', (event) => {
  console.log(event.target.status);
});
request.send();
  • エラーハンドリングにはイベントタイプに error を指定する
    • あくまで HTTP 通信のエラーハンドリングに使用するのであり、 API コールのエラーステータスを拾うには load 内でおこなう
const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.addEventListener('load', (event) => {
  console.log(event.target.status);
});
request.addEventListener('error', () => {
  console.log('通信エラー');
});
request.send();

フロントエンド周りの情報収集

JSer.info

JSer.info

  • 週間で JavaScript の最新情報が投稿される

POSTD

POSTD | プログラミングの話題を翻訳して届けるエンジニアのためのニュースメディア

  • フロントエンドに限らないが、最新ニュースが投稿される

Frontend Weekly

Frontend Weekly

  • フロントエンドの Weekly ニュースが届く
    • 英語記事も多い

TC39

GitHub - tc39/agendas: TC39 meeting agendas

jxck blog

https://blog.jxck.io/

  • jxck さんのブログ

Node.js ブログ

Node.js

  • Node.js のリリース状況がわかる

(他にもあれば追記していく)

Yarn

Yarn とは

  • JavaScript のためのパッケージ管理ツール

特徴

  • 速い
    • ダウンロードしたパッケージをキャッシュしており、並列で処理をするから速い
  • 安全
    • インストールされているパッケージの整合性を確認するため安全

インストール方法

$ npm install -g yarn

Yarn のコマンド

// 初期化 package.json を作成する
$ yarn init -y

// パッケージの追加
$ yarn add [package]
$ yarn add [package]@[version]
$ yarn add [package]@[tag]

// 開発用パッケージの追加
$ yarn add --dev [package]

// パッケージの更新
$ yarn upgrade [package]

// パッケージの削除
$ yarn remove [package]

// node_modules/.bin/ 配下のコマンド実行
$ yarn run [command]

Yarn と npm のコマンド比較

依存関係とバージョニング

package.json

  • パッケージをインストールするために名前とバージョンを記録

yarn.lock

  • 各依存関係のどのバージョンがインストールされたかを正確に保存するために必要
    • これにより一貫性のあるインストールが実現できる
  • npm-shrinkwrap.json に似ているが、損失なく再現できる

キャッシュ

  • Yarn はインストールしたパッケージの情報をキャッシュに格納する
// キャッシュ情報を出力
$ yarn cache ls

// キャッシュが格納されているディレクトリの確認
$ yarn cache dir

// キャッシュのクリア
$ yarn cache clean