Elm 2日ほどやった感想 - mizchi's blog
12月はなんとなく新しいことをやりたくなる。ということで、elm をやってみた。 大昔に触った気がするけど、文法が Haskell っぽいこと以外、何も覚えてなかった。というか当時触った signal とかがなくなってたので別物になってた。 作ったもの 勉強がてら作った、球拾いゲームみたいな何か コードはここ https://github.com/mizchi-sandbox/elm-playground elm-platform, svg の扱い, キー入力、乱数の副作用の分離などが学べた。乱数は面倒くさくなったので外部(JS)からSeed与える方式にして、気持ち純粋になった。 (自分の)環境構築 Parcel を使った brew install elm # OSに応じて mkdir elm-playground cd elm-playground yarn init -y yarn a
大量のテキストを食っても速い Markdown Editor 作った - mizchi's blog
もう人生で何個目かわからない markdown エディタ作った。が、今回のは結構気に入っている。 https://markdown-buffer.netlify.com/ で遊べる。 用途としては、GitHub か Qiita か はてなブログかわからないが、なにか書こうと思ったときに、どのサービスも中途半端に重いので、とりあえずのバッファが必要、という感じで作った。なので速度重視。 ブラウザのストレージで永続化してる。オフラインで動く。できるだけエディタとしてはスコープを大きくせず、単に編集バッファ(textarea)でしかない、というのを意識している。 結構頑張って作り込んでしまった https://nedi.app が色々肥大化してしまっていて入力時にラグを感じるので、編集体験を見つめ直す自戒もある。 機能 数式対応 コードハイライト対応 バックグラウンドで自動保存 改行を br に
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
スイッチの入れ方 - mizchi's blog
自己分析 どうやったらスイッチが入るか コーヒー飲む 作業机に着席する エディタが開いてある 次にやることが自明 => やる 集中継続の仕方 取り組んでる対象が面白い いい音楽がある 通すべきテストがあったり、タスクが明確だったりで、なんらかのリズムがある 課題が小さい(小さく分割してあるという状態) スイッチの切れ方 コンテキストスイッチのタイミングで開発環境の再セットアップしてると萎えてくる 対象がそもそも気が重くて逃げる(タスクが分割されていない) Twitter で気になる話題が流れてきて別のスイッチが入ってしまう 定期的に腰の調子が気になる 定期的に肩の調子が気になる 定期的に首の調子が気になる 音楽 飽きっぽいので常に新しい音楽がほしい 昔はメタルやプログレッシブ・ロックが好きだったが、最近は作業を害さない程度のエレクトロニカに寄ってる Spotify はいい感じなのだが、た
React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog
フロントエンドの中でも、JS書くプログラマと、CSSを書くマークアップと、デザインカンプを作るデザイナで、コンポーネントという概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰かが決定的に間違ってるというつもりはない。正直、どっちかというと本来のデザイナ側の用語定義に倒した方がいい気がしているが、プログラム上の都合もいろいろ混ざってきて、話が簡単ではない。 自分の理解が間違ってる可能性もある。この記事はレビューをもらうために書いている側面もあり、指摘されたら追記していく。 読んだもの。 Atomic DesignとCSS設計 - Atomic Designとは何か | CodeGrid Atomic Designの考え方と利点・欠点 – wkr. Atomic Design の大雑把な理解 基本的
docker + k8s やってる - mizchi's blog
この記事は別にチュートリアルとかではなくて所感を書いてるだけ。 だいぶ長くフロント沼やってきて、主観ではあるが、だいぶ落ち着いてきた。落ち着いてきたというか、自分は一通りキャッチアップ済みなので後は差分だけ抑えていけばいいという状態。PWA周りは色々あるが、各種標準化を寝て待って方がはやい。どうせ各自IE11が死ぬ2020まで特に大きな動きは取れまい。外から今フロント何やればいいのって聞かれたら、 とりあえず typescript + react + redux + styled-components + prettier 余裕あったら react-native(expo) やっとけって言う…。 というわけで、停滞してる今こそ他のジャンルに手を出すチャンスだ、と思って、横から動向を眺めつつそろそろかなーと思っていたのが docker + k8s と keras + tensorflow の
すべてのプログラマが機械学習を受け入れる準備をする時代になった - mizchi's blog
という予感がしたので書く。正確に言うと機械学習の成果としての訓練モデルを。 まず事前に前置きしておくと、僕は機械学習をほとんど抑えていない。トレンドだけ追ってる。 大学生の時にニューラルネットワークを実装してみてフ～ンって言ってた程度に知識しかなくて、ディープラーニングが流行る前だから、「バックプロパゲーションってややこしかったけど、今は自動でモデルの最適化いい感じにやってくれるんでしょ？」ぐらいの雑な理解しかない。(この時点で怪しい) で、今はフロントエンドやってて、ここは機械学習は縁遠いように思えるかもしれないだろうけど、最近のGoogleはなんとブラウザで tensorflow を動かすのに情熱を注いでいる。 で、こんなのが Hacker News で流れてきた。 medium.com とりあえず試した。デモをそのままデプロイした。 PoseNet - Camera Feed Dem
シャニマスのコード読んだ - mizchi's blog
ライセンス表記みるぐらいで深掘りはしてない シャニマスのコード読むか— human eslint --fix (@mizchi) 2018年4月24日 シャニマス、pixijs ですね— human eslint --fix (@mizchi) 2018年4月24日 pixi-ae.min.js たぶん after affect のコンバータなんだろうけどググっても引っかかんないな、内製かな— human eslint --fix (@mizchi) 2018年4月24日 s/after-affect/after-effect After effects to pixi.js | CodeSeek なら見つかったが、該当のライブラリ名で探してるが見つからず パーティクルはこれ https://t.co/NtIqPBBq7n— human eslint --fix (@mizchi) 201
フロントエンドの負債と向き合う - mizchi's blog
某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない
GUI環境でWeb の UIを構築する開発ツールを作りたい - mizchi's blog
qiita.com という記事を書いた。 要約としては、「今こそGUIでWebのUIを生成できるような開発環境を目指すべき」みたいな話。 概念 Web の GUIの概念を分解すると JS はViewとしての実装を持つプレゼンテーションレイヤー、ロジック注入のコンテナーレイヤーに分割して考える HTML/CSS は、レイアウト定義のレイヤー、そのレイアウト領域を占めるエレメントのレイヤーに分割して考える この考え方に基づくと、GUI開発環境で作るべきものは、 テンプレートへのJSロジックのつなぎ込み レイアウトエディタ 個別のエレメントの装飾 となる。 JSロジックのつなぎこみはヘヴィにJSだからまだコードで書く方がいい。作るならノードベースのエディタになりそう。 エレメントの装飾は自力で頑張るより Sketch から生成できないか試したい。後回し。 レイアウトエディタは今でも作れそう。作っ
エンジニアのベンチャー企業の選び方/働き方/やめ方 - mizchi's blog
この記事は退職者アドベントカレンダーの12日目です。 adventar.org 経歴としては、新卒で設立してすぐのゲーム会社 => 小規模教育系ベンチャー => Incements(Qiita) => フリーランス。 今年で29歳、20代で3回退職しました。20代のうちは冒険してベンチャー企業で働いてみよう、と思ってたのですが、結局29を目前にフリーランスになってしまいました。 ベンチャーで働くこと ベンチャーで働くのはリスクを取るということ。一番言いたいのは、ストックオプションもたずにベンチャーやるな、ストックオプションも確実に換金できるわけじゃない、ということ。上場するときに行使するか、バイアウト時に買い取ってもらわないといけません。 また、ストックオプションの期待だけ給与は下がるので、他の会社で同じことをやるのに比べて、 -100~-150万ぐらいの相場です。少数精鋭志向で最初からじ
60FPSへの夢、そしていかにキャッシュを従えるか / 書評「超速! Webページ速度改善ガイド 使いやすさは「速さ」はじまる」 - mizchi's blog
CAの ahomu/1000ch さんからご恵贈頂き、レビュー書いてくれと頼まれたので、自分のパフォーマンスというものへの思いの丈と共に書評を書こうと思う。 自分も6年ぐらいフロントエンドぐらいやってきたけど、あんまりちゃんと用語定義をしないまま「勘」で調査しがちだったのと、彼ら二人がどの数値見てるんだろう、という視点で読んだ。 gihyo.jp 要約: これはフロントエンドエンジニアの勘を体系化/言語化したものだ フロントエンドエンジニアにとって Chrome DevTools は日常的にお世話になる、「これナシでは生きていけない」という類のツールだ。だが、これの読み方は癖があり、経験的に蓄積してきた積み重ねがなければやや難しい側面があった。 この本は、フロントエンドエンジニアが今まで経験的に蓄積してきたでろう「勘」を、Webの仕様や各社のUXガイドラインの明確な定義を通して再整理したも
Qiita の Increments を退職します - mizchi's blog
4月からフリーランス。直近半年の仕事は埋まってるけど、パイプ作っときたいとかあれば mizchi2w@gmail.com までメールください。 なんでやめるの？ 要約: 自分のスキルの、ベンチャー企業の社員としてスキルミスマッチ フロントエンドの、とくにSPAで高速で堅牢なアプリを作る、という自分のスキルセットを振り返ると、「需要はあって必要なことには必要だが、どうしても瞬間風速が高いそのタイミングを超えると扱いに困る」という人材適正があると認識しており、前職のQuipperから引き続き2社連続で、「そのために入った最初のプロジェクトが終わると、やや手持ち無沙汰になる」という状態になっていました。 とくにスタートアップのような、予算が厳しい上にピボットする可能性ある現場だと、自分のスキルが活かせないフェーズがある、というのが、会社にとっても、個人のモチベーションとして厳しいものがありました
フロントエンドへの複雑化について、一つの視点 - mizchi's blog
これらの件 最近のフロントエンドへの違和感 - nobkzのブログ 日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。 前提 去年は勝手Reactエヴェンジェリスト(自称)として、日本に複雑化するフロントエンド技術の海外の動静を紹介をし続けていた。 僕としても、フロントエンドは複雑化してると思ってるし、それは「目的の複雑化に対して必要なもの」だったと思っている。ここでいう目的とはSPAの構築であって、普通のウェブサイトは含んでいなかったが、普通のウェブサイトも当たり前のようにリッチ化目指しているのが現在なので、境目は曖昧ではある。 僕もフロントエンドの複雑化がだれにでも必要なものだとは思っていない。が、定期的に情勢を整理して、交通整理するのを心がけてきたし、春からはじめるモダンJavaScript / ES2015 - Qiita みたいな記
FPSで吐きまくってエイム上達しなかった僕がボイチャで訓練されてS+になるまで。またはボイチャ訓練の薦め - mizchi's blog
この記事はSplatoon Advent Calendar 2015 - Adventarの15日目です。遅れてすいません！！！！！！ プログラミングの話は一切しません。イカで技術の話をするのは @hasegaw さんや @mzsm_j さんに任せておきましょう。僕は今日イカの話だけするんで。 というわけで、S+ 達成してました。やったぜ。 最高ウデマエS+44。維持できるか怪しいですが、勝利点6500おいしい…。 S+昇格失敗した時の動画をyoutubeに上げてます。(この後上がった) 酔って上達しないエイムを克服するために 僕はとにかく3Dゲームで酔いやすく、FPSまったくできない体で、最近だとMGS5で吐いて15分しかできてません。Last of Us も積んでます。 スプラトゥーンはジャイロオフでなんとかギリギリでした。まずはローラーで徐々にならして、ランク35に慣れてきた頃にジャ
何もやる気が起きない - mizchi's blog
たまに、突然に謎のやる気で包まれて、やりたいことを書き出して、アレもコレもと一つづつ手を出して、そのうちに徐々に熱意は発散していき、最後には何も残らず負の感情だけがぐるぐるとしているときがある。今がそれだ。 自分には、こういう時に、「思ったことを全部書き出す」ってのを、定期的にやってしまう癖がある。これはそういうテキストで、そしてそれを公開することを、あまり恥ずかしいとは思ってはいない。少なくとも、今このときは。 最近の悩み 自分が好きなこと、得意なことをやるのは、やる気が少なくていいけど、コストが低いけど、それじゃいずれ、次の波にのれなくて死んでしまうのではないか。そう感じることがある。 そもそも好きなことと思っているのは、本当に好きだったんだろうか。得意と本当は好きは違うけど、自分がそれが一致しているのは、自分が他人より優れていると証明したいだけだから、得意なことだけに逃げ続けているの
hue買ってライティングバーを設置してシェルから光量を操作できるようにしてみた - mizchi's blog
hueはiPhoneやAPIから操作可能な電球で、前々から話は聞いてたんだけど最近自分のFacebookで @NStyles や @Hageatama が異様に盛り上がってたので、つい買ってしまった。 今の家、ワンルームの照明が物理スイッチしかなくて不満に思っていたので、いやリモコンつきとか買う選択肢はあったんだけど、せっかくなのでHueにしてみたワケ。 Philips hue(ヒュー) スターターセット 929000259901 エコパッケージ [フラストレーションフリーパッケージ(FFP)] 出版社/メーカー: Philips(フィリップス)発売日: 2014/01/26メディア: Personal Computersこの商品を含むブログを見る 設置自体は簡単だった。マニュアル通りなんで特に問題なし。 天井に吊るすためにライティングバーを買った。 ELPA ライティングバー コンセント
Web開発野郎の「エビデンス」としてGUIグリグリな実装したときのgyazo gifほしさ - mizchi's blog
スクショを「Excelに」貼るのはわけがわからないけど、実際スクショを貼るのはテストケースが不足しがちなGUI開発にとっては実装アピールとして有用だし、コードレビューの助けになるのでJavaScriptでグリグリ動く機能作ったときはgif添付するの便利だからみんな貼って欲しい— ﾉ鰻鯉ｼﾍ鮪 (@mizchi) 2014, 8月 4 @koizuka コードだけみせてもこれで何が出来たのかわからん、って言われることあって、確かに自分が他人のGUI実装みても何が起こるかわからなかったりするし、副作用が外部から値チェック可能な形で観測できなかったりするしで、辛いですね…— ﾉ鰻鯉ｼﾍ鮪 (@mizchi) 2014, 8月 4 もちろんサーバーサイドエンジニアの皆様に於かれましては、GUIの遷移で俺たちの実装した何がわかるんだ感があるでしょうが、サーバサイドでは値の変化が確認しやすいのに対し、
新卒1,2年目に自己投資してQoL上がったもの - mizchi's blog
この記事みた。 給料全部使う - yulily100's blog 自分はIT業界3年目のエンジニアで、2年間ぐらい、口座残高尽きるまでいろいろ買いまくっててたので、そのログ兼ねてQoL向上に貢献したものを載せておく。 注意点として、自分は大学生時代はほとんどバイトせずに月5万の仕送りで生きてて、何かと安物買いの銭失いしてた反省もあり、多少無理してでも良い物を買う傾向がある。 常飲用炭酸飲料:月2000円 目も覚める。おすすめ。 ジュースがぶ飲みしてたらめっちゃ太ったので無糖の炭酸水がいい。 アサヒ ウィルキンソン タンサン 500ml×24本 出版社/メーカー: アサヒ飲料メディア: 食品&飲料購入: 27人 クリック: 84回この商品を含むブログ (2件) を見る 自分の周囲はペリエ派とウィルキンソン派がいるけど、自分は炭酸が強いウィルキンソン派。 キーボード: 1万~3万 IT系に限
モバイル環境でDOM挿入する時innerHTMLとappendNodeどっちが速いの？という話 - mizchi's blog
面白かったので紹介。 Mika Raento's Tech Blog: innerHTML vs appendNode vs DocumentFragment - Optimizing bulk DOM operations for mobile まあ正確に言うとDocumentFragmentの比較もあるんだけど、ベンチ上appendNodeと違いはないのでタイトルからは割愛。 結論 普通はappendNodeが速いけど、要素数を多くすると徐々にinnerHTMLに分がでてくる。均衡点は1000ノード。 ベンチマーク 上の記事から図を引用 これは自分の予想だけど、要素が多くなるにつれappendNodeのDOMとのネイティブのブリッジを経由するのがボトルネックになる。innerHTMLはパーサのコスト+appendNode一回分。 誰が気にするの テンプレートエンジン作者は気にすると良さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
