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

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

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…

CircleCI Local CLI を試す

CircleCI の設定をしているときに config の validation check をローカルでやりたくなった 調べたところ Using the CircleCI Local CLI - CircleCI というものがあったで導入する インストール とりあえず、記事に書いてある通りインストール(Mac を使って…

Bonfire Frontend #2 メモ

行ってきた yj-meetup.connpass.com Flummox から Redux へリプレースした話 Flummox は知らなかった 選択肢には Fluxible もあったらしい → これも知らなかった コンポーネントは Atomic Design の思想でやっているようだが 5 層もないらしい FOLIOに画像回…

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

気になったことトピック Chrome 68 : HTTP のサイトに Not Secure 表示がされるようになった 気になった記事 Angularは包括的なフレームワークだから企業に支持される。UIコンポーネントで知られるインフラジスティックス開発ツール担当VPに聞いた Element.t…

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

気になったことトピック Puppeteer が 1.6 になった ESLint でセキュリティインシデントが発生(対策済み) https://qiita.com/mysticatea/items/0141657e4478d9cf4614 気になった記事 フロントエンドの「想定外」に対応する考え方とTipsいくつか SHOWROOMの新…

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

気になったことトピック Renovate Dependabot のような GitHub apps があるっぽい(未検証) 気になった記事 大規模Angular in 現場 Automated Dependency Updates with Renovate Renovate を知ったので試したい エンジニアになる覚悟 フロントエンドエンジニ…

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

前回から 10 以上あいてしまった (週刊とは何なのか) 気になったことトピック Vue Native collect.js また新しいコレクション操作のライブラリが… サーバーサイドに Laravel 使ってると相性がいいらしい? akita Angular 用のステート管理ライブラリ Flux っ…

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

気になったことトピック agreed リクルートテクノロジーズが開発している JSON モックサーバー Storybook の Angular CLI 対応がマージされたっぽい https://github.com/storybooks/storybook/pull/3491 MobX 5.0.0 がリリース https://github.com/mobxjs/mo…

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

気になったことトピック Webdash 使用している Package.json の一覧や build 成果物のファイルサイズなどを表示するダッシュボードが見れる 静的ファイルが出力できるわけではないので少し微妙… react-sketchapp React のコードから Sketch のファイルを生成…

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

なんとなく思いつきで今週目についたフロントエンドネタをメモっていく (来週も続くかはわからない) 気になったことトピック Nest サーバーサイドアプリケーションのための Node.js フレームワーク Next, Nuxt と同じノリだと思っている Angular の影響を強…

iTerm から Hyper に移行

Hyper https://hyper.is/ Next.js や Nuxt.js の ZEIT が出しているターミナル 困ったこと Vim の NERDTree を使ってツリーを表示しているが一部文字化けしてディレクトリが開けない .vimrc に set encoding=utf-8 を追記すると直る https://github.com/zeit…

3, 4 月振り返り

(3 月の振り返りを忘れていたのは内緒) 会社でやっていること 入社時からやっていたプロジェクトが大きなリリースを迎え一段落した 仕事内容が機能開発からバグ修正にシフト 他のプロジェクトのコードレビューをすることが増えた プロジェクトごとに使ってい…

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

https://manabiya.tech/contents The Angular World https://slides.com/laco/manabiya-2018-the-angular-world#/ CLI や codelyzer が整備されているのでチーム開発に向いている Service Worker が CLI に integration されている ネイティブアプリ向けの仕…

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

参加して来たのでメモ UIT#2 怠けるために努力を惜しまない プロのフロントエンドエンジニアたち https://uit.connpass.com/event/79891/ 会場 : LINE株式会社 UIT の目的 UIT は以下の目的で運営されている 足並みを揃える フォローアップ フィードバック R…

2018 年 2 月振り返り

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

2018 年 1 月振り返り

会社でやっていること プロジェクトは変わらずだが、忙しくなってきた 先月始めた読書会は継続中 年始早々に採用面接もやった 天気が悪い日にリモートワークしてみた 個人でやっていること Angular チュートリアルをやった angular-cli-ghpages を使って Git…

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 を使用す…

2018 年抱負

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

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

会社でやっていること 早いもので今の会社に移って 4 ヶ月が経った 4 ヶ月なのに会社紹介の Wantedly 記事とか書いた 採用系も関わらせてもらって、小さい会社だから前職ではやってなかったことがすごい出来ている 会社の Advent Calendar に 3 日分投稿した…

11 月振り返り

だいぶ忘れていたが振り返っておく 会社でやっていること 仕事の内容は変わっていない 今のプロジェクトに結構 Lint ツールを入れた ホントはテストを書きたかったが、まずはすぐにできそうな Lint を導入するところから Qiita の Organizations に入れても…

CoffeeLint を使ってみる

目的 Rails アプリケーションの JavaScript に CoffeeScript を使用しているが書き方がバラバラなので Lint をかけたい CoffeeLint とは github.com CoffeeScript 用の Lint ツール 導入 npm でインストールする $ npm install -g coffeelint インストール確…

Slim-Lint を使ってみる

目的 Rails アプリケーションの View template として使用している Slim に Lint を書けたい Slim-Lint とは github.com Slim template の Lint ツール RuboCop と統合されているらしい 導入 Gemfile に下記を追記する gem 'slim_lint', require: false イン…

RuboCop を使ってみる

目的 コーディングルールが浸透していない Rails アプリケーションに Lint ツールを導入する RuboCop とは github.com RuboCop is a Ruby static code analyzer. というわけで平たくいうと Lint ツール たくさんの設定項目があり、微調整できるとのこと 導入…

Rails で日付表示に年月日のセレクトボックスを用意する

Rails で日付表示に年月日のセレクトボックスを用意 前提 例えば User テーブルの birthday カラムがあり、その情報を年・月・日それぞれ別のセレクトボックスで表現するのに悩んだのでメモ 結論 date_select を使うと実現できる Rails の date_select でつ…

10 月振り返り

会社でやっていること 変わらず Backbone.js on Rails のアプリを触っている 典型的な fat controller であることがわかりどうにかしたい まずは Rails のリファクタリングをするためにどういう手法を取るのがよいか調査したい そろそろ Docker を練習しよう…

9 月振り返り

転職 新卒で入り 6 年半いた会社を辞めた 理由はこんな感じ もう少しユーザに近いものを作りたいと思った 息の長い自社サービスを作っている会社でものづくりをしてみたかった 今までは幅広く技術を触ってきたので少し特化させてみたかった → フロントエンド…

JavaScript で HTTP 通信

XMLHttpRequest(XHR) developer.mozilla.org JavaScript で HTTP 通信をする際に使用する API ページ全体を再読込することなく Web ページの一部を更新することができるため Ajax プログラミングで使われる 使い方 XMLHttpRequest クラスをインスタンス化し…

フロントエンド周りの情報収集

JSer.info JSer.info 週間で JavaScript の最新情報が投稿される POSTD POSTD | プログラミングの話題を翻訳して届けるエンジニアのためのニュースメディア フロントエンドに限らないが、最新ニュースが投稿される Frontend Weekly Frontend Weekly フロント…

Yarn

Yarn とは JavaScript のためのパッケージ管理ツール 特徴 速い ダウンロードしたパッケージをキャッシュしており、並列で処理をするから速い 安全 インストールされているパッケージの整合性を確認するため安全 インストール方法 brew や npm コマンドでイ…

asdf を使った Erlang/Elixir のインストール & Elixir初心者向けハンズオン に参加したメモ

Erlang のインストール 事前に openssl をインストール (インストールしていない場合 mix コマンドでエラーがでる) $ brew install openssl 事前に wxWidgets をインストール (インストールしていない場合 observer start が起動しない) $ brew install wxma…