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

Platform Week - The Cloudflare Blog この中から、個人的に気になったものたちをさっくりまとめ。つまりWorkersとかPagesとかに関連するものが多く、それ以外のStreamingとかWeb3系はスルーしてる。 The next chapter for Cloudflare Workers: open source The next chapter for Cloudflare Workers: open source CFWのランタイムのソースコードをオープンソースにするっていう発表 現時点でコードが見れるわけではなさそう これで`miniflare`と実環境の境界もなくせるねって言ってた https://twitter.com/_mrbbot/status/1523652262115278848 がんばれ〜 コードとして公開されたとして、誰しもが簡単

Cloudflare社は、定期的に「なんたらWeek」って感じでまとめてアップデートを発表する取り組みをやってるっぽく、今回のテーマはフルスタック！ なんでもかんでもCloudflareでできるようにするよ！という強い意志を感じる発表たちだった。 Full Stack Week - The Cloudflare Blog 今回は実験的にTwitterでもまとめて流してたけど、やっぱりブログにまとめるほうがしっくりくるなってことで、改めて。 https://twitter.com/leader22/status/1460451057109127169 https://twitter.com/leader22/status/1460772775010791430 https://twitter.com/leader22/status/1461158193631936512 https://tw

というアプローチを紹介してる記事があって、なるほど？と思ったのでまとめてみる。 元記事はこちら。 Leveraging Web Workers to Safely Store Access Tokens – The New Stack 毎度のことながら、今にはじまったことではない。 元記事いわく WebWorkerであれば、メインスレッドで実行されるであろうXSSや3rdのコードから触れないので安全！ 設計としては、 メイン: まず`Worker`をロード メイン: 初期化のメッセージを`postMessage()` クレデンシャルがあるならそれを渡す ワーカー: アクセストークンの準備 受け取ったやつ or そこで`fetch()`して、オンメモリに保存 （これで準備OK） メイン: APIにリクエストしてほしいと`postMessage()` ワーカー: APIに向けてアクセストークン

久しぶりに物理本を読んだけど、やっぱ物理はええな・・かさばるとこ以外。 せっかくなので読書感想文と、特に印象に残った部分を、章ごとに書いておく。 第1章: 達人の哲学 この本を読んでいくにあたって、そもそも達人とはなんぞやという話がメイン。 プログラマーというより、いわゆる社会人としてこうあれみたいなテーマで書かれてて、なんかみんな読んだらいいのではと思いました。 物事をうまく進捗させるために、 まず何を言いたくて その結果どうしたいのかまで考えて 相手の状況やタイミングを見計らって コミュニケーションを実行する・されると、あれこれスムーズにいきますよっていう。 このテクは中々に便利で、日常生活でもそれこそ夫婦間とかのコミュニケーションでも使える話かなーと思ってて。 ただ自分の場合はこれをやりすぎて、質問してるはずが誘導尋問みたいになっちゃうときがたまにある・・。 第2章: 達人のアプロー

https://sveltesummit.com/ https://www.youtube.com/watch?v=vHHLLJA0b70 JST夜中スタートだとリアルタイムで見れない...😴 というわけで、気になるトークだけまとめました。 The Zen of Svelte (Morgan Williams) https://www.youtube.com/watch?v=vHHLLJA0b70&t=683s Svelteはフレームワークである そして学びやすいのが特徴 Pythonのように、Zenの心得がある https://github.com/feltcoop/why-svelte#easy-to-learn 作者のRich氏もこう言ってる Frameworks are not tools for organizing your code, They are tools for

https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本？PDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね？と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。（それでも長いけど） はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ

そして子も生まれていました！ というわけで、子です🤗 pic.twitter.com/UzvIiUpCOP— りぃ (@leader22) 2020年6月10日 人生ですなあ。 いままで 2018年12月からNTTコミュニケーションズという会社で働いていて、2020年6月いっぱいで退職しました。（なのでこれはいわゆるNTT退職エントリ 🥱） N社では、 SkyWayの（歴史ある）JS-SDKをメンテしたり （おなじく歴史ある）Nodeで書かれたシグナリングサーバーをメンテしたり OSSのSFUである`mediasoup`を使って、録音SDKとそのサーバーを実装したり WebRTCに関連するRFCやドラフトをとにかく読みまくったり いわゆるエッジな技術の検証をしたり 各種SDKを使ったWebアプリをいくつか書いたり https://github.com/skyway/skyway-con

フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptのAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。（WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど） ガワのAPIという観点でいうと、最近はも

実は3年前にも同じタイトルで記事を書いてることに気付いたけど、定期ポストではありません！ いままで ピクセルグリッドという会社にいました。 知る人ぞ知るいわゆるWebの受託の会社です。 フロントエンド以外の部分は”社として”請けないという少し変わった？会社。 まぁ案件の規模もいろいろ、チームもいろいろある中、基本的にソロで案件をこなすことが多かったです。 詳しくは去年と一昨年の振り返り記事にもあるけど、だいたいこんな感じのことをしてました。 いわゆるフロントエンドのFWを使ったSPAの案件いろいろ AngularJSもAngularもVueもReactもやった 割合は1:2:1:6くらい 大規模ではなく、中・小規模なものがほとんど 動画やWebRTCなどメディア系の案件 AbemaTVもどき作った 某WebRTCのSDKを使ってSPAも作った SkyWayの中の人業 バグや挙動不審ブラウザ

