今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。 サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た 今年は、 パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、 若干やりすぎと思いつ

これは、個人でどんなエディタを使うべきか、ではなく、「チームとして」新しいものを採用するとき、あるツールがエディタ横断で便利かどうかを考える必要がある。 自分個人としては、基本はAtomを使って、TypeScriptを書くときだけVS Code を使っている。ターミナルでは Vim。 環境でエディタを選ぶ 最近の新規プロジェクトでは、とくにブロッカーがなければ TypeScript を使っていいと思う。TypeScript を使うなら当然 VS Code を使うことになる。Atom や Vim でもいいが、TypeScriptのエディタとしては、流石に完成度が頭一つ抜けてる。JavaならJetBrains 的なノリで、TSならVSCode、そういうものと思ったほうが楽。 TS以外なら、エディタはなんでもいいが、ある程度流行ってるものでないとエコシステムに追いついてくれない。 prettie

と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ

作った。GWの間、コンビニと近所のカフェ以外に外出してないし、ゲームもしてない。 https://mizchi-sandbox.github.io/rpg-prototype/ で触れる。デザインはしょぼい。Chrome以外で動いてる気がしない。 コードはここ https://github.com/mizchi-sandbox/rpg-prototype 仮素材はウディタに付いてくるサンプル素材をお借りした。 WOLF RPGエディター公式サイト 【RPG作成フリーソフト】 仕様 Spaceでポーズ＆リスタート クリックでスキルの使用 一度スキルを使ったらクールダウンがある Player1 だけ操作できる あとはなんか察してほしい。 何故作ったか 前々から、ゲーム、とくにRPGを作りたいと思ってたのだけど、メインループがすんなり綺麗にかけたためしがない。趣味プロジェクトは技術的に辛いとやる

やられた。 blog.livedoor.jp 【ご注意ください】株式会社JMT、エヌティーサポート、ベイシスイノベーション、株式会社RGイノベーションといった悪質な代理店がNTTを名乗って So-Net NURO光の詐欺まがいの勧誘をしている件 http://satsumahomeserver.com/blog/4568 やりとり 「NTTフレッツ光です」 「料金改定がありましてその確認と手続きです」 まるで規定事項の伝達のような口ぶり。 「今の4500円から3800円になります。確認のためNTTの登録番号がわかる書類はありますか」 出してしまった。これ出した時点で勝手に契約させられた模様。これ立派な詐欺だと思うんですが。 この後、さきの資料にあるように、 「2か月無料の有料オプションに入ってることになってるので、自分で解約してくださいね」となった。今日まで料金改定と、＋アルファで有料オプ

これは、冒頭の問いから端を発した、各章のつながりが不明瞭なエッセイ、流行りのミームでいうと技術的ポエム、であり、プログラミングをテーマにしていてもプログラミングの記事ではない。(と一番最後まで書き終わった自分が注釈を入れている) 良いコードとは何か 趣味で4年、本腰を入れたは最後の2年なのだが、それから3年間ほど仕事でプログラムを書いてきた。それで、趣味プログラマと業務プログラマの一番の違いは、業務プログラマが要求されるのが「他人にどれだけ意図を伝えることができるか」ということに尽きると思うようになった。 他人にとって良いコードとは、書いた人の意味が読み解けるコードであると思う。どれだけ書いた本人の自意識の中でかっこいい・よいコードを書いたと思っていて、実際にちょっと紐解けばそのポテンシャルがあったとしても、隣に座っている人間に伝わらなかったら意味が無い。正しくコードレビューが行われるなら

僕がJavaScriptでライブラリを選定する際、迷ったら小さいものを使う。その理由について。 前提 前提として、枯れた環境で大きいフレームワークができるのは理解できるし、メリットも大きい。あるいは言語それ自身と区別できないぐらいに発達したフレームワークに依存するのも理解できる。RubyにとってのRailsとか、ErlangのOTPとか(いや、これは詳しくないけどそうなんだろうなっていう予想なんだけど)。 危険信号 今のJS界隈は動きが早すぎて、何に依存するのも危ない。とくにフレームワークと銘打たれたものは、でかすぎてどれも危険信号を放っている。 数年後、廃れてしまったフレームワークで開発し続けるのは、僕個人としてもあまり関わりたくないし、現場の離職リスクとして数字に出るだろうし、採用後の教育コストの問題になる。だいたいそういうものは元の設計者もいなくなるものだ。プロダクトの死を意味する。

