タグ

ブックマーク / mizchi.hatenablog.com (14)

  • off-the-main-thread の時代 - mizchi's blog

    off-the-main-thread は今フロントエンドで熱いテーマの一つです。日語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日語の記事があるので、こちらを参照してください。 nhiroki.jp speakerdeck.com ここまでのあらすじ 従来のウェブブラウザーでは、一つの画面につき一つ割り当てられる、UI スレッドと呼ばれる名前空間で様々な処理を行ってきました。DOMセマンティクスの評価, CSS による rendering / painting、JSのScripting…。もちろん裏側ではブラウザが様々なバックグラウンドサービスに処理を委譲し、スレッドで実行され、その非同期な結果を受け取っているわけですが、少なくともUIスレッドで走るJSから

    off-the-main-thread の時代 - mizchi's blog
    hiro_y
    hiro_y 2018/10/07
  • 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

    TypeScript入門以前ガイド - mizchi's blog
    hiro_y
    hiro_y 2018/10/04
  • いつ ReactNative を使っても大丈夫か - mizchi's blog

    AirBnb がReactNativeをやめることが話題になってますね。 medium.com RNの未熟さ、社のRNのForkのメンテナンスコスト、JavaScriptのスケールのしなさ、JavaScriptCoreの実装の違い、クラッシュレポートが信頼できない、開発者は主に片方のプラットフォームしか知らないのでOSSのライブラリはバグってる、結局ブリッジを描く人間が必要、人が雇えない、山ほど出てくる…— Hello (@rejasupotaro) 2018年6月19日 以下私見です。 RN採用可否のフローチャート 自分がRN使いたいといって相談された際にはこういう感じで返してます。基的にはExpo 採用可能か否かで判断してます。 Expo ではじめる ReactNative 開発環境 - Qiita プラットフォームごとにUXを突き詰める必要がある => RN やめとけ Q: 社内に

    いつ ReactNative を使っても大丈夫か - mizchi's blog
    hiro_y
    hiro_y 2018/06/20
  • キャッシュフレンドリーなステートレスアプリケーション設計について考える #CDN_Study - mizchi's blog

    CDN_Study という勉強にいってきた。 https://http2study.connpass.com/event/81469/ そこで、Akamaiの方が、「個人の意見だけど、アプリケーション側がもっと基礎設計でステートレスでキャッシュフレンドリーな設計になってないといけないよね」という旨の発言をしていて、最近そのことにアプリケーションエンジニアとして同じようなことを考えていたので、書き出してみる。 SPAとかSSRとかフロントの不毛な話は出さないようにしてるが、主にサーバレス環境を意識している。 前提 世の中のアプリケーション内のモジュールは、Statefull or Stateless に分類でき、それをツリー状に表現できれば差分検知できる、という React の仮想 DOM 的な世界観が自分にある 以下の話は、基的には Fastly のサロゲートペアーとそのためのミドルウェ

    キャッシュフレンドリーなステートレスアプリケーション設計について考える #CDN_Study - mizchi's blog
    hiro_y
    hiro_y 2018/04/15
  • いかにしてJavaScriptを教えるか - mizchi's blog

    経緯 ドワンゴ様から恵贈頂いた。 高校生からはじめる プログラミング 作者: 吉村総一郎出版社/メーカー: KADOKAWA発売日: 2017/04/14メディア: 単行この商品を含むブログを見る …読んでみたけど、HTML/CSS/JS の初歩的な部分を、初学者にやらせるとこうなる、という素朴な世界観で、CSSフレームワークもJSライブラリも出てこない。いや、出せと言ってるわけじゃない。理解せずにフレームワークを使う習慣がつくと、スクリプトキディ的な振る舞いによっていくし、教える側としても、変数が大きくなってコントロールできないのが問題だろう。 じゃあ基礎を抑えたとして、この先どう教えるといいんだろうな、というのは、たしかに自分も前から考えてはいて、それを書いてみる。 この文章のターゲット JavaScriptを教える人、またはポインタがあれば自学できる中級者以上 追記: すべての初学

    いかにしてJavaScriptを教えるか - mizchi's blog
    hiro_y
    hiro_y 2017/05/04
  • スターエンジニアはキラーアプリを生み出すのか? - mizchi's blog

    Web技術界隈著名人の残念さ具合 - thinkchangの日々日誌 は内容自体はどうしようもないのだけど、テーマ自体は自分も日頃悩んでいたものなので書き出してみる。あ、そういえば行方不明のmalaさんは一昨日のハッカソンで振り向いたらいたんで大丈夫です。 キラーアプリの出現と技術的イノベーションに相関あるかと言われたらあるとは思うけど枯れた技術の水平思考的な余地も十分あるんでキラーアプリが必ずしも技術的なイノベーションを果たしている必要はない。ただし技術優位がない場合は企画レベルで制限かかるので、それを許容するかどうかという話— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 技術的イノベーションによって可能になったサービスはたくさんあって、たとえばデータベースを使った動的なウェブサービス、2000年前ごろにPerl CGIが現実的な速度で動くようになってから増えた

    スターエンジニアはキラーアプリを生み出すのか? - mizchi's blog
    hiro_y
    hiro_y 2015/08/25
  • 睡眠障害で辛い - mizchi's blog

    一緒に働いたことがある人は知ってると思うけど、自分は尋常じゃなく朝に弱い。 で、自分でもさすがに酷いと思っており、様々な努力をしたが改善せず、結局睡眠科をうけて睡眠障害だと診断された。 自分がそうだと疑った理由は 睡眠障害らしきものとわたしの20年間振り返りメモ - 青いの のおかげ。inoaoさんとは違うけど、自分は 睡眠相後退症候群 DSPSに罹患して9時5時生活を送ることは、毎日6時間の時差ぼけを体験しているようなものである。患者は週日には数時間しか眠ることができないので、週末には午後まで眠って睡眠時間を補うことがよくある。週末によく眠ったり、普段昼寝をしたりすることで、DSPS患者は昼間の眠気から解放されるが、遅い睡眠相はそのまま続く。 DSPS患者は、極端な夜型の傾向がある。彼らは、夜が最も頭が冴えていて、物事がうまくでき、創造力にも溢れていると感じる。彼らは単純に早く眠ることが

    睡眠障害で辛い - mizchi's blog
    hiro_y
    hiro_y 2015/08/01
  • 最近のReactへの言及についての違和感 - mizchi's blog

    「最近のReactへの言及についての違和感」というエントリ書いたら燃えますかね— イカid:mizchi0x (@mizchi) 2015, 6月 7 僕がみた資料の中でFluxの設計について正しい理解をしていると思えるのはげたさんのこの資料だけです https://t.co/XaKHhhuP2A— イカid:mizchi0x (@mizchi) 2015, 6月 7 みんなsetStateに騙されてる— イカid:mizchi0x (@mizchi) 2015, 6月 7 一部で「React使うとコード量が増える」という意見、サーバサイドで書いたテンプレートのレタッチをするjQueryと比べたらそりゃそうなんだけど、SPAでそもそもJS側がテンプレート握るような環境では handlebars とかで書いてたところが JSXになるだけでそれ移行コスト— イカid:mizchi0x (@mi

    最近のReactへの言及についての違和感 - mizchi's blog
    hiro_y
    hiro_y 2015/06/07
  • 小さいライブラリを採用する - mizchi's blog

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

    小さいライブラリを採用する - mizchi's blog
    hiro_y
    hiro_y 2014/10/26
    「ライブラリを選定する際、迷ったら小さいもの」
  • あなたがReactを使うべき理由 - mizchi's blog

    最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか? 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue

    あなたがReactを使うべき理由 - mizchi's blog
    hiro_y
    hiro_y 2014/09/11
  • シンプルさが勝つ。人間はシンプルではない。 - mizchi's blog

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

    シンプルさが勝つ。人間はシンプルではない。 - mizchi's blog
    hiro_y
    hiro_y 2014/07/22
    「価値がスポイルされるのは、作っている人間が最初に気づくはずだ。だからドッグフーディングできるものは可能な限りドッグフーディングした方がよい。」
  • ボーイフレンドを直す方法 あるいは賢いjQuery.Deferredの使い方 - mizchi's blog

    問題 モバイルは回線が不安定なので、ロードの失敗が頻繁に起こります。 開発時は高速なwifi環境で開発しているので、リリース間近になって帯域を圧迫していることに気づいたりします。 解決方法 画像を先読みします var preload = function(src){ var d = $.Deferred(); var img = new Image; img.src= src; img.onload = d.resolve img.onerror = d.reject return d.promise(); }; 何をやっているかというと、空のimgタグをつくってそこに画像を読み込みます。その過程でブラウザキャッシュに画像が保存されます。正確に言うとこの時点ではどこにも紐付いていないのでGC対象ですが、その後すぐDOMに画像をはるなら問題ありません。 並列で先読みする(速い・不安定) va

    ボーイフレンドを直す方法 あるいは賢いjQuery.Deferredの使い方 - mizchi's blog
    hiro_y
    hiro_y 2013/12/17
  • OSXでカジュアルにファイル監視してコマンドをフックができるfswatchが便利 - mizchi's blog

    nodeでスクリプト書いてもいいけど、絶対コマンドあるはずだと思ってbrew search watch したらそれらしきものがあった。 alandipert/fswatch https://github.com/alandipert/fswatch 公式サンプルより ./fswatch /some/dir "echo changed" 自分はこんな感じで使ってる。 fswatch . "./bin/coffee scratch.coffee" なにかのモジュールのファイルを変更したら scratch.coffeeっていうデバッグコードの状態をdumpする。 TypedCoffeeScriptの開発で, gruntで監視対象を書いてもいいけど、なんか最近のgrunt妙にヘヴィだし、見たいデータがその都度違うので、さっくりみれるのは大事。

    OSXでカジュアルにファイル監視してコマンドをフックができるfswatchが便利 - mizchi's blog
    hiro_y
    hiro_y 2013/10/28
  • 世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog

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

    世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
    hiro_y
    hiro_y 2013/09/26
  • 1