最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
PreactにSignalsがきた - console.lealog();
Signals – Preact Guide 端的にいってしまうと、Solidのソレとほぼ同様の体験でコードが書けるようになる・・・！ まずはコード // store.js import { signal } from "@preact/signals"; export const count = signal(0); export const add = () => count.value++; // Counter.jsx import { count, add } from "./store.js"; const Counter = () => ( <div> <p>Count: {count.value}</p> <button onClick={add}>click me</button> </div> ); さすがにこの時代になるといろいろ既視感もあって、すんなり読めるコードか
達人プログラマー（第2版） 読んだ - console.lealog();
久しぶりに物理本を読んだけど、やっぱ物理はええな・・かさばるとこ以外。 せっかくなので読書感想文と、特に印象に残った部分を、章ごとに書いておく。 第1章: 達人の哲学 この本を読んでいくにあたって、そもそも達人とはなんぞやという話がメイン。 プログラマーというより、いわゆる社会人としてこうあれみたいなテーマで書かれてて、なんかみんな読んだらいいのではと思いました。 物事をうまく進捗させるために、 まず何を言いたくて その結果どうしたいのかまで考えて 相手の状況やタイミングを見計らって コミュニケーションを実行する・されると、あれこれスムーズにいきますよっていう。 このテクは中々に便利で、日常生活でもそれこそ夫婦間とかのコミュニケーションでも使える話かなーと思ってて。 ただ自分の場合はこれをやりすぎて、質問してるはずが誘導尋問みたいになっちゃうときがたまにある・・。 第2章: 達人のアプロー
転職しました - console.lealog();
そして子も生まれていました！ というわけで、子です🤗 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
フロントエンド x RTC界隈の最近とこれから - console.lealog();
フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptのAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。（WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど） ガワのAPIという観点でいうと、最近はも
WebRTC QUICがChromeでOrigin Trialできるように - console.lealog();
RTCQuicTransport Coming to an Origin Trial Near You (Chrome 73) | Web | Google Developers 今回は翻訳ではなく、気になる点の抜粋です。 TL;DR WebRTCにQUICがくるよ まずは`RTCQuicTransport`がChromeに実装されます M73からOriginTrialできます WebRTCにQUICがくる まずは`RTCQuicTransport`というクラスから ICEは変わらず、`RTCIceTransport`というクラスに QUICなので順序も再送も保証！ ゲームやメディアや様々な用途に使えるよ なんで こういう低レイヤーが充実すると、もっといろんなことができる それがWebRTC Next Versionだよ なぜQUIC リアルタイム性のため UDPの上に位置する `
HTTP3Study に行ってきたメモ #http3study - console.lealog();
HTTP3Study (new) - connpass まったく詳しくない分野で脳内補完が効かないのと英語なのとで、まったく自信のないメモに仕上がりました。 間違ってたらむしろ教えてほしいです！ HTTP/3 (英語セッション) from Mark Nottingham はじめに ここは最初にWGのMtgをした部屋なので不思議な感じ 仕様の解説というより、経緯とか周辺について話すよ 仕様について議論してるけど、全ての実装・ユースケースを把握してるわけではない いままで HTTP/0.9 今でも使われてるかも `GET /`だけみたいにシンプル HTTP/1.0 いくつかヘッダがついたりした まだシンプルだったあの頃 1993年とかそのへんからユースケースが混んできた なのでみんな拡張をはじめた UAとかHostとか HTTP/1.1 Transfer-Encoding: chunk gzi
転職しました - console.lealog();
実は3年前にも同じタイトルで記事を書いてることに気付いたけど、定期ポストではありません！ いままで ピクセルグリッドという会社にいました。 知る人ぞ知るいわゆるWebの受託の会社です。 フロントエンド以外の部分は”社として”請けないという少し変わった？会社。 まぁ案件の規模もいろいろ、チームもいろいろある中、基本的にソロで案件をこなすことが多かったです。 詳しくは去年と一昨年の振り返り記事にもあるけど、だいたいこんな感じのことをしてました。 いわゆるフロントエンドのFWを使ったSPAの案件いろいろ AngularJSもAngularもVueもReactもやった 割合は1:2:1:6くらい 大規模ではなく、中・小規模なものがほとんど 動画やWebRTCなどメディア系の案件 AbemaTVもどき作った 某WebRTCのSDKを使ってSPAも作った SkyWayの中の人業 バグや挙動不審ブラウザ
WebComponentsへの気持ち - console.lealog();
この記事では、 ReactやVueではなくWebComponentsだけを使いたい気持ちを胸に、とある社内プロジェクトをやってみての学び 巷にあふれるWebComponentsに対する見方への違和感 についてメモっておきます。 ただ「WebComponents」の語がもつ意味をきっちり定義してるわけではないので、そのへんは雰囲気で察してください。 そのせいで勘違いされがちな概念なんかも、知らんけど。 まずは巷にあふれる意見に対する気持ちから。 (React|Vue|Xxx)はもう古い、これからはWebComponentsだ！ 勝手なイメージですが、こういう認識の人いるよね・・？ 個人的には、「いや、WebComponentsはそういう技術じゃない」と思った・思ってます。 以下、ReactもVueもAngularも「ウェブアプリケーションを作るための技術」であるが、WebComponents
CDN Study (Akamai/Fastly) に行ってきたメモ #CDN_study - console.lealog();
CDN Study (Akamai/Fastly) - connpass 久しぶりにすごい人混みに身をおいたわ・・。 どんな勉強会だったか CDNにもいろんな歴史がある あの頃のCDNといまのCDNでは、世界観も役割も変わってきてる 気がする ので、中の人に聞いてみよう！ という主旨の会。 from Akamai 資料は見つけたら CDNの過去と現在 1995年の時点で、中央集権的なWebは破綻するといわれていた 中央集権型ゆえに インターネットの混雑が問題になるだろう from Tim Berners-Lee インターネットは網の目 ただ実際は地震でケーブルが切れて不安定になったり 去年のGoogleの経路のアレとかも 爆発的なトラフィックによる負荷 スターウォーズの新作トレーラーとか インドのプレミアリーグとか CDNってそもそも インターネットの不安定さを避けるためにどうすれば ユー
やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち - console.lealog();
個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。 そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイドレンダリング（以下SSR）をすることになるかも SPAじゃないページもまとめてReactでSSRすることになるかも ただ個人的にはSPA+SSR不要論者 サーバーサイドのテンプレートとしてのReactも冗長なだけやろ派 でも仕事なのでしゃーない（お客様がそう申されるなら・・ なのでやるからには再考察してみて、前向きにやれる要素を見つけたい！ けどどんだけ考えてもやっぱり意義が見つけられなーい( ´Д｀)=3 という感じで、SSR自体の是非はまあどうでもよくて、ただ個人的に「しなくていい」と思ってる気持ちをまとめたものです。 技術に是も非もないです。大事なのはどう使うかなのです。 ちなみにやってみた結果・・とかいう話ではなく、やってない
Node学園 25時限目 に行ってきたメモ #tng25 - console.lealog();
今度は銀座で会長が遅刻してくる回。 Node学園 25時限目 - connpass Node v8 by abouthiroppy abouthiroppy/node8 Node v8 新たなLTSバージョン GitHub - nodejs/LTS: Node.js Foundation Long-term Support Working Group 高速化がメインのアップデート WebAssemblyがデフォルトで有効に TURBOFUN https://github.com/v8/v8/wiki/TurboFan V8に最適化されたJITコンパイラ ES2015+なコードにも対応できるように 従来のCrankshaftではそこが難しかった IGNITION インタプリタ V8のJITの非効率だった部分を、予め変換することで解消 リリースは05/30 おすすめアップデート内容 N-API
東京Node学園祭2016 にスタッフ参加してきたメモ #nodefest - console.lealog();
初の2日開催でしたが、今年も無事に終えることができました。 去年に引き続き、今年もスタッフ業に携わったので、そのあれこれを忘れないうちにメモっときます。 技術ブログですが各発表についての内容は一切ありませんｗ 当日まで 公式サイトを @hiloki と一緒に作ってました。 ってもサイト内で動いてるjs部分と、メンテしやすいようにテンプレを分けるとかデプロイするスクリプトを書くみたいな細々したことしかしてなくて、ほぼ @hiloki 神の偉業です。 過去に例を見ないオシャレなサイト、TシャツもステッカーもオシャレならAfter partyのケータリングまでオシャレと、本当にオシャレ番長にはお世話になりました。 After Partyのオシャレな料理はgoodyでした！ https://t.co/B2HEEgFP4j #nodefest— Hiroki tani( ･谷･)و ̑ (@hilo
Node学園 23時限目 に行ってきたメモ #tng23 - console.lealog();
渋谷かと思ってたら東京だった回！ 「npm v4/v5/next」 by @othiym23 node-gakuen-201610.md · GitHub これは事前に共有してもらえたスクリプトです。 ほぼこれの通りに話されてたので、ざっくりメモ。 自己紹介 npmのCLIチームのリーダーです チームにはKatとRebeccaがいるよ ありがとう @watilde さん! npmのいままで 今やmillions of users, over 350,000 packagesな大プロジェクト なので機能追加は慎重にやっていく SemVerはある種の契約 npm@2からnpm@3 まさにメジャーアップデートだった でもいまだにnpm@2を使ってる人もいる npm@2のほうがインストールが早いケースもある npm@4 メジャーアップデートではあるがそんなに変わらないかも depricatedにな
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やるからで開発言語を選ぶのはナン
HTML5 Conference に行ってきたメモ #html5j - console.lealog();
2015年に引き続いて2016年も。 北千住もーちょっと近くならんかな・・ｗ なんだかんだずっとホールにいました。 基調講演 W3C/Keio 中村さん 画像とか動画でおなじみHDR HDRをWebから使えたら・・・？ こういう視点がこれから必要なのでは BigData, AI, IoTなどIT業界のBuzzWord でもこれは、Internet・Webの上に成り立ってるもの WebはDistributed OSだ！（地球上の） なので我々がふだん作ってるのは、OS上の資源 W3Cの活動範囲の広さそこにつながるもの TV（Hybridcast）、車、電子書籍 車のインパネもWebに！（なるかも e-PubとW3Cの統合 縦書きCSS Blockchain https://en.bitcoin.it/wiki/Block_chain のような分散システム IG (Interest Group
0からはじめるFlow Part.2 - console.lealog();
前回のPart.1では導入編ということで環境を整えるところまで。 今回からは各ファイルに実際に型をつけていくところを。 そしてその過程でハマったものについて・・・。 最初に結論 Flowの導入を迷ってるそこのあなた！ それははじめたてのプロジェクトですか？そうでないなら要注意。 既存のプロジェクトに導入する場合、 元コードを型安全なFlowに怒られないコードに修正していくのがそもそも大変だったり Classプロパティに型をつけると突然Babelのコンパイルが失敗するようになったり（Part.1を参照 大した処理がない、更新頻度が低い、...etcなど、型の恩恵が薄くただ徒労感を感じたり そもそも困っても世間に情報があまり見当たらなくてつらかったり なんしかまぁ色々と起こるので、それなりに大変です。 俺は結局最初のモチベーションであったウデマエアーカイブへの導入は挫折。 でもやりかけで終わり
0からはじめるFlow Part.1 - console.lealog();
こないだReactで書きなおしたウデマエアーカイブに、Flowをいれてみようと思って、しばらく色々と試したことのメモ、もとい奮闘記です。 Flow | A static type checker for JavaScript 事前準備 npm i --save-dev babel-plugin-transform-flow-strip-types npm i -g flow-binまず最初に、`babel-plugin-transform-flow-strip-types`をいれる。 型についての記載を実コードから削ってくれるやつ。 次に、グローバルに`flow-bin`をインストールしておく。 最後にエディタをいい感じに。 開発はVimでやるので、SyntasticとFlowを連携させる。 let g:syntastic_javascript_checkers = ['eslint',
Payment Request APIとは？〜Frontend Meetup Tokyo Vol.3 に行ってきたメモ #frontendmt - console.lealog();
大手町は微妙に遠いと思いつつ今のところ皆勤賞になってるこのシリーズ。 日本経済新聞社はフロントエンドエンジニアを募集しています！とのことです。 PaymentRequest API by @sideshowbarker 資料は見つけたら追記 仕様はこれ↓ Payment Request API 今ならChrome51のDev版でflag立てれば使える Chrome Platform Status samples/paymentrequest at gh-pages · GoogleChrome/samples · GitHub デモとコードはココ もちろん`https`でないと動かないAPI DEMO 買う！ってすると購入ステップへ 購入ステップになるとブラウザがUIを呼び出す 開発者側はさわれないUI ページのURLもちゃんと出る、偽装できない 地味だが別ページとかでもないのでセキュリテ
#スーパーイカメーカー を支える技術 - console.lealog();
どうも、中のイカです。 昨日の15時頃に晴れてリリースしたコレですが、正直想定してなかったレベルで反響があって驚いてます。 leader22.github.io さてさて、というわけで恒例の裏側紹介記事です。 近況 今のところの瞬間最大風速です。 とりあえずこんなん pic.twitter.com/65cIbl2N1e— りぃ (@leader22) 2016年1月21日 初めて見たわこんな数字ｗ ホッテントリ入りもしたしredditでもスレ立ったり。 トレンド入りしてるΣ(ﾟДﾟ；≡；ﾟдﾟ) pic.twitter.com/yDBVSf2ciE— そめ・そるめ (@jenga_ink) 2016年1月21日 まさかのポストすしざんまい！すごいなーイカ・・。 ほんと、サーバー落ちないかどうかだけが心配でした。 そもそもどの程度で落ちるかの想定もできないくらいの素人ですけど！ フロントエン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