最近プロトタイピングの仕事が多くて、とにかく雑に実装して、これでいいかデザイナかディレクターに確認とって、そこでリファクタみたいな過程をとることが多い。技術的にどこまで可能か未検証で、かつ仕様もはっきり決まっていないので、手戻りを最小にするためにとにかく早い段階でデモをみせる。 技術的にどこまで可能なので、どうすると開発が楽で、どこから先が大変で、どこから先が不可能かを説明しながら、その場で仕様の隙間を埋めたり、時には仕様を変更することがある。プロトタイピングの段階で勝手に一部の仕様を決めちゃって、事後追認してもらってるときもある。そこで、説明しながらその場でコードを書いてる。 エンジニア同士のペアプロは、コードを書く過程そのもの意味があるから、すべての過程をみせることに意味があるんだけど、非エンジニアに自分の席の隣に来てもらって、説明しながらの作業だとエディタを長い時間みせるわけにはいか

迷ったらシンプルな方— 片手間以上 (@mizchi) 2014, 7月 19 僕は主にUIを作るエンジニアなのだけど、以下の話題について。 時間をかけて、つまらないものを作りたいか？ - futoase.hatenablog.com ニコニコ動画はSynvieプロジェクトが原型 - はてな村定点観測所 UIの有効性を証明する仮説とその検証において、ほとんどの場合において次の二つが根源的な問題となる。 だいたいのものはシンプルな方が勝つ 人間はシンプルではない 二点間の距離を求める三平方の定理は、(ディスプレイが歪んでいない限り)簡潔でシンプルだが、二点のボタンを順番に押すときのマウスの軌道、そのあいだのユーザーのメンタルモデルの変化は、まったくもってシンプルではない。 人間はシンプルなものの価値を認めたがらない、というバイアスがある。金を産まないといけないソフトウェア開発の現場は、コアフ

昨日知ったんだけどAtomの作者きてて、Atomのコード全部読んだマンとしては懇親会で凸せざるを得なかった。英語がたまに通じなかったりしたんだけど、Qiitaの @yaotti さんに手伝ってもらったりして助かった。学びがあった。 Github Issue #githubkaigi うちもGithub Issuesで管理しているけど、Assigneeの変更ログとかタイトル変更のログが残ってくれたらもっと便利だと思うんですよ(ﾁﾗｯ— 俺は平気だよ (@mizchi) 2014, 6月 1 Githubで働くことについて #githubkaigi エンジニアがドッグフーディングできるプロダクトがある会社羨ましいと思う— 俺は平気だよ (@mizchi) 2014, 6月 1 リモートワークについて よい / Everything should have an URL #githubkaigi

誰とも会わなかった(完) 読んだ本 エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践) 作者: エリック・エヴァンス,今関剛,和智右桂,牧野祐子出版社/メーカー: 翔泳社発売日: 2011/04/09メディア: 大型本購入: 19人 クリック: 1,360回この商品を含むブログ (132件) を見る 5章まで読んだ。 ドメイン駆動、スキルツリーで言うと、オブジェクト指向Lv8ぐらいで解禁されるスキルのような印象を受けた。ストラテジーやMVCを理解してないと実装に至れない。ジャンルは違うけど、言語開発や、データベース設計、OS開発と同じように、一つのこじらせの極地にみえる(批判しているわけではない) 序盤は仕様理解(ドメイン理解)が大事でそれをチーム内で共通の言葉に落としてモデリングしましょうという話が続く。実際のドメイン駆動、値オ

(追記): このブログで一部のJSをgithubに置いてたら 「The website abuses rawgit.com」という警告が出てました。現在修正しました。ご迷惑おかけしました。 @kyo_agoさんの主催で、 @mizchi(シングルページ系フロントエンドJSer) と @damele0nさん(ゲーム系HTML5のJSer)でJavaScriptについて話をした。すごく有意義な話だったので、会話を思い出せる限り書いてみる。 このエントリを読む前にこの記事を読むと幸せになれる。 幸せになりたいソーシャルゲーム系Webフロントエンドエンジニアが本気で考える HTML GUI ツール第一回 - damelog このまとめは僕の主観であり、僕が理解できた部分と自分の発言を一番覚えてるのでどうしてもそれが多めになりますが、ご容赦ください。ついでに酒入ってる。 iOS SafariのIE化

