SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog
最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ
最近のフロントエンドのエディタ事情 - mizchi's blog
これは、個人でどんなエディタを使うべきか、ではなく、「チームとして」新しいものを採用するとき、あるツールがエディタ横断で便利かどうかを考える必要がある。 自分個人としては、基本はAtomを使って、TypeScriptを書くときだけVS Code を使っている。ターミナルでは Vim。 環境でエディタを選ぶ 最近の新規プロジェクトでは、とくにブロッカーがなければ TypeScript を使っていいと思う。TypeScript を使うなら当然 VS Code を使うことになる。Atom や Vim でもいいが、TypeScriptのエディタとしては、流石に完成度が頭一つ抜けてる。JavaならJetBrains 的なノリで、TSならVSCode、そういうものと思ったほうが楽。 TS以外なら、エディタはなんでもいいが、ある程度流行ってるものでないとエコシステムに追いついてくれない。 prettie
フロントエンドの負債と向き合う - mizchi's blog
某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない
Qiita の Increments を退職します - mizchi's blog
4月からフリーランス。直近半年の仕事は埋まってるけど、パイプ作っときたいとかあれば mizchi2w@gmail.com までメールください。 なんでやめるの？ 要約: 自分のスキルの、ベンチャー企業の社員としてスキルミスマッチ フロントエンドの、とくにSPAで高速で堅牢なアプリを作る、という自分のスキルセットを振り返ると、「需要はあって必要なことには必要だが、どうしても瞬間風速が高いそのタイミングを超えると扱いに困る」という人材適正があると認識しており、前職のQuipperから引き続き2社連続で、「そのために入った最初のプロジェクトが終わると、やや手持ち無沙汰になる」という状態になっていました。 とくにスタートアップのような、予算が厳しい上にピボットする可能性ある現場だと、自分のスキルが活かせないフェーズがある、というのが、会社にとっても、個人のモチベーションとして厳しいものがありました
Vimperatorの思い出とVivaldiへの期待 - mizchi's blog
※はじめに これは Vimp やめて Vivaldi 使おうぜとアジる記事ではない。最近何書いてもアジってると誤解されるの困る。 思い出 僕のプログラマになるきっかけの一つに、2008年頃にリナカフェに遊びに行った時に @mashiro にVimperatorを勧められたのがある（本人はおぼえてないかもしれない）。当時の僕は大学に入ったばかり。Firefoxは使っていたが、プログラミングは多少興味あるけど、難しそうだなぁ、程度の認識で、もちろんVimなんか使ったことがなかった。 初期設定はその場で教えてもらって、あとは家に帰って調べた。最初は、とりあえず便利なショートカットキーを提供してくれて、QuickSilverライクな絞込UI(今だとMacのSpotlightもそうなんだろうが、当時はQuickSilverというMacアプリぐらいしか似たようなものがなかった、気がする)を持つインター
Re: React.js界隈の人に聞きたい - mizchi's blog
React.js界隈の人に聞きたい 前提 Reactより前に僕がやりたかったこととして、冪等性の担保の為に毎フレーム document.body.innerHTML を書き換えたかったがパフォーマンス的にそれが許されなかったが、Reactは擬似的にそれを達成させてくれたという圧倒的感謝🙏がある— ダイナモポグラマ (@mizchi) 2016年5月23日 SPA 世の中にSPAの需要があるのか？という点考えていたけど、需要がないからSPA技術がいらない、というのはたぶん間違ってて、SPA技術を持たない人が多いからその発想もなく、SPAで達成できることがイメージ出来ないのがアプリケーション設計の縛りになっている、という感じな気がする— ダイナモポグラマ (@mizchi) 2016年5月23日 GmailやTrelloやPivotalやグラブルは異常な技術の集大成ではなく、個別に分解可能な
スターエンジニアはキラーアプリを生み出すのか？ - mizchi's blog
日本Web技術界隈著名人の残念さ具合 - thinkchangの日々日誌 は内容自体はどうしようもないのだけど、テーマ自体は自分も日頃悩んでいたものなので書き出してみる。あ、そういえば行方不明のmalaさんは一昨日のハッカソンで振り向いたらいたんで大丈夫です。 キラーアプリの出現と技術的イノベーションに相関あるかと言われたらあるとは思うけど枯れた技術の水平思考的な余地も十分あるんでキラーアプリが必ずしも技術的なイノベーションを果たしている必要はない。ただし技術優位がない場合は企画レベルで制限かかるので、それを許容するかどうかという話— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 技術的イノベーションによって可能になったサービスはたくさんあって、たとえばデータベースを使った動的なウェブサービス、2000年前ごろにPerl CGIが現実的な速度で動くようになってから増えた
小さいライブラリを採用する - mizchi's blog
僕がJavaScriptでライブラリを選定する際、迷ったら小さいものを使う。その理由について。 前提 前提として、枯れた環境で大きいフレームワークができるのは理解できるし、メリットも大きい。あるいは言語それ自身と区別できないぐらいに発達したフレームワークに依存するのも理解できる。RubyにとってのRailsとか、ErlangのOTPとか(いや、これは詳しくないけどそうなんだろうなっていう予想なんだけど)。 危険信号 今のJS界隈は動きが早すぎて、何に依存するのも危ない。とくにフレームワークと銘打たれたものは、でかすぎてどれも危険信号を放っている。 数年後、廃れてしまったフレームワークで開発し続けるのは、僕個人としてもあまり関わりたくないし、現場の離職リスクとして数字に出るだろうし、採用後の教育コストの問題になる。だいたいそういうものは元の設計者もいなくなるものだ。プロダクトの死を意味する。
新卒1,2年目に自己投資してQoL上がったもの - mizchi's blog
この記事みた。 給料全部使う - yulily100's blog 自分はIT業界3年目のエンジニアで、2年間ぐらい、口座残高尽きるまでいろいろ買いまくっててたので、そのログ兼ねてQoL向上に貢献したものを載せておく。 注意点として、自分は大学生時代はほとんどバイトせずに月5万の仕送りで生きてて、何かと安物買いの銭失いしてた反省もあり、多少無理してでも良い物を買う傾向がある。 常飲用炭酸飲料:月2000円 目も覚める。おすすめ。 ジュースがぶ飲みしてたらめっちゃ太ったので無糖の炭酸水がいい。 アサヒ ウィルキンソン タンサン 500ml×24本 出版社/メーカー: アサヒ飲料メディア: 食品&飲料購入: 27人 クリック: 84回この商品を含むブログ (2件) を見る 自分の周囲はペリエ派とウィルキンソン派がいるけど、自分は炭酸が強いウィルキンソン派。 キーボード: 1万~3万 IT系に限
Promise時代のJavaScriptの関数の処理/提供 - mizchi's blog
最近自分で非同期前提のプラグイン書くときはThenableな感じで書いてることが多い。 Thenableってのはどういうことかというと、typescirptのes6-promises では次のように定義してある。 interface Thenable<R> { then<U>(onFulfilled: (value: R) => Thenable<U>, onRejected: (error: any) => Thenable<U>): Thenable<U>; then<U>(onFulfilled: (value: R) => Thenable<U>, onRejected?: (error: any) => U): Thenable<U>; then<U>(onFulfilled: (value: R) => U, onRejected: (error: any) => Thenab
#ガチJS でJavaScriptとフロントエンドの未来について熱い話をした - mizchi's blog
(追記): このブログで一部のJSをgithubに置いてたら 「The website abuses rawgit.com」という警告が出てました。現在修正しました。ご迷惑おかけしました。 @kyo_agoさんの主催で、 @mizchi(シングルページ系フロントエンドJSer) と @damele0nさん(ゲーム系HTML5のJSer)でJavaScriptについて話をした。すごく有意義な話だったので、会話を思い出せる限り書いてみる。 このエントリを読む前にこの記事を読むと幸せになれる。 幸せになりたいソーシャルゲーム系Webフロントエンドエンジニアが本気で考える HTML GUI ツール第一回 - damelog このまとめは僕の主観であり、僕が理解できた部分と自分の発言を一番覚えてるのでどうしてもそれが多めになりますが、ご容赦ください。ついでに酒入ってる。 iOS SafariのIE化
技術的負債という(非エンジニアにとっての)隠しパラメータが生産性100倍を起こす - mizchi's blog
元糞コードマイスターとしては、生産性については思うところある。 技術的到達深度が深い人じゃないとそもそもかけないコードってのももちろん存在して、その前提で10倍とか100倍になりうる話をする。 そもそもマイナスになる人がいるって話。 隠しパラメータをモデル化 エンジニアA:「週に10の成果を出して3の負債を生む人」を考える。この人は開発を止めてリファクタリングをすれば10-3 = 7の技術的負債を返却できるとする。 ここで正確には成果10には* aの係数が掛かっている。これはプロジェクト開始時1.0で、技術的負債が貯まるほど0に近づいて行く 次に、エンジニアB:「週に15の成果を出して10の負債を生む人」を考える(これにも係数aがかかる)。この人は見た目上は上の人の1.5倍速く成果を出しているように観測できるが、負債もたまりやすい。リファクタしても綺麗になりにくい。 これは割とエンジニアに
クライアントJavaScriptのテストにはmocha-phantomjsを使え - mizchi's blog
mocha-phantomjsは、その名前の通りmochaとphantomjsを使ってクライアントJSのテストができるヘッドレステストランナー。長く使ってるけど特に不満はないので使えばいいと思う。 metaskills/mocha-phantomjs https://github.com/metaskills/mocha-phantomjs スケルトンを作った クライアントJSのテスト書かれない理由として、環境構築の難しさがあると思う。 そこで怠惰な人たちの為にGruntでプロジェクト用スケルトンを作った。ごじゆうにおつかいください 使い方 git clone git@github.com:mizchi/client-app-skeleton.git cd client-app-skeleton npm install bower install grunt test 結果 Running
とにかくシンプルで簡単で高速なViewのコンポーネントを作れるHorn.jsを作った - mizchi's blog
JavaScriptでリアクティブっぽくとにかく短くシンプルにビューが書けるライブラリを作った。 mizchi/horn.js https://github.com/mizchi/horn.js 名前は背骨とか角とかっぽければ何でもよかった。 方針 Angularっぽいユーザー定義のdirective Knockout.js っぽいデータバインド Backbone風の軽量なAPI 依存はjQueryのみ とにかく短くビューのコンポーネントの塊を書けるのを目的とした。UnityとかFlashのコンポーネントに影響を受けている気がする。 HTMLのテンプレートによって、ビューがどういう属性を持つか決定される。それをJavaScriptから使う。 インストール bower install horn 使い方 こんな感じでテンプレートを用意する <div data-template-name="st
世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
