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

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

builderscon 2019 - 2 日目に参加してきた話

昨日 に引き続き参加してきた。2 日間通してとてもいいカンファレンスだったし、来年も参加したいと思った。

Predictive Prefetching for the Web

memo

  • Web においてパフォーマンスが求められる場合 prefetching が有効
  • しかし prefetching はデータ消費量(通信量) があがるという欠点もある
  • 必要になるであろうファイルだけ prefetching できると嬉しいので Guess.js と Google Analytics を使って navigation graph を作りページ遷移を予測して prefetching する

感想

  • Google Angular Team の Minko Gechev さんの発表ということで聞きに行った、が英語の発表だったのでちゃんと理解できていないかも…
  • prefetching は前からモバイルだとデータ通信量気になっちゃうよなーと思っていたのでとても納得感のある発表だった

フロントエンドのつくりかた - シンプルなコードを達成するためのセオリー

発表資料

memo

感想

  • 昨今の色々あるフレームワークに縛られないフロントエンド開発に関する話という感じで発表はとてもよかった
  • ただ個人的には Discover Something New という感じではなかった
    • と、同時にいつも会社でいろんなことを学ばせてもらってるなーと改めて実感

Oxygen Not Included: Making a Game That Inspires Science

memo

  • ONI は科学について学ぶことを目的としたゲーム
  • 5 年(?)くらいかけて作ったらしい
  • 多くの人に学んでもらうためには多くの人に遊んでもらわないといけない
  • SimCity とかも参考にしているとか

感想

  • 同時通訳とても助かる
    • 実際に同時通訳聞いてて、このスキルは真似できないと思った
  • Oxygen Not Included やってみたくなった
  • いろんなトライアンドエラーができそうで「こんなことをしたらどうなるか?」など探究学習に向いてそう

その他

スーパーカミオカンデの発表を聞き逃したことが唯一の心残り…動画上がったら見よう。今回は懇親会系を何も申し込んでなかったので来年はそのあたりもちゃんと申し込もうと思った。

お昼

今日は SAKARA internet さんのランチ券をゲットしたので食べてきた。ごちそうさまです。 f:id:kasaharu:20190831193536j:plain

見本市

自作ガジェットを見せてもらったりして、普段ソフトウェアとしか向き合わないから新鮮だった。

おわり

builderscon 2019 - 1 日目に参加してきた話

builderscon 2019 に参加してきた。ブログを書くまでが builderscon って言ってたのでブログを書いておく。

builderscon は「知らなかった、を聞く」をテーマとしているのであえて普段仕事や趣味でまったく触れない分野もいくつか選んで聞いた。 聞いたセッションのメモと感想。

ブロックチェーン時代の認証

発表資料

memo

  • ブロックチェーンを仕事で使っている人は部屋に 2 人くらいしかいなかった
  • そもそもブロックチェーンとは
    • 分散型取引台帳とも呼ばれている
  • Gartner のハイプ・サイクルでは幻滅期に入っている
  • ブロックチェーンには「パブリックチェーン」と「プライベートチェーン」の 2 種類がある
  • ブロックチェーンを使うことでデジタルアセットという形で「資産」を持つことができるらしい
    • 資産だから所有や譲渡ができる → 未来感ある
  • 分散型だから誰か一人の意思で改善するのは不可能
  • 分散アプリケーションのプラットフォームとして有名なのは Ethereum
  • Ethereum Wallet に対応している Browser もあるらしい(Opera とか)

感想

  • 朝イチから事前知識ゼロの発表を聞いてきた
  • ところどころ単語は知っているものの意味はまったくわかってなかったので少しわかるようになったかも
  • 知らない単語もいっぱい出てきてなんだろうってなってる
    • Web 3?
  • デジタルアセットと聞いて頭に浮かんだのは電子書籍。かなり普及してきているけど、提供元がサービス停止したら終わりだし所有感ないなーと感じていたけど、こういうことか?と感じた
  • 肝心の認証の話まで理解が追いつかなかった…
  • とりあえず Ethereum Wallet に対応している Opera インストールしてみた、なるほど f:id:kasaharu:20190830210215p:plain

コンパイラをつくってみよう

発表資料

memo

感想

  • こちらも普段なら聞かないようなカテゴリ(会社の先輩オススメ)
  • かなりでかい会場でライブコーディングすごい
  • コンパイラ書いてみたいと思ったことある人ー?」の質問に手を上げた人が多くてびっくりした
  • switch - case の連続で泥臭い感じがしたw
  • ライブコーディング中に間違えたところを指摘できるオーディエンス強すぎでは?と素直に驚いた
  • 今日聞いた中で一番一体感あってよかった

