サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
画力アップ
blog.koba04.com
https://yapcjapan.org/2024hakodate/ YAPC::Hakodate 2024 に参加しました。 まずは運営の皆様、関係者の皆様素晴らしいイベントをありがとうございました。とても快適に楽しめました👏👏👏 前回の広島も参加していたので、そこまで久しぶり感はなかったですが前回は話せなかった方々とも話せてとても楽しかったです。同じ会社の人ともはじめましてをしつつ話せたのはよかったです。 前回のブログ 初函館でしたが、天気もよく過ごしやすくて食べ物も美味しくてとても楽しめました。あまり時間がなかったけど五稜郭にも行けてよかったです。 自分も「フロントエンドの現在とこれから」というタイトルでトークをさせてもらいました。 https://speakerdeck.com/koba04/hurontoentonoxian-zai-di-tokorekara スライド自
https://yapcjapan.org/2024hiroshima/ YAPC::Hiroshima 2024 に参加しました。 まずは運営の皆様、関係者の皆様素晴らしいイベントをありがとうございました。とても快適に楽しめました👏👏👏 去年の京都を見ていて参加したいなぁと思っていたので、今回参加できてよかったです。 あそこまでの大規模イベントを運営するのは本当に大変だと思うので、今年も開催されたこと本当に感謝しています。 また、初広島でしたが素晴らしい町で楽しめました。美味しいもの多い。 自分も「タワレコ店員から20年くらいエンジニアとして働いて学んだこと」というタイトルでトークをさせてもらいました。 スライドは公開していないですが、動画がそのうち公開されると思います。 What you like 今回の YAPC のテーマは「What you like」でした。キーノートのとほ
2023 年の 5 月に Introducing react.dev というブログにて新しい React のサイトが公開されました。 そこから翻訳の準備が整った後に、有志の方達による翻訳が進んできて主要な部分の翻訳が終わってきたので紹介したいと思います。 オリジナルのサイトからリンクされていないけど URL は https://ja.react.dev/ です。 ↑のブログの記事は react.dev のご紹介 です。 私自身はレビューをやっているだけなのでたいした貢献はしてなくて、@smikitky さんをはじめとするコントリビュータの方のおかげです。 New Translation Progress Checklist #452 まだ英語のままのドキュメントもありますがすでにレビュー待ちのものもあるので順次翻訳が公開されていく予定です。 全体的に実際に動かして試せるサンドボックスが特徴
メンテナとして関わっていた SWR v2 がリリースされましたので紹介したいと思います。 各機能の細かい紹介については、リリースブログを確認してください。日本語翻訳も行ったので日本語で読むこともできます。 https://swr.vercel.app/ja/blog/swr-v2 ここでは、ざっくりと補足を書きたいと思います。 Mutation 周り useSWRMutation 一番わかりやすいのは、新しい useSWRMutation という Hook が追加されたことです。swr/mutation から import できます。 import useSWRMutation from 'swr/mutation' async function sendRequest(url, { arg }) { return fetch(url, { method: 'POST', body: JS
TechFeed Conference 2022 という LT 会のイベントで React の提案中の Hooks である useEvent について話しました。 イベント https://techfeed.io/events/techfeed-conference-2022 発表資料 https://speakerdeck.com/koba04/how-useevent-would-change-our-applications 当初は React v18 で Suspense を Data Fetching に対して使うことについての現状について話す予定だったのですが、この useEvent という提案が出てきてこれは React の書き方や考え方を変えるポテンシャルがあるものなので急遽差し替えて紹介しました。 詳しくは資料を見つつ、RFC を見てもらえればと思います。 https:/
2021 年の 4 月から家族で東京を離れて静岡県の富士市で暮らしています。 富士市での暮らしも落ち着いてきたのでまとめということで書いてます。 移住を決めるまで きっかけはコロナです。コロナでフルリモートワークが続いている中で軽く移住でもするかという話をしたところ、思った以上に家族からの反応がよく移住の検討が始まったという感じでした。 住む場所については、個人的にこだわりはないのである程度任せていたのですが、一つだけ条件として「東京に週一くらいで通うことが可能な場所」というのを出しました。 これは、フルリモートになっていくことでオフラインでのコミュニケーションがより大事になるなという感覚があったのでそれが可能な場所にはしたいという気持ちからです(実際にはコロナ後に週一で東京行くことはないとは思いますが)。 そんなこんなで家族のいくつかの希望や、将来家を建てる時にそれが可能なくらいの土地の
The Plan for React 18 のブログで React v18 の計画が発表され、アルファもリリースされました。当初の計画からは色々と変わりましたが、順調に進めば今年中に v18 がリリースされそうです。 このアルファリリースは、React 関連のライブラリ作者に試してもらってフィードバックもらうことを目的にしているため、現時点でプロダクトのコードに導入することは推奨していません。 アルファリリースなのでまだまだ破壊的な API も予想されます。 reactwg/react-18 フィードバックをもらう場所として、reactwg/react-18 という GitHub Discussions のためのリポジトリが作成されています。この Discussions は誰でも見ることはできますが書き込めるのは Collaborators になっている人のみです。そのため比較的議論の内容
React v16.3.0 がリリースされました。 ※4/4 にバグフィックスを含む v16.3.1 がリリースされています このバージョンでは、基本的には v17 で有効化される非同期レンダリングへの対応が中心になっています。変更点は多いですが、ほとんどが機能追加であり破壊的な変更はないため、v16.2 から v16.3 へのアップグレードは比較的簡単じゃないかなと思います。 https://reactjs.org/blog/2018/03/29/react-v-16-3.html 当初の予定からはかなり延びたため、直前に発表された React Suspense の機能も入れるのかと思いましたが入りませんでした。まだ最終的な API は決まってないようなので今後に期待。 React Suspense については、v16.3 と関係ないので今回は省略します。 https://reactjs
React v16について書いたブログの中の、サーバーサイドレンダリングについての部分に間違いがあったので修正しつつ、v16のサーバーサイドレンダリングについて補足します。 http://blog.koba04.com/post/2017/09/27/react-v16-changes/ Hydrationしたい場合は、renderToStringまたはrenderToNodeStreamで行う必要があります。 renderToStringまたはrenderToNodeStreamには、data-reactroot以外にも変数部分を識別するためのコメントノードなどが挿入されていて、それが必要であるためです。 それでは、v15とv16でのサーバーサイドレンダリングの違いを見てみます。 以下、長いのでサーバーサイドレンダリングはSSRと略します。 v15まで ReactでSSRしたコンテンツを
Reactのv16がリリースされたので、変更点などを整理したいと思います。 https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/ React v16やReact Fiberについては、下記で書いたりもしているのでそちらも参考にしてみてください。 React Fiber現状確認 Capability of React Fiber React v16 and beyond React Fiber ReactはなぜFiberで書き直されたのか?Reactの課題と将来像を探
F8でもReact Fiberについての発表もあったので、気になっている人も多いReact Fiberの現状について簡単に書きたいと思います。 Reactの完全な書き換えということで、使い方も変わってしまうと思っている人もいると思いますが、内部実装の書き換えであり、利用者から見える部分ではほとんど変更はありません。 もちろん、react-fiberというパッケージをインストールするというわけでもありません。 むしろ、v16の時点では現在の実装と互換性を保たれているので、v16がリリースされた時に、v15.5を使っていればほとんどそのままv16に更新できると思います。 そして、言われなければ内部実装が変わっていることに気づかないのではないかと思います。 とりあえずどうなるのか知りたい人向けのまとめ v16では、基本的にはv15の時と同じように動作します。逆に言うとパフォーマンスもそんなに変わ
Reactのv15.5がリリースされたので、v15.5での変更点とv16についてのまとめです。 https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html v15.5はバグフィックスとv16での変更点に対する準備なので、可能ならあげておいた方がスムーズにv16がリリースされた時に対応できると思います。 基本的には、v16で色々と廃止するための警告が主になります。 最近のバージョンと同様に、コアから必要なもの以外をどんどん削ぎ落としていく流れです。 この警告に対応するために、Enzymeなどでは利用するために必要なライブラリーが変更されているので更新する際には注意が必要です。 また、当初の予定ではv15.5がv15系の最後のリリースになる予定でしたが、上記のような混乱もあったためフォローアップとしてv15.6もリリー
ReactEurope 2016に行ってきて、改めてメインのTalkの動画を一通り見たので、一言解説を。 https://www.react-europe.org/ Day 1 https://www.youtube.com/playlist?list=PLCC436JpVnK09bZeayg-KeLuHfHgc-tDa Dan Abramov - The Redux Journey 去年のReactEuropeでのTalkで一躍有名になり、Reactの中の人になったDan AbramovによるKeynoteです。 Reduxを発表してから何が起きたのか、何を大事にしているのかについて話しています。 改めてReduxのパターンを説明しつつ、ConstraintsとしてReduxが大事に考えていることについて話しています。 全体を通して、Reduxの考え方や現状がわかりやすく説明されています
Render 2016 - Lee Byron from White October on Vimeo. https://vimeo.com/166790294 http://2016.render-conf.com/talks.php#immutable-user-interfaces Dan AbramovもReact EuropeのQ&AでおすすめしていたTalkで、改めて見て面白い内容だったので紹介します。 FacebookがReactやGraphQL、Immutable.jsを使ってどのようなアーキテクチャでアプリケーションを作成しているのかということを解説したTalkです。 特にFluxのような新しい概念が提唱されているわけではありませんが、最近のフロントエンドの流れやFacebookが目指しているものがわかりやすく解説されています。 Architectureの話が中心で各ライ
以前Qiitaで少し書きましたが、最近聴いている英語のPodcastの一覧のメモ。 日本語だとRebuild.fmとかmozaic.fmとかを聴いてますがまぁ言うまでもないので。 英語力の問題で内容と話す人によっては全く意味がわからないこともありますが、こんな感じのPodcastをsubscribeしていて、気になったエピソードだけを通勤時に聞いています。 週に1〜2エピソードくらいしか聴いてないですが...。 なんとなく、よく聴いている順番に並べてみました。 Software Engineering Daily http://softwareengineeringdaily.com/ 本当にデイリーで1hくらいのエピソードが配信されていてすごいです。 基本的には1on1のインタビュー形式で、オーナーの人がゆっくり話してくれるのでわかりやすいです。 内容はサーバーサイドからフロントエンド、
これはReactに関する記事や気になるissueなどのリンクを紹介する記事です。 今週はF8があったのでReact Native関連の記事が多くありました。 React v15 http://facebook.github.io/react/blog/2016/04/07/react-v15.html https://facebook.github.io/react/blog/2016/04/08/react-v15.0.1.html React v15がリリースされました。バグがあったのですぐに15.0.1がリリースされています。インストールする際には15.0.1を使用してください。 細かいfeatureについてはブログ書いたのでそちらをみてください http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ React Na
v15.0.0がリリースされました(2016/04/08) RC2が出たので追記 RC2 ではIE、Edgeでマークアップの構造によって一部のテキストが表示されないバグ(#6246)とSVGに関する変更がrevertされました。 React.js v15.0がリリースされたので変更内容などを整理したいと思います。 https://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html http://facebook.github.io/react/blog/2016/03/16/react-v15-rc2.html http://facebook.github.io/react/blog/2016/04/07/react-v15.html 今回の一番大きな変更はバージョン番号かなと思います。 0.14から15.0に。 0.x系
前回開催したのが9月だったみたいなので半年くらい経ちましたがReact.js meetup #3を開催しました。 http://reactjs-meetup.connpass.com/event/26229/ 今回はサイボウズさんに会場を提供して頂き開催することができました。 サイボウズの皆様、参加者の皆様、発表者の皆様ありがとうございました!! connpassの管理画面によると75/80人の方が参加してくださいました。感謝! 開催の経緯 @koba04 hey! I'll be in Tokyo in February. Are there any ReactJS or general JavaScript meetups happening during that time? — Christoph Pojer (@cpojer) January 25, 2016 というmentio
React v0.14のRC版が出たので紹介したいと思います。 http://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html インストールはnpmからバージョン指定でインストールするかscriptを読み込むことで試すことが出来ます。 react-domが何なのかは後ほど説明します。 npm install react@0.14.0-rc1 npm install react-dom@0.14.0-rc1 or <script src="https://fb.me/react-0.14.0-rc1.js"></script> <!-- https://fb.me/react-with-addons-0.14.0-rc1.js --> <script src="https://fb.me/react-dom-0.14.
http://reactjs-meetup.connpass.com/event/19504/ http://eventdots.jp/eventreport/568979 4月に#1をやってから約4ヶ月くらい経ちましたがReact.js meetup #2を開催しました。 雨の中来てくださった方、発表者の方、運営のお手伝いをしてくださった方ありがとうございました! 開催の経緯 最初は今回発表してくださったViktorさんが来日されるのでそれにあわせてイベントをやるという話があり、せっかくなのでということでReact.js meetupの2回目としてやることになりました。 dots 開催予定日まで時間もなくてその時点で話す人も決まっていたので後は会場を決めればなんとかなりそうということで、いくつかの選択肢の中から今回はdotsさんで開催することになりました。 渋谷の駅から近くて、人数も20
YAPC::Asia Tokyo 2015で「今フロントエンドで何が起こっているのか」という話をしました。 http://yapcasia.org/2015/talk/show/94051590-fb11-11e4-a39d-8ab37d574c3a 満員になるほどたくさんの方に来て頂いてありがとうございました! よくフロントエンドの話について聞かれると「Grunt or gulp」、「browserify or webpack」、「Angular or React」のような内容が多いので、新しいライブラリや仕様がそれぞれがどういった流れで登場し何を解決しようとしているのかを流れをもって紹介するような構成にしました。 jQuery以降というかなり広い範囲を対象にしたので、それを50minに収めるのために削ったトピックもかなりありますが...。 それでもASTなど普段ライブラリを使っているだ
http://reactjs-meetup.connpass.com/event/11232/ 一人Advent Calendar書いた時にやりたいと言っていたのでReact.js meetup #1 を@yosuke_furukawaさんと開催しました。 DeNAさんが会場から懇親会のお酒や寿司、当日の運営まで全てやってくださったので自分はほとんど何もしてないですが..。 本当にありがとうございました!! やりたいって言ってこの規模の勉強会を開催させてもらえるの本当にスゴいなぁと思います...。 #reactjs_meetup #react_sushi です pic.twitter.com/GdpyF7Paqk — Toru Kobayashi (@koba04) April 24, 2015 ある程度予想はしていたのですが、Talkが10分と短かったりで押して慌ただしい感じになってしま
React.jsなどを試そうとするときに、browserify? gulp? grunt? webpack? どれ使えばいいのとか、テストは何を使えばいいのかとかよくわからないというのをたまに聞くので、最低限の設定だけどES6で書けたりautobuildやlivereloadが出来る構成のサンプルを作ってみました。 あと、テストはkarma + mocha + power-assertでchromeでテスト出来るようにしています。 本当はpackage.jsonだけにしたかったのですがkarmaの設定だけは別ファイルになってます...。 テストが必要ない場合は、package.jsonの指定だけで大丈夫です。 https://github.com/koba04/minimum-spa-boilerplate git cloneしてnpm installしてnpm startすればいいだけの
YAPC::Hiroshima 2024 に参加してきた2024/02/10O'Reilly Online Learning がいい2023/11/15ja.react.dev の紹介2023/10/0440 歳になった年のふりかえり2022/12/26SWR v2 をリリースしました2022/12/13TechFeed Conference 2022 で React の useEvent について話した2022/05/13React の状態管理の現状について書いた2022/01/13クローズドアウトプット2022/01/13東京から富士市に移住してエンジニアとしてフルリモートで働いている2021/11/04React v18 での Effects に関する変更内容(予定)2021/06/15React v16.3 changes2018/04/04React v16でのサーバーサイドレン
React.js v0.13のRC2がリリースされたのでまとめてみます。 http://facebook.github.io/react/blog/2015/02/24/react-v0.13-rc1.html http://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html http://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html 今回のバージョンで何か大きく変更があるというよりもv0.14でやりたいことに向けての布石が多いように感じます。 試すときはこの辺りから。 http://fb.me/react-0.13.0-rc2.js http://fb.me/react-0.13.0-rc2.min.js http:
React.js Confの前日にv0.13.0 Beta1がnpmにpublishされました。 http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html featureは色々あるみたいですが、↑のブログにはその1つとしてClassによるReact Componentの作成が紹介されていたのでそれについて書きたいと思います。 ちなみにReact.createClassを使う場合はこれまでと同じままで大丈夫なはずです。 ES6 Classes React.createClassではなくて、ES6のclassを使って↓みたいな感じで書けるようになります。 import {React} from 'react'; export class Hello extends React.Component { co
In English article is here. 今までは、react-toolsを使ってjsxのharmony optionを有効にして書くことで一部のES6のfeatureが使えて満足していたのですが、azuさんの記事を見て6to5を試したくなったのでReact.js + 6to5の組み合わせで書いてみました。 https://6to5.org/ http://efcl.info/2015/01/09/write-es6/ 結論から言うと6to5自体がjsxのサポートもしているので何も意識することなく書けていい感じでした。 コードはこんな感じ。 https://github.com/koba04/react-boilerplate structure browserify + 6to5ify 変換の流れはbrowserifyのtransformである6to5ifyを使うので、
11月からTOLOTで働いています。 http://tolot.com/ TOLOTは500円でフォトブックやカレンダーが作れるサービスで、1ユーザーとして好きなサービスだし中の人に話を聞いたりしてこれから面白くなっていきそうだなと思ったので決めた感じです。 振り返ってみると高校の時にUS/UK RockのMix-CDを作ってあげたりするのが好きで、モノを作って自分を含む誰かにプレゼントすることが簡単に出来るサービスに対する思い入れが強いというのも背景にあったりします。 今のところしばらくはサーバーサイドを中心にやる感じかなと思っていますが、そのうちフロントエンドとかAPI設計とかハイパフォーマンスブラウザネットワーキングに書いてあるようなこととかを駆使してWebで面白いことやりたいなと思っています。 まだ1週間ですが、技術的にも面白い人たちと一緒働けて楽しいです。 色んな言語の色んなシス
https://github.com/vuejs/vueify vueifyというVue.js用のbrowserifyのtransformが出てたので紹介。 以前にpartialifyやstylify、coffeeify、insert-cssなどを組み合わせてHTML、JavaScript、CSSをComponent化する方法を紹介しましたがそれをさらに進めて1つのファイルで完結することが出来るようになっています。 http://blog.koba04.com/post/2014/04/17/reusable-components-by-vuejs-and-browserify/ 使い方 vueifyを使うと1つのファイルにHTMLとJavaScriptとCSSを全部まとめて書くようになり、1ファイルが1Componentという形になります。 src/app.vue <script lan
次のページ
このページを最初にブックマークしてみませんか?
『blog.koba04.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く