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

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

2018 年 1 月振り返り

会社でやっていること

  • プロジェクトは変わらずだが、忙しくなってきた
  • 先月始めた読書会は継続中
  • 年始早々に採用面接もやった
  • 天気が悪い日にリモートワークしてみた

個人でやっていること

  • Angular チュートリアルをやった
    • angular-cli-ghpages を使って GitHub Pages にデプロイとかもした
  • Angular でサンプルアプリ作ってる
    • CSS でグラデーションやってみたが、ゴミゴミしすぎてシンプルなカラーリングにした
  • Angular Material を導入
  • vimrc を久しぶりに整理
  • We Are JavaScripters! @15th を覗いてきた

振り返り

  • 引っ越そうと思ったけどやめた
  • 読書があまり進んでいない
  • Angular 系をがっつり身につけたい
  • CSS 力を強化したい
  • 忙しさにもよるが、週一くらいでリモートワークするのも悪くないと思った
  • 会社の先輩にローストホース連れて行ってもらった(馬!)

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/

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