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

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

iTerm から Hyper に移行

Hyper

困ったこと

  • Vim の NERDTree を使ってツリーを表示しているが一部文字化けしてディレクトリが開けない
  • ターミナルの日本語表示がおかしくなるので .bash_profile に LANG=ja_JP.UTF-8 を追加

メモ

  • 昔入れたときはタブ切り替えが ⌘-shift-[ とかでできなかったができるようになった
    • ⌘-d で画面分割もできる
  • config file は ~/.hyper.js にある

追加した Plugin

プラグイン 説明
hypercwd タブを開くときに今いるディレクトリで開く
hyper-statusline ステータス(カレントディレクトリやカレントブランチ)を表示
hyperpower コマンド打つとアニメーション
hyperborder ボーダーにグラデーション

3, 4 月振り返り

(3 月の振り返りを忘れていたのは内緒)

会社でやっていること

  • 入社時からやっていたプロジェクトが大きなリリースを迎え一段落した
    • 仕事内容が機能開発からバグ修正にシフト
  • 他のプロジェクトのコードレビューをすることが増えた
    • プロジェクトごとに使っているフレームワークが異なるのでスイッチングコストが高い…
  • 手を上げて始めた「テスト駆動開発」の読書会はついに 16 回目を迎えてもうすぐ第一部が終わりそう
  • 同僚が始めた「Structure and Interpretation of Computer Programs(SICP)」の読書会に参加して、はじめて Lisp に触れる

個人でやっていること

  • Angular を使ってアプリを作ろうと思っているが進捗良くない
    • ちょうど GW だから今から頑張る
  • Web Components よく聞くようになったのでお試しで触ってみている
  • 「エンジニアリング組織論への招待」を読んでいる

その他メモ & 振り返り

  • 時間の確保がうまく出来ていないのが難点
  • 初めて技術書展に行ってきたけど、活気があって楽しかった

MANABIYA.TECH に行ってきたのでメモ

https://manabiya.tech/contents

The Angular World

https://slides.com/laco/manabiya-2018-the-angular-world#/

  • CLI や codelyzer が整備されているのでチーム開発に向いている
  • Service Worker が CLI に integration されている
  • ネイティブアプリ向けの仕組みもある
    • Ionic
    • NativeScript
  • AngularJS が 2021/6/30 にサポート終了
    • 3 年以内に社内の AngularJS をどうするか考えないといけない
  • フロントエンドエンジニアは疲弊が多い
    • 大変なところはフレームワークに任せてフロントエンドエンジニアは Architecture や UX に集中すべき

2018年のWeb標準

https://speakerdeck.com/1000ch/web-standards-2018

  • Service Worker, Web Components, Web Payments いいよ、という話
  • Service Worker
    • PWA で Web の良さを活かしつつネイティブアプリの長所を取り入れる
    • キャッシュだけでも取り入れる価値あり
  • Web Components
    • React などのビューライブラリの流れ
    • Chrome と Safari が対応しているからモバイルでは使える
    • ライブラリに依存しないので廃れにくい
  • Web Payments
    • よく聞く話だけだった

Vue.jsの今後と次世代のWeb開発に向けて

Web Application 2018 From Performance Perspective

https://speakerdeck.com/yosuke_furukawa/web-application-2018-from-performance-perspective

  • Web の変遷
    • Good Old Web -> SPA -> Evolve SPA -> Future
  • これからのパフォーマンス
    • 多重化されたリクエスト -> HTTP/2
    • とりあえず「超速本」
    • Service Worker
    • SSR
    • CDN
    • 投機的先読み

UIT#2 に参加したのでメモ

参加して来たのでメモ

UIT#2 怠けるために努力を惜しまない プロのフロントエンドエンジニアたち

https://uit.connpass.com/event/79891/ 会場 : LINE株式会社

UIT の目的

  • UIT は以下の目的で運営されている
    • 足並みを揃える
    • フォローアップ
    • フィードバック

Reactのコンポーネント作成を効率化しよう

https://speakerdeck.com/mukai21/reactfalsekonponentozuo-cheng-woxiao-lu-hua-siyou

  • create-component-app の話してた
  • プロジェクト初期でがんがんコンポーネント作るタイミングなら良さそう
  • Storybook のファイルが吐き出されるのもよい (もちろんテストも)

ウェブクリエイターに贈る自動化Tips

  • imagemin
    • よさそう
    • WebP とか guetzli にも対応しているらしい
    • 画像をリポジトリに入れた時に圧縮処理が走るようにしてると言っていた
  • npm outdated
    • 常に最新バージョンを意識するのはいいが、上げ続けると確認作業が大変そうという気がしなくもない

Swagger から JavaScript ( TypeScript ) コードを自動生成してコーディングを効率化しよう

  • Swagger にこんないろいろあるの知らなかった (Spec だけかと思ってた)
    • Swagger Spec
    • Swagger UI
    • Swagger Codegen
  • Swagger Codegen を使うと API のスタブなどが作れるよって話だった
    • ただ、デフォルトだと Java / Groovy で書かないといけないので、自作したよ、と
  • 正直ピンとこず…

npmとmakeでプロジェクトをコントロールする

https://speakerdeck.com/brn/maketonpmdepuroziekutowokontororusuru

  • Gulp や Grunt は結構属人化しやすく、長く運用しているとツラさが出てくるという話
    • ので npm scripts でやっていく話
    • npm scripts は shell なので環境差分を吸収すべく npm modules を使っているらしい
  • DLL Plugin を使っているという話
    • 3rd Party とかのモジュールをまとめて速度を向上させるらしい
    • → よさそう (Webpack で設定)
  • Lint と Formatter の話
    • ルールに違反しているのはコミットさせたくない
      • → ので git pre-commit-hook とかで制御しているらしい
    • こういうのは初期段階からやっておきたい

画像を透過したい ただそれだけのために無駄に頑張る話

https://www.slideshare.net/koheikawasaki902/webassembly-text-format-90039362

  • なんかすごかった

2018 年 2 月振り返り

会社でやっていること

  • プロジェクトは変わらず
    • プロジェクトリリースに向けてシステムテストが実施された
    • ので、そのバグ対応がメイン
    • GA の対応とかもした
  • 別プロジェクト(AngularJS) のレビューも実施
  • テスト駆動開発の読書会は継続中

個人でやっていること

  • Qiita を新着順で表示する Viewer を作った (https://qiewer-app.firebaseapp.com/)
    • とりあえず雑に作ったので、気が向いたら改善していく
  • ざっと超速本を読んだ
    • 情報量が多いのでメモをしながら 2 周目を読む予定
  • Angular で新規アプリを作り始める

その他メモ & 振り返り

  • 会社にプチローソンが導入されて電子マネーが使えるようになったので便利
  • 銀座の回らない寿司食べ放題に行った、コスパ良い
  • 会社の近くのパスタ屋さん(あるでん亭)にようやく行けた、よい
  • 家系ラーメンのしゃぶしゃぶに行った、しめのラーメンが美味しい
  • 4K テレビを買って QOL が上がった、アニメしか見てないが…
  • ショルダーバッグに疲れリュックを買った、とてもよい
  • DeNA Tech Conf に行った、フロントエンドの設計周りで話が聞けてよかった
  • Inside Frontend に行った、日経電子版とかの話を聞いて速さ大事、と思った
  • 3 月は作り始めた Angular アプリを形にしたい

2018 年 1 月振り返り

会社でやっていること

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

個人でやっていること

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

振り返り

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

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

Angular

問題

  • 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;
  }
}