Web Componentsを利用した段階的AngularJS脱出作戦

発表資料

memo

  • Web Components in 2019
    • Polyfill を使えば Web Components はどのブラウザでも試せる
    • Polyfill を使わなくても Safari, Firefox, Chrome は使える
  • Custom Elements はその中に小さな世界がある

感想

  • Custom Elements 化のデモわかりやすかった
  • Stackblitz デモに良さそう

現代フロントエンドに欠かせないwebpackとBabelを理解しよう!

発表資料

memo

  • 現在の JS についておさらい : ちゃんと仕様あるよという話
  • Stage 2 Draft を使う人は割と挑戦者(笑)
  • Babel の変換の 3 つの段階
    • Parsing(AST) → Transformation → Code Generate
  • コードを変換するのは Babel Plugins
    • Plugins の集まりが Presets
  • webpack は 7 割(?) Plugin
  • 公式ドキュメント読むといいよ

感想

  • 「webpack の公式ドキュメント読んだことある人いますか?全部!」のパワーワード
  • とても楽しそうに発表しているのが伝わった

ウォレットアプリ「Kyash」の先 〜「Kyash Direct」のアーキテクチャ

発表資料

memo

  • Kyash ウォレットの次の Kyash Direct(to B) の話
  • Direct を開発するときに今のウォレットの拡張にせずにゼロから作った話をしていた
  • なぜゼロから作ったか
    • 無理が来ているウォレットの根本的なアーキテクチャ課題を解決するチャンス
    • 別系統のシステムを 2 つ抱えることになるが利点を選んだ
  • ウォレットは?
    • microservices で開発
    • エンジニアが足りず苦しかった
    • microservices とはいえ DB は中央に 1 つ

感想

  • 今日最後のセッションだったのでだいぶ疲れていてあんま頭に入らなかった
  • 理解に時間がかかるしところどころ置いてけぼりだったのでまだまだアーキテクチャの知識が不足していると感じた
  • memo も全然足りていないのでリンクの資料見たほうがいい

その他

builderscon 初めて来たけど楽しかった。ただ丸一日セッション聞くのがだいぶツライ…脳みその衰えを感じる。

お昼

ランチ券はゲットできなかったけど、普通にお弁当配られてた。よかった。 コーヒーもあったしお水もあったし、飲食には困らなかった。 食べる机がちょっと狭めだったかも。。 f:id:kasaharu:20190830215207j:plain

ノベルティ

サポーターだったからノベルティいっぱいあった。 あと名札かっこいい。 f:id:kasaharu:20190830215508j:plain

電源・Wi-Fi

電源は Niwa Hall にしかなかったが、聞きたいセッションが Niwa Hall であるときに充電することができたので困らなかった。 Wi-Fi は先着順でセッション前に並んでいたようにも見えたけど、1 つ聞き終わった後に見ると列もなく、余っていたので午後以降はありがたく使用した。

おわり

2018 年振り返り & 2019 年の抱負

目標の振り返り

  • 今年の抱負 はこれだった
    • 月 1 で Qiita にアウトプット
      • 7 件しか書けていない… 2 ヶ月に 1 回くらいが現実路線か…
    • 月 1 でブログ更新
    • 技術書を年間 5 冊読む
      • どれも中途半端になってしまったので、再度来年の目標にする
    • どこかで 1 回 LT する
      • これもできなかった。が、来年発表する予定はできた
    • GitHub の草生やす
      • サービスをオープンするまでは行かなかったが、毎日草はやしはした
    • 貯金を増やす
      • まぁまぁ増えた気はする

技術的な話

  • 結構 Angular に投資した一年だった
    • 今年の Qiita の記事のほとんどが Angular 関連
  • 会社のプロジェクトでしっかりテストコードを書く習慣をチームにつけた
  • Atomic Design 本とかも読んでコンポーネント設計とかも考えたりしている
  • Advent Calendar ネタに書いた記事が一瞬はてぶのホットエントリーに入ったりした

その他

  • PayPay チャレンジで Switch 買った(今更)
  • L’ArChristmas 行ってきたが、すごい盛り上がった
  • The Alley のタピオカにハマった

2019 年の抱負

  • Angular を使ったアプリケーションを個人で作る
    • 今年は GitHub に草生やすのが目的だったが 2019 年は作るのを目的にする
  • 月 1 くらいで Qiita か Medium に記事を書く
  • 筋トレする
  • 定期的に振り返る