この記事では、 ReactやVueではなくWebComponentsだけを使いたい気持ちを胸に、とある社内プロジェクトをやってみての学び 巷にあふれるWebComponentsに対する見方への違和感 についてメモっておきます。 ただ「WebComponents」の語がもつ意味をきっちり定義してるわけではないので、そのへんは雰囲気で察してください。 そのせいで勘違いされがちな概念なんかも、知らんけど。 まずは巷にあふれる意見に対する気持ちから。 (React|Vue|Xxx)はもう古い、これからはWebComponentsだ！ 勝手なイメージですが、こういう認識の人いるよね・・？ 個人的には、「いや、WebComponentsはそういう技術じゃない」と思った・思ってます。 以下、ReactもVueもAngularも「ウェブアプリケーションを作るための技術」であるが、WebComponents

幸か不幸か、この2つについていろいろ調べた機会があったのでメモ。 結果、個人的には、hyperHTML推しです。 はじめに どっちも聞いたことないな？って人のために、何を目的とした技術なのかを。 これらはReactがやってるみたく、ウェブアプリケーションのViewを構成するコンポーネントを、宣言的に記述するためのライブラリ。 ただReactやらVueはVirtualDOMという抽象化を経る一方、こちらはRealDOMであるのと、JSXとかそういう記法はなく、Tagged Templatesを使ってコンポーネントを書いてく。 まあ実装はさておき書き味としては、めちゃくちゃ薄いReactって感じの立ち位置。 Template Literalで書いたHTMLを関数にわたすと、DOM要素として返してくれたり、実際のDOMツリーに反映してくれたりする。 で、そういう目的をもつライブラリとして白羽の矢

という試みをやってみたのでその学びをメモ。 もちろん全てのケースをカバーできたわけではなく、無限に気になることはあるけど、まあきっかけといことで。 環境はmacOSです。CIで動かすのは続編としてまたいつかブログに書きます。 何を使うか いわゆるE2E（URLでページ開いてボタン押したらどうでこうで）をやりたい場合、フロントエンド的な観測範囲だと現時点ではこの2択になるのかなーと思う。 Selenium TestCafe 他にオススメあれば知りたいです。 Selenium https://github.com/webrtc/samples/tree/gh-pages/test とかでも使われてる例があって身近ではあるけど、正直使いたくない・・。 https://github.com/webdriverio/webdriverio とかあわせていれれば多少のシンタックスはマシになるけど、もう

個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。 そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイドレンダリング（以下SSR）をすることになるかも SPAじゃないページもまとめてReactでSSRすることになるかも ただ個人的にはSPA+SSR不要論者 サーバーサイドのテンプレートとしてのReactも冗長なだけやろ派 でも仕事なのでしゃーない（お客様がそう申されるなら・・ なのでやるからには再考察してみて、前向きにやれる要素を見つけたい！ けどどんだけ考えてもやっぱり意義が見つけられなーい( ´Д｀)=3 という感じで、SSR自体の是非はまあどうでもよくて、ただ個人的に「しなくていい」と思ってる気持ちをまとめたものです。 技術に是も非もないです。大事なのはどう使うかなのです。 ちなみにやってみた結果・・とかいう話ではなく、やってない

東京は東京でも有楽町だった回。 Node学園 24時限目 - connpass 「Node.js x WebAssembly」 by yosuke_furukawa Node.js x WebAssembly // Speaker Deck WebAssemblyとは ポータブルで効率のいいバイナリ Nativeと同等の速度を目指す ユースケース ネイティブモジュールをWebで使いたい `vim`とか <- 誰がやるん https://rhysd.github.io/react-vimjs/ ゲーム ブラウザ外でも使えるけどそんなにターゲットではなさそう 全部を置き換えるのではなく、CとかC++で書いてあるものを動かすところから Node.js x Native Module 現時点で、どうやってNative Moduleを使うか NAN https://github.com/nodejs

どうも、中のイカです。 昨日の15時頃に晴れてリリースしたコレですが、正直想定してなかったレベルで反響があって驚いてます。 leader22.github.io さてさて、というわけで恒例の裏側紹介記事です。 近況 今のところの瞬間最大風速です。 とりあえずこんなん pic.twitter.com/65cIbl2N1e— りぃ (@leader22) 2016年1月21日 初めて見たわこんな数字ｗ ホッテントリ入りもしたしredditでもスレ立ったり。 トレンド入りしてるΣ(ﾟДﾟ；≡；ﾟдﾟ) pic.twitter.com/yDBVSf2ciE— そめ・そるめ (@jenga_ink) 2016年1月21日 まさかのポストすしざんまい！すごいなーイカ・・。 ほんと、サーバー落ちないかどうかだけが心配でした。 そもそもどの程度で落ちるかの想定もできないくらいの素人ですけど！ フロントエン

petehunt/react-howto · GitHub これの、2016/01/07時点での日本語訳です。 更新は追わないと思うので、流し読みにどうぞ。 react-howto もしあなたがReactをはじめたばかりで(もしかしたらフロントエンド自体もはじめてで)、React周辺のエコシステムに困惑してるとしたら、そこにはこういう理由がある。 そもそもReactはアーリーアダプターやエキスパート向けに作られた経緯がある Facebookが唯一実際に使われてる例であり、Facebookより小規模なプロジェクト向けの使い方にフォーカスしてない Reactのガイドを装った間違った情報も多い このドキュメントは、HTML・CSS・JavaScriptでWebページを作ったことがある人を想定読者にしてる。 これを書いたワケ Reactに関する情報が山ほど交錯してるから。 自分はReactを作った

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

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