タグ

ブックマーク / qiita.com/mizchi (9)

  • React とGUI 設計論、あるいは新世代のホームページビルダー - Qiita

    注意。実装はまだないです。思考実験的な意味合いが強いです。 持論 Reactやredux/Rxのデータモデリング手法の発達で、ツリー構造の末端に渡すまでのデータモデリングが主戦場になりつつあります。これはロジックを注入する部分と、プレゼンテーショナルなものが明確に分離されてきたことを意味します。 僕は個人的に、 GUI にまつわるものは、GUIで設計したい、という気持ちがあります。そう、僕が作りたいと思っているのは、悪名高きホームページビルダーです。 とはいえ、プログラミング抜きでxxxできる!というものではありません。むしろプログラミングとGUIを横断するイメージで、Unity や UnrealEngine のような開発環境を想定しています。 今やりたい理由 ブラウザの仕様が安定してきた 色々と使えるパーツが増えた JS で複雑なツールを作れるようになり、インブラウザな開発ツールが作

    React とGUI 設計論、あるいは新世代のホームページビルダー - Qiita
  • Qiita beta版のフロントエンドパフォーマンス改善案 - Qiita

    ふとログインすると beta 版UIってのが使えた。完全に dev.to 意識してて笑った。 実際には自分が残してきたロードマップや、Component が使われているのであろうのがわかって、そうそうこれがやりたかったんだよって感じで、とはいえまだ改善点がたくさんって、今の中の人達もわかってると思うけど、元中の人として dev.to ぐらいやるにはどうすればいいってのを残しておきます。 わかる変更点 CSSの脱bootstrap色が強くなった トップ画面が、ユーザーごとのカスタムフィードから beta版 の人気の投稿が主になった 元々そういう目的で企画を起こした記憶がある… フレンドフィードもうあんまり使われてないよね クエリが重いフレンドフィードより、静的にキャッシュできるランキングがトップにあるのはチューニングしやすい 改善案 やや無理難題だったり、中の都合も察してるけど、できるだけ目

    Qiita beta版のフロントエンドパフォーマンス改善案 - Qiita
  • AMP/PWA をどこで/いつ使うか - Qiita

    某所で使った資料の公開版 用語整理 PWA: ネイティブアプリのようなUXを提供するための機能群 SPA: JSで遷移するシングルページアプリケーション AMP: 後述 PWAMP: AMPで流入させてPWAを起動する形式 MFI: モバイルファーストインデックス いまさら聞けないPWAとAMP アメブロ2017: Isomorphic Web Appの進化編 AMP とは イニシャルビューのためのHTMLの特殊なサブセット GoogleにホワイトリストされたHTML属性しか使えない GoogleにホワイトリストされたJSプラグインしか使えない CSSはHEADに全部書く AMP仕様を満たすと、Googleがキャッシュして、モバイルの検索流入ではそのキャッシュを使う HTTPS必須 必ずしも全ページをAMPに対応する必要はない PWA: ServiceWorker の機能 リソースの先読み

    AMP/PWA をどこで/いつ使うか - Qiita
  • 最強のフロントエンドの雛形作った (2016/12/31) - Qiita

    yarn とりあえず yarn install と yarn start だけで動く npm(yarn) scripts babel/webpack での多段ビルド build:js はChromeでだけで動くビルドを吐く(デバッグを容易にするため) build:js:production はIE11+ ava/nyc/istanbul でテストとカバレッジ postcssCSSのビルド uglify-js/csswring で圧縮 CircleCI eslint, flow, ava release ブランチに push で gh-pages にデプロイ ## やってないこと ReactAngular も jQuery も何も入ってない。あくまでそれ以前にやることをまとめた。 参考になるだろうけど、人によっては使わないツールも多いと思われるので、適当に削ってください。 こういうの

    最強のフロントエンドの雛形作った (2016/12/31) - Qiita
  • フロントエンドエンジニア(mizchi)が暇な時にやること - Qiita

    暇というか日常的にやってること https://news.ycombinator.com/ と http://www.echojs.com/ と http://b.hatena.ne.jp/efcl/ をフィードリーダーに突っ込んでいて、面白そうなのをメモっておく 暇なとき 日頃メモってたライブラリの試し切りをする 面白かったら紹介記事を書く 多少やる気リソースが多めだと新しい言語(最近はRustかElixir)の勉強を進める http://codepen.io/ で面白い動きするやつのコードを探してコード読む とくにCodePenがオススメで、割とゲラゲラ笑いながら読めるやつが多いので楽しい。CodePenのテクニックはそのまま自分の業務に持ち込むと悪目立ちするので控えているが、Webでもこういう演出ができる、と頭の片隅にいれておくことで、いずれ何かに役立ったりする。たとえば昨日読んだ奴

    フロントエンドエンジニア(mizchi)が暇な時にやること - Qiita
  • jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita

    俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな

    jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
  • 春からはじめるモダンJavaScript / ES2015 - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 春ですね!人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScript歴史 まず最初にJavaScript歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点

    春からはじめるモダンJavaScript / ES2015 - Qiita
  • 俺のJSライブラリの世界観(2014末版) - Qiita

    http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指し

    俺のJSライブラリの世界観(2014末版) - Qiita
  • Promiseを使った逐次処理でユーザー入力との待ち合わせができるイベントループを記述する - Qiita

    何がしたいか ゲームループがループごとにイベントを複数生成するのだが、それを時系列に沿って順番に捌きたい でもオブザーバでグローバルなイベント投げまくるとすぐクソコード化する どうにかしてピュアなモデルからビューとの待ち合わせ(オブザーバー含む)を切り離したい。なんでもしますから! というわけでちゃんと設計練って書いてみたら結構いいんじゃねとなったので、解説書く。 設計の概要 EventSource#createEvents() は Eventの配列を生成する 実際にはここがユーザーが記述する部分になる EventRunner はループ毎にEventSource#createEvents()を呼び、上から順に処理する event.eventType毎に処理の仕方を記述する この例ではEvent間の時間を100msとなるよ]うにしてるが、実際なんでもいい。 コード CoffeeScriptで

    Promiseを使った逐次処理でユーザー入力との待ち合わせができるイベントループを記述する - Qiita
  • 1