Storybook for Angular を IE でも確認できるようにする

問題

  • Storybook を起動して IE で見ようとすると Object.assign() が見つからずエラーになっていた

やったこと

  • ES2015 の仕様に対応していないので Babel を使ってトランスパイル

入れたパッケージ

設定ファイルの変更

  • お手元の .storybook/addons.js で polyfill をインポート
+ import '@babel/polyfill';
  import '@storybook/addon-notes/register';

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

気になったことトピック

気になった記事

TypeScript 2.8 系以上で Angular AOT Compiler が失敗する

Angular CLI を v6.0.x 系で TypeScript を v2.8 以上にしてビルドを実行すると以下のエラーが出て、失敗する

ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.9.1 was found instead.

現時点では Angular AOT Compiler v6.0.x は TypeScript 2.7.x しかサポートしておらず、それ以上のバージョンを使う場合は、アプリケーションの tsconfig(src/tsconfig.app.json) 内の angularCompilerOptions 内の disableTypeScriptVersionCheck オプションを使用してエラーを無効にする必要があるらしい

github.com

tsconfig.app.json を下記のように変更するとバージョンチェックを無視するようになる

   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "disableTypeScriptVersionCheck": true
+  }
 }

CircleCI Local CLI を試す

CircleCI の設定をしているときに config の validation check をローカルでやりたくなった

調べたところ Using the CircleCI Local CLI - CircleCI というものがあったで導入する

インストール

とりあえず、記事に書いてある通りインストール(Mac を使ってます)

$ curl -o /usr/local/bin/circleci https://circle-downloads.s3.amazonaws.com/releases/build_agent_wrapper/circleci && chmod +x /usr/local/bin/circleci

ヘルプコマンドを叩いてインストールされたかを確認する

$ circleci -h
Receiving latest version of circleci...
INFO: We've built a brand new CLI for CircleCI! Please run 'circleci switch' to upgrade.
The CLI tool to be used in CircleCI.

Usage:
  circleci [command]

Available Commands:
  build       Run a full build locally
  config      Validate and update the circleCI configuration file
  help        Help about any command
  step        Execute steps
  tests       Collect and split files with tests
  version     Output version info

Flags:
  -h, --help      help for circleci
      --verbose   enable verbose logging output

Use "circleci [command] --help" for more information about a command.

簡単にインストールできた!

validation check

さっそく validation check をすべくコマンドを叩く

$ circleci config validate -c .circleci/config.yml

INFO: We've built a brand new CLI for CircleCI! Please run 'circleci switch' to upgrade.


Error: Error parsing config file: yaml: line 51: mapping values are not allowed in this context

ちゃんとエラーが検出されたのでチェックできていることがわかる

ついでになんかアップグレードしてくれと出ているので言われたとおりコマンドを実行

$ circleci switch

Thank you for your interest in trying the new CLI!

Be sure to read the docs if you get stuck. [https://github.com/CircleCI-Public/circleci-cli#readme]

Are you sure you're ready to upgrade? [y/N]: y
Upgrading CircleCI to the newest version.
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1138  100  1138    0     0   4169      0 --:--:-- --:--:-- --:--:--  4183
Finding latest release.
Downloading CircleCI v0.1.1568
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   632    0   632    0     0    884      0 --:--:-- --:--:-- --:--:--   885
100 3409k  100 3409k    0     0   567k      0  0:00:06  0:00:06 --:--:--  842k
x LICENSE
x README.md
x circleci
Installing to /usr/local/bin/circleci
/usr/local/bin/circleci

$ circleci -h
This project is the seed for CircleCI's new command-line application.


Usage:
  circleci [command]

Available Commands:
  config      Operate on build config files
  diagnostic  Check the status of your CircleCI CLI.
  help        Help about any command
  local       Debug jobs on the local machine
  namespace   Operate on namespaces
  orb         Operate on orbs
  query       Query the CircleCI GraphQL API.
  setup       Setup the CLI with your credentials
  update      Update the tool
  version     Display version information

Flags:
  -h, --help           help for circleci
      --host string    URL to your CircleCI host (default "https://circleci.com")
      --token string   your token for using CircleCI
      --verbose        Enable verbose logging.
Use "circleci [command] --help" for more information about a command.

もう一回チェックのコマンドを走らせるとさっきより詳細にエラーメッセージが表示されるようになった

github.com