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

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

Angular innerHTML で出力している className にスタイルを適用する

問題

  • innerHTML を使って表示している DOM の className にスタイルを適用できない問題が起きた
rendered_body = "<div class="code-frame"><div class="highlight"><pre><span></span>$yarn</pre></div></div>"
<div class="content" [innerHTML]="rendered_body"></div>
.content {
  .code-frame {
    background-color: black;
  }
}

解決策

  • スタイルに ::ng-deep を使用すると適用できた
::ng-deep .content {
  .code-frame {
    background-color: black;
  }
}

2018 年抱負

目標

  • 月 1 で Qiita にアウトプット
    • 去年は 7 件だったので 12 件を目指す
  • 月 1 でブログ更新
    • 去年は 15 件だったので同じくらい書きたい
  • 技術書を年間 5 冊読む
  • どこかで 1 回 LT する
  • GitHub の草生やす
    • 毎日コーディングする
    • 個人で一つサービスをオープンする
  • 貯金を増やす

12 月振り返り & 今年の振り返り

会社でやっていること

  • 早いもので今の会社に移って 4 ヶ月が経った
    • 4 ヶ月なのに会社紹介の Wantedly 記事とか書いた
  • 採用系も関わらせてもらって、小さい会社だから前職ではやってなかったことがすごい出来ている
  • 会社の Advent Calendar に 3 日分投稿した
    • 意外としんどかった
  • プロジェクトは変わっていないが、忙しくなってきてはいる
    • Rails Assets とか force_reload とか flashflash.now の違いとかを学んだ
  • 社内で読書会を企画し、始めた
  • ボドゲも色々した

個人でやっていること

  • Angular チュートリアルを始めたのに途中…
    • 冬休み中に終わらすゾ
  • Advent Calendar ネタを探して React VR に手を出した
  • テスト駆動開発の写経をするために Java とか JUnit とか Gradle とか
  • IDDD の読書会に参加中

出来事

  • Echo Dot 買ったが実際何もしてない
  • 久しぶりに服を買った
    • 着なくなったのを捨てたい
  • Medium 記事をお気に入りするために Medium にアカウント作った
    • 記事を書くかは不明
  • 個人の日報用に Kebela を使い始めた
  • 個人のタスク管理用に Trello を導入

今年の振り返り

目標達成の確認

約 1 年目 にちょうどはてなブログを始め、目標を立てていた

  • 月 2 の頻度でブログ更新
    • 今年は全部で 15 件投稿していたので、未達(難しい)
  • 月 1 で Qiita 記事を書く
    • 今年は 7 件しか書いていない…アウトプットが足りない!
  • 月 1 冊は技術書を読む
    • 買うばっかりだった
    • 読む本・読んだ本を Trello で管理しようと思う
  • ランニングを続ける (振り返ってみると去年の 3/27 から始めた模様)
    • fitbit の記録を見ると、11 月中旬で止まっている…
    • 寒くて諦めていた。。週末くらいは走るようにしたい
  • 体重を減らす (上もその一環だが、減量を意識する)
    • 2 年前に目標にしていた数値まで落ちた
    • 学生時代の体重まで落ちたので満足

その他

  • やはり転職が一大イベントだった
    • 完全にフロントエンドに舵をきった感じ

11 月振り返り

だいぶ忘れていたが振り返っておく

会社でやっていること

  • 仕事の内容は変わっていない
  • 今のプロジェクトに結構 Lint ツールを入れた
    • ホントはテストを書きたかったが、まずはすぐにできそうな Lint を導入するところから
  • Qiita の Organizations に入れてもらったりした
    • Advent Calendar の準備
  • フロントエンドチームで週一のランチを導入してみた

個人でやっていること

  • Angular の練習を始めるために本を買った
  • 昔の Rails アプリを触りつつ RuboCop, Slim-Lint, CoffeeLint のお試しをした
  • IDDD の読書会に参加中

出来事

CoffeeLint を使ってみる

目的

  • Rails アプリケーションの JavaScriptCoffeeScript を使用しているが書き方がバラバラなので Lint をかけたい

CoffeeLint とは

github.com

導入

  • npm でインストールする
$ npm install -g coffeelint
  • インストール確認はお決まりのバージョン確認で
$ coffeelint -v

使い方

  • ディレクトリを指定するとその配下にある coffee ファイルをチェックする
$ coffeelint app/assets/javascripts/
  • 設定ファイルは下記コマンドで作成
$ coffeelint --makeconfig > coffeelint.json

既存アプリケーションへの導入

  • 一旦すべての level フラグを ignore にする
  • 必要な箇所(直しやすい箇所)からフラグを error にして直していく

Slim-Lint を使ってみる

目的

  • Rails アプリケーションの View template として使用している Slim に Lint を書けたい

Slim-Lint とは

github.com

  • Slim template の Lint ツール
    • RuboCop と統合されているらしい

導入

  • Gemfile に下記を追記する
gem 'slim_lint', require: false
  • インストール確認は下記
    • gem の名前は slim_lint だけど、コマンドは slim-lint... 紛らわしい
$ bundle exec slim-lint -v

使い方

  • RuboCop と違いチェック対象のパスを明示しなければならない
$ bundle exec slim-lint app/

既存アプリケーションへの導入

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