昨日のLT でも言ったんですが、6年間かけて卒業しました。 卒業までの経過 普通に単位を取る 3年でゼミ配属 4年で大学院の内定を取る 4年の11月頃、研究に興味をなくし大学院辞退 大学へのやる気が失せて、卒論(とスペイン語)を放置する 就職活動してなかったので、ブログで職を募集 学生のまま就職(契約社員) 5年次、仕事が忙しすぎて卒論書けず 転職(正社員) 6年で卒業 卒業待たずに就職、卒業待たずに転職して、来年で業界3年目の新卒になります。語句の定義が難しいです。 他の業界は知りませんが、この業界、そういう新卒もどきは多いです。 追記: 最後の2年は休学+残単位数が既定値以下で、学費はほとんど割引されています 卒論 卒論は公開しませんが、卒論の成果物はこれになります。 mizchi/TypedCoffeeScript 所属は隠してなかったので別にいいんですが、早稲田大学の人間科学部です

元糞コードマイスターとしては、生産性については思うところある。 技術的到達深度が深い人じゃないとそもそもかけないコードってのももちろん存在して、その前提で10倍とか100倍になりうる話をする。 そもそもマイナスになる人がいるって話。 隠しパラメータをモデル化 エンジニアA:「週に10の成果を出して3の負債を生む人」を考える。この人は開発を止めてリファクタリングをすれば10-3 = 7の技術的負債を返却できるとする。 ここで正確には成果10には* aの係数が掛かっている。これはプロジェクト開始時1.0で、技術的負債が貯まるほど0に近づいて行く 次に、エンジニアB:「週に15の成果を出して10の負債を生む人」を考える(これにも係数aがかかる)。この人は見た目上は上の人の1.5倍速く成果を出しているように観測できるが、負債もたまりやすい。リファクタしても綺麗になりにくい。 これは割とエンジニアに

タイトルで嫌な予感がしてる人もいるでしょうが、ScalaがJSに変換されて動きます。やったぜ。 Scala.js http://www.scala-js.org/ 試す このサンプルプロジェクトを git clone するのが良いです。 sjrd/scala-js-example-app https://github.com/sjrd/scala-js-example-app サンプルコードはこんな感じ package example import scala.scalajs.js import js.Dynamic.{ global => g } object ScalaJSExample { def main(): Unit = { val paragraph = g.document.createElement("p") paragraph.innerHTML = "<strong>

これ facebook/react https://github.com/facebook/react 使ってみる サンプルそぎ落として、最小構成で組んでみた gist8208430 モジュール定義 -> 引数をJavaScriptで受け取って処理 -> renderという流れ。jsxという拡張子はjavascriptにxmlリテラルを追加したものっぽい。(この拡張子かぶりすぎてるので本当にやめてほしい) render毎にDOM構築してるから激しくパフォーマンス悪いのでは…　と思ったら次のような記事があった。 Performance Calendar » React’s diff algorithm http://calendar.perfplanet.com/2013/diff/ どうも毎回innerHTMLで突っ込むんじゃなくて、既にrender済みのものはスキップして最適化している模

ロンドンへの飛行機(11時間)で暇だったから書いた文章。 自分でゼロからすべてのコードを書けるときはテストファーストでいいけど、アンドキュメントな実験的なライブラリを利用する際や、巨大なプロジェクトの一部としてコードを書く際は、テストファーストよりもとにかくコードを書きまくって挙動の変化を確かめるほうが有用な時がある。 まあ多分どっかでこういうのはハウツー化してあるんだろうけど、自分ルールが固まってきたので、メモっておく。 目的を設定する トップダウンに読むには、コスパが悪いことが多い。とにかく「アレする」「コレする」という目的を定義して、そのためにその周辺領域からボトムアップに読むことにしよう。 エンドポイントを追う 巨大なプロジェクトに放り込まれた最初の段階では、エンジニアは本当に無力だ。 最初にやることは、自分が処理を挟むべき位置を見つけることだろう。 まずはファイル名や関数名を読ん

やばい ↑ Chromeの中のTerminalの中のtmuxの中でvimが動いている様子です Terminal in Chrome Devtools — Dmitry Filimonov 導入手順 Chrome Web Store - Devtools Terminal をChromeでインストール $ npm install -g devtools-terminal $ devtools-terminal ChromeのDevTools開いてTerminalを開く 一部キーバインドがChromeに握られて潰されてしまっているが(Ctrl-aなど)基本的には問題なく動く。スクショ通りvimも動く。 ヤバイ

2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし