最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ

もう人生で何個目かわからない markdown エディタ作った。が、今回のは結構気に入っている。 https://markdown-buffer.netlify.com/ で遊べる。 用途としては、GitHub か Qiita か はてなブログかわからないが、なにか書こうと思ったときに、どのサービスも中途半端に重いので、とりあえずのバッファが必要、という感じで作った。なので速度重視。 ブラウザのストレージで永続化してる。オフラインで動く。できるだけエディタとしてはスコープを大きくせず、単に編集バッファ(textarea)でしかない、というのを意識している。 結構頑張って作り込んでしまった https://nedi.app が色々肥大化してしまっていて入力時にラグを感じるので、編集体験を見つめ直す自戒もある。 機能 数式対応 コードハイライト対応 バックグラウンドで自動保存 改行を br に

某社で自分が 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

これは、個人でどんなエディタを使うべきか、ではなく、「チームとして」新しいものを採用するとき、あるツールがエディタ横断で便利かどうかを考える必要がある。 自分個人としては、基本はAtomを使って、TypeScriptを書くときだけVS Code を使っている。ターミナルでは Vim。 環境でエディタを選ぶ 最近の新規プロジェクトでは、とくにブロッカーがなければ TypeScript を使っていいと思う。TypeScript を使うなら当然 VS Code を使うことになる。Atom や Vim でもいいが、TypeScriptのエディタとしては、流石に完成度が頭一つ抜けてる。JavaならJetBrains 的なノリで、TSならVSCode、そういうものと思ったほうが楽。 TS以外なら、エディタはなんでもいいが、ある程度流行ってるものでないとエコシステムに追いついてくれない。 prettie

qiita.com という記事を書いた。 要約としては、「今こそGUIでWebのUIを生成できるような開発環境を目指すべき」みたいな話。 概念 Web の GUIの概念を分解すると JS はViewとしての実装を持つプレゼンテーションレイヤー、ロジック注入のコンテナーレイヤーに分割して考える HTML/CSS は、レイアウト定義のレイヤー、そのレイアウト領域を占めるエレメントのレイヤーに分割して考える この考え方に基づくと、GUI開発環境で作るべきものは、 テンプレートへのJSロジックのつなぎ込み レイアウトエディタ 個別のエレメントの装飾 となる。 JSロジックのつなぎこみはヘヴィにJSだからまだコードで書く方がいい。作るならノードベースのエディタになりそう。 エレメントの装飾は自力で頑張るより Sketch から生成できないか試したい。後回し。 レイアウトエディタは今でも作れそう。作っ

追記: 2019/11/12 2年経ったけど体験が悪化し続けた結果、 Firefox がこの記事の通りになりましたね… www.fxsitecompat.dev プッシュ通知、ネイティブアプリの機能郡をWebに持ち込むPWA技術の売りの一つだが、当初から懸念されていたとおり、非常にノイジーなものとなってしまっている。自分も気づけばあらゆるサイトの購読確認を、無意識で拒否を押すようになってしまった。 hagex.hatenadiary.jp 少し前の記事。最近はどこかで wordpress のプラグインになったのか、目にする機会が非常に多くなり、非常にストレスフル。最初は技術的な目新しさからか、ある程度容認していたが、さすがにこの状況が悪化する一方で、本気でやばいんじゃないかと思っている。とくに初見のブログの記事を読む前に、購読確認が出るのが最悪の体験となっている。 そもそもプッシュ配信とは

JSの学習コスト高いかという問題、言語のコア自体はシンプルだが細かい == とかのハマりどころが多いのと、言語機能自体がシンプルすぎてエコシステムを理解してモジュールを扱うところに辿り着くのが大変、という問題に分類できる— 現場の声 (@mizchi) 2016年8月15日 jQueryの学習コストは、DOMはツリーなんだよという概念の獲得と DOM API の抽象サブセットを覚えるというだけで、2016年現在は jQueryによるUI設計論(ここが高まるとBackboneとかその辺)みたいなものに手を出す必要がないなら、そんなでもないんだろうな— 現場の声 (@mizchi) 2016年8月15日 Reactが難しいと言われる場合、仮想DOMという概念がやや難しい、というか非常にCS的なアルゴリズムとデータ構造が背景にあって、その上で単純なトップレベルAPIとアルゴリズムを理解してないと

これらの件 最近のフロントエンドへの違和感 - nobkzのブログ 日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。 前提 去年は勝手Reactエヴェンジェリスト(自称)として、日本に複雑化するフロントエンド技術の海外の動静を紹介をし続けていた。 僕としても、フロントエンドは複雑化してると思ってるし、それは「目的の複雑化に対して必要なもの」だったと思っている。ここでいう目的とはSPAの構築であって、普通のウェブサイトは含んでいなかったが、普通のウェブサイトも当たり前のようにリッチ化目指しているのが現在なので、境目は曖昧ではある。 僕もフロントエンドの複雑化がだれにでも必要なものだとは思っていない。が、定期的に情勢を整理して、交通整理するのを心がけてきたし、春からはじめるモダンJavaScript / ES2015 - Qiita みたいな記

やられた。 blog.livedoor.jp 【ご注意ください】株式会社JMT、エヌティーサポート、ベイシスイノベーション、株式会社RGイノベーションといった悪質な代理店がNTTを名乗って So-Net NURO光の詐欺まがいの勧誘をしている件 http://satsumahomeserver.com/blog/4568 やりとり 「NTTフレッツ光です」 「料金改定がありましてその確認と手続きです」 まるで規定事項の伝達のような口ぶり。 「今の4500円から3800円になります。確認のためNTTの登録番号がわかる書類はありますか」 出してしまった。これ出した時点で勝手に契約させられた模様。これ立派な詐欺だと思うんですが。 この後、さきの資料にあるように、 「2か月無料の有料オプションに入ってることになってるので、自分で解約してくださいね」となった。今日まで料金改定と、＋アルファで有料オプ

「最近の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

こういうの ゼルダ、Portal、ソニックなど。ゲーム音楽をバンジョーで演奏 ｜ コタク・ジャパン 動画広告、記事読んでる横で15s程度の動画が流れるくらいだったら、そんなロースペックなマシン使ってるわけでもないしどうでもいいんだけど、突然大音量で流されると心の用意出来てないしオフィスいるかもしれないしで、最高にブチ切れそうになる。 止める方法がわからない場合、ブラウザごと落とすことを止むを得ない。 しかもヘッダに近い場所じゃなくて、記事末尾とかにおいてるサイトも多い。cmerが悪質なのは、わかったところで再生を止める方法が提供されてないこと。悪質すぎる。 個人的には積極的に不買運動せざるを得ない。とりあえずこれが原因で kotaku.jp をRSSリーダーから外した。 「テレビCMの再価値化を目指す」――CMer TV 五十嵐社長に聞く | AdverTimes（アドタイ）

2日で作った。昨日から無職なので手が空いてたのもある。 こんなの mizchi/my-feed-reader 概要 nodeでクローラ100行、サーバー40行、クライアント400行ぐらい。テストはない。cssもない。 認証とかなくて、ローカルで動かすの前提。LDRのexport.xml(opml)を読み込む。詳しくはREADMEで。 jksaでフィードを移動する。sで飛ばした時に未読フラグつけてる。oでバックグラウンドで開く。 大事なことなんだけど、マウス操作は一切対応してない。 データベースは使ってない。サーバーでインメモリで抱えてる分だけ降ってきて、既読管理は最後に読んだフィードの更新日時をlocalStorageで持ってて新規フィードもらうたびに比較してる。雑な設計。 技術的な話 Koa, React, Generatorとか自分が使いたい技術を適当に使った。 Reactで雑に作るの

ニコ動の中でとにかくバグ動画だけ見続けてて、若干病んでる気がしてきたけど、やっぱり好きなモノは好きで、紹介する。 コンテキスト ヒテッマンリスペクト、ヒテッマンが元々ハイコンテクストなコンテンツだったのが、本家がいなくなってよりハイコンテクストになって、外野から何がなんだかわからん感じになってる。好きだけど。— 片手間以上 (@mizchi) 2014, 7月 7 ヒテッマン氏はニコ動でひたすらチートコードでゲームに意図的にバグ発生させてそれを動画にして一大ジャンル作った人なんだけど、本人が失踪してからファンがヒテッマンリスペクトタグで動画上げ始めて、本家で生まれた名言がそのまま使われてるんだけど、本家が消失しているので今からだと辿れない— 片手間以上 (@mizchi) 2014, 7月 7 バグ動画みるの、スプライトのぶっ壊れ方でどうやってゲームが作られてるかわかるし、綱渡り的に作られ

Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 - Qiita この記事は、全体的に自分の業務以外の評価基準やトレンドを知らないんだなという感じで、わざわざ付き合うと精神的に消耗する感じがした。ただ、それが彼らの本職でない以上、自分もこの結論に至るのは仕方ないと感じている部分はある。 真の問題は、自分がレガシーなJavaScriptを書いているという自覚がない人間が、ここ数年の技術トレンドから乖離したコードを書き続けることで他のエンジニアやエコシステムそのものに悪影響を及ぼしているケースが散見されている。一行書く毎にグローバル汚染するスクリプトを見せられてもメンテ出来んと言われても、はいそうですねとしか言えないし、そういう人に最近のライブラリを触らせると遅くなるというのは、画面全体を一つのMustacheテンプレートにしてBackbone.Modelのパラメー

これみて思い出した。 私はブラインドタッチが出来ない - はてな村定点観測所 僕も昔は右手のホームポジションが右に一個ずれてた我流で、たまに手元見ながらタイピングしちゃう癖があったんだけど、HHKB無刻印にしたら綺麗なフォームになってたので、ちゃんとタッチタイピングしたい人はHHKB無刻印使うといいと思う。 PFU Happy Hacking Keyboard Professional2 墨/無刻印 英語配列 USBキーボード 静電容量無接点 UNIX配列 WINDOWS/MAC両対応 ブラック PD-KB400BN 出版社/メーカー: PFU発売日: 2006/03/23メディア: Personal Computers クリック: 192回この商品を含むブログ (23件) を見る HHKB無刻印炭、たしか前職で @shishi4tw が使ってるのみてあーこれカッコイイと思って買ったんだけ

小学生の時、自分が女の子殴ったとかそんな理由で学級会開かれて(実際は意図せず箒の柄があたっただけなんだけど)、バカらしくなって自分では仏頂面決め込んだつもりでいたら、ニヤニヤしてんなふざけんな！って言われて教師に思いっきりぶん殴られたことある— 性格は糞 (@mizchi) 2013, 10月 9 意図せず箒の柄があたったのを被害妄想で殴られたと思ってしまういじめられがちな女子と、意図せず当たったという主張が認められない程度には教師に信頼されてない生徒だったので、学級会悲惨だった— 性格は糞 (@mizchi) 2013, 10月 9 素行が悪いのは事実だったけど仏頂面のつもりが笑ってるつもりに見えるのはだいぶ面倒アレだなと思ったけどたぶん25になっても何か考えてる時は常にニヤニヤしてるらしいので全く直ってない— 性格は糞 (@mizchi) 2013, 10月 9 教師に対する不信、小6

昨日の記事で、抽象的なまま書きまくった反省もあるのだけど、それと同時に残念な気持ちになったので、すごく当たり前のことを書く。 オンラインゲームでクライアントに状態を持ったらメモリ操作されて危険っていうブコメが多かった。それは正直、古典的なウェブアーキテクチャから脱却できない残念な感じだと思ってる。 原則 クライアントはサーバーのキャッシュを作って、サーバーと同じロジックを持って、計算し、次の行動を決定する。 が、サーバーはクライアントから送られてくる情報を信用しない。 大事なことなのでもう一度言う。サーバーは、クライアントから送られてくる情報を信用しない。 対応 モデルの状態を受け取るのではなく、モデルのトランザクションを受け取る。 実装例 AからBに攻撃したい。この時にattackEnemyというAPIを作るとする。 ここでのクライアント目的では、手元のデータで対象に攻撃可能かどうかを判

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