タグ

ブックマーク / lealog.hateblo.jp (10)

  • 最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();

    久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき!」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い!とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。(もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし) 原初の時代からReactな案件をそれ

    最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
    ledsun
    ledsun 2022/11/02
    面白かった
  • TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed - console.lealog();

    そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。 React陣営は @koba04 & @yosuke_furukawa Angular陣営は @laco0416 & @armorik83 モデレータは @Shumpei メモは雑なので、漏れとか齟齬とかあるかもですよ。 トークバトル React / Angular 2の概要 スター数とかバージョンとか コードがだいたいこんな感じとか 開発言語 こば: だいたいBabel、TypeScriptでもやれる 会長: だいたいBabel使ってると幸せになれる らこ: JavaScript or TypeScript or Dart らこ: まあTypeScriptですよね らこ: Dartはリポジトリが分かれました はち: ReactやるからAngularやるからで開発言語を選ぶのはナン

    TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed - console.lealog();
    ledsun
    ledsun 2016/09/07
    なるほどー
  • モバイル向けにSPAをつくってた話 - console.lealog();

    実は4月の頭にリリースされてて、今さら感のあるつくって"た"話です。 もちろん仕事でなのですが、ココはあくまで個人ブログなので、ある程度ぼやかしつつ書きます。 知ってる人は知ってると思いますが、コレです。 作ったもの 何もしらないとイメージしづらいと思うので、いちおう。 モバイルメインのWebサービス ゲームではないが、ゲーム性の強いWebサービス シナリオゲーみたいなやつ 複数のSPAと多数のページから成るそれなりの規模 ネイティブでもShell-Appでもなく純ブラウザ向け iOS5.x/Android4.x以上が対応OS Safari/標準ブラウザ/Chrome/各種WebViewが対象ブラウザ この記事を書こうと思ったわけ 新しいFWやらライブラリやら、流行り廃りが激しい最近ですが、 実績といえばなんのアテにもならないTODOアプリとか、たかだか3,4ルートのSPAだったりで、 実

    モバイル向けにSPAをつくってた話 - console.lealog();
    ledsun
    ledsun 2015/04/30
    BtoCのスマートフォン向けは辛いのか・・・
  • jQueryとSizzleの関係について - console.lealog();

    事の発端。 jQueryの使わない機能があまりに多いのでカスタムビルドすることにした Sizzleも外せることを知る(容量がgzipで20KB分くらい減る) 外すと何が変わるか気になる <- いまここ ってなモチベーションで調べた一連の内容です。 jQueryとSizzleの関係 あらためて一応。 「jQueryといえば」な以下のようなコード。 var $hoge = $('#hoge'); // こういうのとか var $fuga = $('.fuga'); // こういうのとか $hoge.find('.foo'); // こういうのとか $hoge.text(); // 実はこういうのも そう、いわゆるこのセレクタの実態がSizzleなのです。 正確にはもう少し他のメソッドにも関係があります。 jquery/sizzle で、そのSizzleがjQueryの中でどういう動きをしてるか

    jQueryとSizzleの関係について - console.lealog();
    ledsun
    ledsun 2015/01/14
    iPhone4やGalaxyS3世代はquerySelectorAll遅いのか
  • Web API: The Good Parts 読んだ - console.lealog();

    某氏にいわれて下書きまで書いてたのを思い出したので、要約ほどではないけど感想文として提出。 個人的には第3章が良かったです。 Web API: The Good Parts 作者: 水野貴明出版社/メーカー: オライリージャパン発売日: 2014/11/21メディア: 大型この商品を含むブログ (3件) を見る はじめに これを読んで一番トクするのは、もちろんサーバーサイドで実際にAPIを実装する人かなとは思います。 とはいえ、 クライアントサイドからどういうデータ形式が欲しいかって話ができないと、 今の時代のクライアントのコードは書けませんよね? そういう意味では、xhrでデータの取得をしたことがあるって人みんなにとって、 一見の価値ありなのではとも思います。 第3章: レスポンスデータの設計 この章は実際にエンドポイントを叩いたときのレスポンスについての章です。 ここがオススメな章な

    Web API: The Good Parts 読んだ - console.lealog();
    ledsun
    ledsun 2015/01/07
    “配列ではなくオブジェクトを返そう”
  • いまさらrequestAnimationFrameを理解する - console.lealog();

    理解できたらいいな・・。 だいぶ今さら感はあるのですが、改めて知っておきたいタイミングなので。 参考:window.requestAnimationFrame - Web API リファレンス | MDN 一定間隔で処理を繰り返す CanvasでもCssアニメーションでも、「描画処理を繰り返し実行する」ところは一緒。 そこをどうやって実装するかという話で、今まではsetIntervalやsetTimeoutを再帰で呼んだりしてました。 setInterval var anim = function() { console.log('Animations here.'); }; window.setInterval(anim, 1000); 一番わかりやすいし手軽です。 だいたいいつもコレなんじゃないでしょうか。 setTimeout var anim = function() { cons

    いまさらrequestAnimationFrameを理解する - console.lealog();
    ledsun
    ledsun 2014/10/15
    次回描画前に実行する処理を指定できるのか。_.defer使うより性能上がるかな?
  • OSCON 2014: How Instagram.com Works; Pete Huntの要点まとめ - console.lealog();

    なんか最近こんな記事ばっかですが、まぁええよね!w 今回はこちら。 OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube Instagramがどうやって作られてるか、です。 Pete Huntさんは、FacebookでInstagramのエンジニアやってて、いま噂のReact.jsにも携わってるお方。 How Instagram.com Works Webでやる理由 このアプリ全盛期にあえてWebでサービスを提供しているその理由は、 パフォーマンスがいいからではなく、 ぐぐらびりてぃのためでもなく、 アプリでもモバイルでもPCでも、ユーザーの利用環境を問わず提供できるから どうつくるか Webページをユーザーに届ける方法はいくつかって、 従来型のサーバーサイドで全部レンダリングして返す ページ内をいくつかのパーツ(Pageletっ

    OSCON 2014: How Instagram.com Works; Pete Huntの要点まとめ - console.lealog();
    ledsun
    ledsun 2014/09/20
    “webpack”はベターRequirejsなのか。/ 当座はMB単位のJavaScriptは作らない予定。対象外かな?
  • 噂のVue.jsをさわってみた - console.lealog();

    なんか流行りにのってる感があります。 参考:vue.js なんかわからんけどはてブの上位に出てた、気象庁のAPIとあわせて使ってみました。 以下、サンプルのURLです。 ソース見た方がはやいかも。 気象庁APIの仕様変更?の影響か、レスポンスが取得できなくなったので、現在動作してません。 使用感なんて語れるほど大した身分ではないのですが、まあこういう風にも見えてるよ、ということでココはひとつ。 20140712追記 いまだぽつぽつブクマされるので追記です。 このサンプルで使ってるVue.jsはバージョンがかなり古いので、そこを念頭に置いた上で読んでください! 最近のバージョンアップでループまわりは記述方法変わってた気もするので。 さわるまえ ドキュメントを読んでる感じ、Angular.jsの時と同じような印象。 「え、コードこんだけでいいの?うわ動いてるすげー!」っていう感じ。 コードのス

    噂のVue.jsをさわってみた - console.lealog();
    ledsun
    ledsun 2014/07/13
    (全然関係ない話だけど)v-のハイフンをタイプミスして、字面で見分けられないで死んだ。アンダースコアにならないだろうか?
  • NodeのExpressにSocket.IOのアプリを統合する - console.lealog();

    ここ最近はNode.jsを勉強中で、Socket.IOについては一通りさわれたと思うので、今度はExpressをさわってます。 せっかくなので以前のSocket.IOのチャットアプリをExpressにのせて、以降のNodeの勉強をExpress上でやることにしました。 で、ここからがメモの題。 Expressを普通にインストールしてSocket.IOを使うサンプルは結構ありますが、それらをそのまま参考にしてるとapp.jsがどんどん肥大化していきます。 なんの根拠もない個人的な理由ですが・・、 app.jsはサーバーを起動する部分と各種ルーティング機能への橋渡しなど、必要最低限にしたい 他にサンプルを作ったときも、うまく結合できる ので、コードを出来る限り分割することにしました。 正解・最適解かはわかりませんが、一応達成できたのでその記念のメモです。 Expressらしい使い方はまだまだ

    NodeのExpressにSocket.IOのアプリを統合する - console.lealog();
    ledsun
    ledsun 2014/02/21
    app.js内でsocket.ioとのやり取りが煩雑にならないために
  • Node.jsのConnectなら、ローカルサーバーを一瞬で - console.lealog();

    ちょっとコレは感動的やったので! ご存知の方はご存知なのでしょうが、このモジュール。 参考:Connect - High quality middleware for node.js インストール Node.jsとnpmは使える想定で。 言わずもがなnpmでインストール。 cd /path/to/my/project mkdir sample && cd sample npm install connectしたらば、以下のファイルを用意します。 var cnct = require('connect'); cnct().use(cnct.static('/path/to/my/project/sample')).listen(3000); Connectをrequire どこをドキュメントルートにするか 何番ポートか たったこれだけ。 ファイル名は server.js とでもしておくとして

    Node.jsのConnectなら、ローカルサーバーを一瞬で - console.lealog();
    ledsun
    ledsun 2013/12/02
    素振り用
  • 1