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

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

週刊フロントエンド vol.3

週刊フロントエンド

気になったことトピック

気になった記事

週刊フロントエンド vol.2

週刊フロントエンド

気になったことトピック

  • Webdash
    • 使用している Package.json の一覧や build 成果物のファイルサイズなどを表示するダッシュボードが見れる
    • 静的ファイルが出力できるわけではないので少し微妙…
  • react-sketchapp
    • React のコードから Sketch のファイルを生成できるらしい
  • Prettier 1.13
    • 1.13 まで進んだみたい
    • Angular だと TSLint との共存が難しい印象だった
  • Pipeline operator
    • proposal だが JS でも Pipeline operator が検討されているらしい

気になった記事

週刊フロントエンド vol.1

週刊フロントエンド

なんとなく思いつきで今週目についたフロントエンドネタをメモっていく (来週も続くかはわからない)

気になったことトピック

  • Nest
    • サーバーサイドアプリケーションのための Node.js フレームワーク
      • Next, Nuxt と同じノリだと思っている
    • Angular の影響を強く受けているらしい
      • Module や Service のコードは確かに Angular っぽい
    • オブジェクト指向と関数型言語とリアクティブプログラミングを組み合わせているとか
    • 普通に yarn start した感じだとコードを変更してもオートリロードしない…
    • package.json を見ると Webpack を使った Hot Module Replacement もあるっぽいが期待した動きにならなかった
      • yarn webpack をしつつ yarn start:hmr を走らせたが自動で更新されなかった
  • Classcat
    • CSS の className を JS 内で簡単に組み立てるためのライブラリ
    • Hyperapp の人が作っている
    • Classnames と同じようだが早いらしい
  • lynt
    • ゼロコンフィグの JS linter
  • Next.js 6 リリース
  • React 16.4.0 リリース

気になった記事

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

  • なんかすごかった