Toshihisa Tomatsu

2024年の年末から実家の金沢に帰省してのんびりしてたので、ちょっと遅れての振り返りをします。年末に行った21世紀美術館で去年の振り返りtoshi-toma.hatenablog.comTL;DR子供が1歳5ヶ月になった引き続き医療系のスタートアップで働いている生活は仕事 or 育児の状態子供が赤ちゃんから子供になってきた子供がもう1歳5ヶ月になり、赤ちゃんというよりは子供という状態になってきました。2024年の頭くらいから離乳食を開始して、今は大人に近いものを食べてるので、外食や帰省でもかなり楽になりました。まだ保育園には入れていない状態なので、ずっと家にいて走り回っています。最近になって発語が増えてきて、これから話せるのが楽しみなタイミング。今が一番可愛いんじゃないか？というくらいに毎日可愛い仕事引き続き医療系のスタートアップで働いています。2024年はチームのリードという役割で、機能開発やチームを安定させてスケールさせることなどに取り組んでいました。新しくできたチームなので意思決定する機会がかなり多くいい経験ができたなと思います。前半はずっとコード書いてて、後半はドキュメント書いたりすることも多かった気がする。技術的にはバックエンドがRailsでフロントがReactで割合としては半々くらいなので、だいぶRailsにも慣れてきた感じがします。プロダクト開発という部分では、コンフォートゾーンに入ってることも多くなってきたので、来年は新しい挑戦をしていきたい。複業TechTrainでたまにメンターをするくらいで、ほとんど稼働してませんでした。まだガッツリやらなくていいが、そろそろ何かやるのを考えてもいいかもしれない。プライベート日中は仕事、そこから子供や自分たちのご飯、お風呂、寝かしつけをして、21時から寝るまでの時間でのんびり過ごす。というサイクルを回してました。土日は子供と公園に行って過ごすことが多かったです。家にいても何をしたらいいか分からないので、とにかく公園に行ってた。2024年は生活も落ち着いてきたので、子供を連れてディズニーシーに行ってみたり、車で愛媛から金沢まで帰省したりとなんだかんだ旅行もできて充実してました。コンテンツ正直不動産不動産のこと知れて勉強になる & 話も面白いペントハウスハマりすぎて全シリーズ一気にみた。かなりおすすめ。デジモンアドベンチャー tri.子供の時にデジモン好きだったのでHuluで見たNetflix トークサバイバーNetflix サマータイムレンダアニメの中だと特におすすめだったNetflix クイーンズ・ギャンビットNetflix あいの里ポケポケ結構ハマってとりあえずパック引き続けてるNo No Girls10月くらいから始まったオーディション番組。絶賛ハマってる。今年買ったもの車子供が生まれたのでミニバンに乗り換えた。車内が広かったりスライドドアなど子供がいるので使い勝手がめちゃ良いトイサブおもちゃのサブスク。1年くらいやった。最初はどういうものに興味があるのか・遊べるのかが試してみないと分からないので、サブスク形式でいろんなおもちゃが届くのはとても良かった。1歳になってからはだんだんと興味が分かってきたので解約しておもちゃを購入するようになった充電式のホットアイマスク眼精疲労や偏頭痛でこれまでは使い捨てのホットアイマスク使ってたけど、充電式のものを買ったら想像してたよりも良かった。何より気軽に使えるのでちょっとした休憩時間にもできて良い。iPhone 16元々は13を使ってたので乗り換えた。Proと迷ったけど、あんまりProに惹かれなかったので無印iPhoneにした。曲面ディスプレイDell S3423DWC 34インチ 曲面ディスプレイを買った画面が広くて作業がしやすくて今の所ちょうど良いし不満もないさいごに2024年は仕事もプライベートもやるべきことを淡々とやってた年でした。2025年についてはプライベート面では運動/筋トレ/英語の習慣化を再開させたい。エンジニア面では、そろそろ仕事以外の時間を有効活用して何かしらやっていきたいなという気持ちがあるので、2025年は挑戦を増やしていきたい。

2024年振り返り

Web 開発のための高速なツールチェーンである Biome が使われることが増えてきました。今のところ、linter と formatter の機能を備えています。普段、JavaScript および TypeScript プロジェクトのコードフォーマッターには Prettier を使っていますが、速度面の魅力がある biome を使って見ました。ESLint で使いたいルールや plugin があるので、lint 機能は使わないで ESLint に任せる前提です。この記事では、biome をコードフォーマッターとしてだけ使うケースにフォーカスして書きます。 セットアップドキュメ...

コードフォーマッターとしてBiomeを使う

今年も1年を振り返っていきます。お宮参りで行った神社から見える風景去年の振り返りtoshi-toma.hatenablog.comTL;DR子供が産まれて育休を取得した5月に転職して医療系のスタートアップで働いてる子供が産まれた今年1番大きかったのは7月に子供が生まれたことです。7月から10月に3ヶ月間の育休を取得して、育児に奮闘していました。想定していたより大変だったので、育休を取得して本当に良かったです。あとは日々子供が成長していくので、それをしっかり見ておけるというのが大きいです。すでに新生児期のサイズ感とかも思い出せないので、毎日が貴重だなと思います。落ち着いてきたかなと思ったら夜泣きが始まったりと、常に新しい課題が出てきてバタバタですが、これまでの人生とはまた違った幸福感があります。どんどん可愛さを更新していってビビります。仕事去年はフロントにReact Nativeがメインでしたが、年明けから4月ごろまでは久しぶりにがっつりWebの開発を担当していました。やはりWebの開発体験が好きです。そして4月から1ヶ月ほど有休消化をして、5月に株式会社Linc'well に転職しました。子供が産まれるタイミングで転職をしたので悩みや不安が多かったですが、今振り返ると、大きな問題もなく今の仕事を楽しめてるので良かったなと思います。note.com相変わらず愛媛からフルリモートで働いてますが、今の職場は定期的にオフラインで集まる機会があり何度か東京に出張で行ったりしました。やはりみんなでオフラインで集まることの意義を感じます。初めて医療ドメインで働いていますが、取り扱う課題が自分ごと化しやすかったり、必要な知識も興味を持って学べてるので、楽しく働けています。複業去年から継続してたフロントエンドの開発案件を4月ごろまで続けてました。転職や子供が産まれることもあり、副業は一旦ストップしました。来年は厳しいかもしれないけど、もう少し落ち着いたら再開したいなと思います。開発、学習本業で使うこともあり、Ruby、Rails、AWS周りについてキャッチアップしました。これまでずっと静的型付け言語だったこともあり、若干苦戦してますが、ChatGPTやCopilotがあるので、今は新しい技術を学ぶのがやりやすいなーと思います。あとは抱っこの時間が長いので、カンファレンスの動画見たりして過ごしました。今年読んだ技術書フロントエンド開発のためのセキュリティ入門フロントエンド開発のためのテスト入門Good Code, Bad Code ～持続可能な開発のためのソフトウェアエンジニア的思考toshi-toma.hatenablog.comプライベートプライベート面は出産・育児と初めてのことで一杯一杯な日々でした。１日がよりあっという間になり、今年はこれまで以上に短く感じました。音楽系だと去年に続き、BE:FIRSTをずっと見たり聴いたりしてます。あとはK-POPにハマり気味で、IVEやNewJeansをよく聞いていました。あとは子供が産まれる前や、なんだかんだ抱っこしてる時間にNetflixなどでコンテンツを消化してました。コンテンツポケモンSV久しぶりにちゃんとゲームやった。子供の時にやってたポケモンと違いすぎドラマ コウノトリ子供が産まれる前に見てた。めちゃ感動するしいい話ハンターハンターアニメだけどついに見た！キングダムアニメだけどついに見た！The Voice JapanAmazon Primeでみた歌のオーディション。ハマった。ラブトランジットAmazon Primeでみた。バチェラーより面白かった。Netflix サンクチュアリNetflix 御手洗家、炎上するNetflix ウヨンウ弁護士は天才肌今年見たもので一番面白かった。個人的なNetflixランキング2位。Netflix スタートアップ韓国のスタートアップの話。恋愛要素が強いけどテック系の話が身近で面白かった読書育休はじめてガイド認知行動療法今年買ったものSwitchbot、Alexaアレクサで家電を操作したくて購入した手が塞がってることが多いので、声で操作できるのめちゃ便利コープ愛媛の生協コープ愛媛は子供が産まれるタイミングから小学校卒業まで配達手数料が無料になってます。注文した食材とか冷凍食品を届けてくれて助かってます。妻が妊娠期間は買い物に行くのも大変なのでたくさん活用したし、子供が産まれたら自炊するのも大変なので助かってます。ソファーカウチソファー買ったデロンギ コーヒーメーカずっと毎朝ハンドドリップでコーヒー淹れてたけど、時間がどうしてかかるのでAmazonのセールで購入味も満足してるし、ボタンひとつで勝手に淹れてくれるのでこればっかり飲んでます。あとはスチームミルクでホットドリンク作れるのも良い。電気ポットミルク作るのに購入スープとか作る時にも便利羽毛毛布昔買った掛け布団を使ってたので羽毛布団を買いました。めちゃ暖かいKeychron Q11 分割キーボード分割キーボードデビューKeychron Q11を購入して分割キーボードデビューした - toshi-toma blog車子供が産まれて大きい車を契約しました。来年納車予定さいごに今年は子供が産まれたり、転職したりと大きな変化がある一年でした。エンジニアとしては、これまでの貯金を使ってるだけの感覚があるので、来年はインプットとアウトプットを圧倒的に増やす年にしたいです。

2023年の振り返り

フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識作者:平野 昌士翔泳社Amazon書籍「フロントエンド開発のためのセキュリティ入門」を読みました。どういう本かこの本は、Webアプリケーションにおける脆弱性やその対策について、フロントエンドに焦点を当てて解説しています。Webやセキュリティに関する知識のない人でも理解できるよう、HTTPやオリジン、ブラウザの同一オリジンポリシー、Cookie、DOMといった基本的な用語や概念についても説明されています。また、ハンズオン形式なので、まずは手元で攻撃を成功させてから対策を入れた結果を確認できるので理解を深めれます。初学者がわかりやすいように噛み砕いて身近な例で説明していたり、画像や図もあり、とても分かりやすかったです。あと、文章が読みやすくてスラスラ読めました。ハンズオンはNode.js、Expressベースなので普段はサーバーサイドの開発に触れていなくてもJavaScriptが分かれば、フロントエンドエンジニアがとっつきやすい内容だと思います。8章では、npnパッケージをはじめとしたライブラリに潜むリスクと対策なども解説しておりまさにフロントエンドエンジニアが知っておく内容が幅広く扱われていています。最近の動向を踏まえた内容2023年に発売されたということで、自分が追えていない最近の動向を踏まえた変化なども書いてあって学びになりました。特に、CSPやTrusted Typesあたりは、ちゃんと調べたり、実際に試してこなかったので勉強になりました。他にも、CookieのSame Site属性やhttp://だとブラウザで警告が出る、Mixed Contentのブロックとか、ここ数年で変化のあったトピックも書いてあり、最新の情報としてキャッチアップできました。CORP, COEP, COOPあたりは難しかったので、自分で試してみないとなーと思いました。XSSの章だと、Reactなど、いま使われているライブラリで行われている対策などの解説もあります。おすすめフロントエンドエンジニアとして働いているけど、業務経験が浅く、セキュリティをまだあまり意識してなかった人に特におすすめです。本書で、Webやセキュリティの基礎的なところも学べるので、気になったトピックを深堀りして、自分が担当してるプロダクトだとどうか？を考えると良さそう。自分は初学者向けにTechTrainでフロントエンドのメンターをしていますが、HTTPリクエストやデベロッパーツールのNetworkパネルを知らない人も多かったので、そのあたりから、まさに学べて良さそうです。ある程度、知識や経験があるエンジニアも、最近の動向や変化も踏まえてキャッチアップできるのでおすすめです。

「フロントエンド開発のためのセキュリティ入門」を読んだ

分割キーボード Keychron Q11を購入しましたKeychron Q11届いた〜分割キーボードデビューですはじめてだけど、思ったより快適に作業できてる pic.twitter.com/MD7esSkPB0— Toshihisa Tomatsu (@toshi__toma) 2023年4月18日  ここ数年はずっとHHKBを使っていたけど肩こりに悩んでいたり、周りの影響で分割キーボードがずっと気になっていました。そのタイミングでKeychronから分割キーボードが発売されたので、購入しました。購入したものKeychron Q11 QMK Custom Mechanical KeyboardType: Fully Assembled KnobColor: Carbon Black-BSwitched: Gateron G Pro Red買おうかな〜と思ってたタイミングでずっと売り切れだったので、数日サイト見てたら在庫があったので購入しました。購入した後、メールが来てDHLのremote areaなので追加で30$ほど払う必要があったので、トータルで35000円くらいになりました。英語でのメールのやり取りは、ChatGPTを使えばめちゃ楽だった。使ってみての感想届いてから、4日ほど使ってるけど、思ってたより快適です。もうコーディングしてて問題ないレベル。今回、分割キーボードが初めてなので、不安があったけど、思ったよりは自然にタイピングできてます。自分があんまりこだわり強くないからかもだけど。ただ、「B」だけ、これまで右手で入力してたみたいで、左手での入力になかなか慣れずに苦戦してます。それ意外は、ちょいちょいミスするくらいで大丈夫そう。なんとなく肩こりにもいい気がするが、本当に効果あるかはもうちょい長期的に見る必要がありそう。打鍵感もだいぶ良い。右手の近くにトラックパッドをおいて、すぐにマウス操作できるようになったのも良かったです。ネガティブな面も少なくて、全体的に購入してよかった。せっかくなので、カスタマイズとかも色々試してみたい。その他Keymapの変更はこのアプリを使ってやってる。usevia.app標準でついてるケーブルが短いので、0.5mのものを購入したUGREEN L字 USB Cケーブル【PD 100W/5A急速充電 1M】ナイロン編み usb-c タイプc ケーブルMacBook Pro/Air、Matebook、iPad Pro 2020、Chromebook、Pixel 4 XL、 Galaxy S20 S10 Note 10、など対応（映像が出力対応できません）UGREENAmazon

Keychron Q11を購入して分割キーボードデビューした

今年も1年を振り返っていこうと思います。金沢に帰った時の紅葉去年の振り返りtoshi-toma.hatenablog.com仕事去年に引き続き、株式会社stand.fmでプロダクト開発に取り組んだ1年でした。転職してから1年が経ったタイミングでブログも書きました。note.com今年は役割がテックリードになったので、機能開発以外に設計やレビュー、実装面でのサポート、仕様の検討などに時間を使うことが多かったです。ずっと自宅からのリモートワークでしたが、11月に初めて東京のオフィスに行く機会があり、オフラインやっぱいいなって思いました。自分はやっぱり対面でもコミュニケーションが取りたいタイプなので、来年はオフラインでのコミュニケーションも大事にしていきたいなと思っています。仕事面でのアウトプットstand.fmにエンジニアとして入社して1年が経った｜toshi-toma｜noteSentryのPerformance Monitoringを活用する複業今年から業務委託でプロダクト開発に関わる形で複業を再開しました。機能開発だけではなく、リファクタリングなど幅広く取り組めて有意義でした。開発、学習最近はプライベートの時間で勉強する。というよりも本業で必要になった技術をプライベートの時間でも調べてキャッチアップする。というケースが主でした。今年は、GraphQL、GCP、DDD周りについて調べたり本を読んでることが多かったです。プライベート今年も引き続き愛媛でのんびり暮らしてるのですが、夏頃に結婚したのでプライベートとしては大きな変化の年でした。ただ、家で仕事して、空いた時間は複業かNetflixを見てのんびりしてるので、生活は良い意味であまり変わりないです。あとは、BE:FIRSTというダンス＆ボーカルグループにハマってます。おすすめ🥰今年買ったものメガネ普段使ってるメガネは度が強く、体質的にも頭痛の日が多かったので、試しに度が弱いサブメガネを買ってみたら、目への負担が減ってよかったです冷蔵庫これまでは一人暮らし用の冷蔵庫を使っていたけど、限界を感じたので、三菱の大きい冷蔵庫を買ってストレスフリーになりましたネックウォーマー、マッサージガンPC & デスクワークなので、首や肩のコリがひどく、ネックウォーマーとマッサージガンを買ってみました。コリを感じる前に定期的に使うのが重要な気がしますたこ焼き器炎たこっていうガス火のたこ焼き器を買いました。家でも最高に美味しいたこ焼きが食べれます布団乾燥機の購入冬は布団が冷たくて辛いので、年末に買ってみた。まだ届いてないので来年使ってみる。さいごに最近は年齢的にもプライベート面で変化が多いタイミングな気がしてます。仕事もプライベートも頑張るぞ💪

2022年の振り返り

今年も1年を振り返っていこうと思います。本州から四国に行く電車からの景色去年の振り返りtoshi-toma.hatenablog.com仕事仕事面でのアウトプット複業TechTrainフロントエンドの業務委託開発、学習プライベート今年買った/契約したものさいごに仕事今年は転職したので、仕事面での変化が大きかったです。2021年の3月にサイボウズ株式会社を退職して、株式会社stand.fmに入社しました。今日から株式会社https://t.co/Y2L3j0A0Inで、エンジニアとして働き始めました💪 愛媛からのリモートワークです！https://t.co/tvxAkFuzgg— Toshihisa Tomatsu (@toshi__toma) 2021年4月1日  stand.fmはもともとユーザーとして使っていたこともあり、モチベーション高くプロダクト開発ができています。プロダクトとしてはアプリがメインなので、これまでWebフロントエンドをメインで開発していた自分としては不安が大きかったですが、すべてJavaScript/Reactベースなのでスムーズに開発できました。技術的にも、Webフロントエンド以外にReact Nativeでのネイテイブアプリ、Node.jsでのバックエンド開発、GCPやk8sなど新しいことをキャッチアップすることが多くて学びが多い一年でした。あと、最近は意思決定する機会が増えてきました。次の壁にぶつかってる感じがして悩むことも多いですが楽しいです。来年はstand.fmがもっと多くの人に使ってもらえるようにとにかく頑張る💪仕事面でのアウトプットstand.fmのAlgoliaを活用した検索機能の実装｜toshi-toma｜notestand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app - Speaker Deckstand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm - Speaker Deck複業TechTrain引き継ぎTechTrainでメンターをやってます。面談以外にもReactを学ぶための教材の開発をしました。prtimes.jpフロントエンドの業務委託今年の3月ごろまでは業務委託でフロントエンドの開発をしました。転職すると精神的・時間的な余裕がなくなりそうだったので、転職のタイミングで複業は一度辞めることにしました。いまは落ち着いてきたので、来年再開できたらいいなと思ってます。開発、学習3月は有給消化期間だったので、次の会社で使いそうな技術を勉強したり、特定の技術を深ぼったりしてのんびり過ごしました。転職してからはプライベートの時間で勉強することが減りました。たまに技術書読んでるくらいかな。プライベート今年は引き続き愛媛でのんびり暮らしてるので、大きな変化はなかったです。ただ、愛媛県内で広い家には引っ越したので、リモートワークしてる身としては最高です。Netflixを契約して、プライベートの時間はドラマやアニメを見ることが多かったです。韓国ドラマが特に面白いです。ずっと家にいて運動不足感があるので、リングフィットしたり、最近はジムに通い始めました。あと前よりも体の調子を整えたい欲が出てきて整体に通うようになりました。なんだかんだ実家の金沢に3回も帰ってました。今年買った/契約したもの食洗機家事の時間を減らしたくて食洗機を買いました。洗い物から解放されて最高です。車愛媛は車が無いと行動範囲が限られるので車をかいましたテレビ大きめのテレビを買いました。大きいとそれだけで映像が楽しいです。テレビ見る時間が増えたので複雑洗濯機ドラム式の乾燥機付き洗濯機を買ったことで、服を干したり取り込むことから開放されました。とにかく最高ですNetflixNetflixを契約しました。HuluやAmazon Primeも見れるけど、Netflixのオリジナルコンテンツばかり見てますiPhone 13 Proカメラが最高ですPostCoffeeコーヒーのサブスクです最近は朝にコーヒー淹れるのにハマってるので、休みの日には普段とは違う豆を使えて良いです髭脱毛髭を剃るのが面倒なので通い始めました。結構痛い。noshおいしい冷食ご飯用意するのが面倒な時に使ってますさいごに今年は仕事面での変化が大きかったです。来年はエンジニアとして成長しつつ、プライベートももっと充実させれるように頑張る。

2021年の振り返り

リッチテキストエディタ及びWYSIWYGエディタのライブラリは世の中にたくさんあります。ourcodeworld.com最近、TinyMCEというWYSIWYGエディタを使った開発をしました。とても高機能で使いやすく、基本的には無料で利用することができます。www.tiny.cloudドキュメントドキュメントは、以下のページを見ることになります。Documentation | Docs | TinyMCEReactプロジェクトへTinyMCEの導入自分が開発したのは、Reactのプロジェクトだったので、@tinymce/tinymce-reactというパッケージを利用しました。github.com導入はとても簡単で、以下の通りに、<Editor>コンポーネントを利用するだけです。import { Editor } from "@tinymce/tinymce-react";const App = () => {  const [doc, setDoc] = useState("");  const onChange = (value) => {    setDoc(value);  };  return (    <Editor      initialValue={doc}      apiKey={process.env.REACT_APP_TYNY_MCE_API_KEY}      init={{        height: 800,        menubar: false,        branding: false,      }}      onEditorChange={onChange}    />  );};API Key<Editor>コンポーネントには、apiKeyを渡す必要があります。API Keyは、Tinyのサイトで会員登録すれば取得できます。https://www.tiny.cloud/Approved DomainsTinyのサイトにログイン後、「Approved Domains」を設定する必要があります。デプロイするドメインを登録する必要があります。localhostはデフォルトで許可されているので、デプロイするまでその必要性を知りませんでした。日本語化エディタのパーツを日本語化することが可能です。https://www.tiny.cloud/docs/advanced/creating-a-plugin/#languagelocalization日本語化は、以下のページでjaファイルをダウンロードして、デプロイする際にtinymce/langs/ja.jsとして配置しました。www.tiny.cloudあとは<Editor>のlanguageを指定すればOKです。<Editor  initialValue={doc}  apiKey={process.env.REACT_APP_TYNY_MCE_API_KEY}  init={{    height: 800,    menubar: false,    branding: false,    language: "ja",  }}  onEditorChange={onChange}/>プラグインTinyMCEの魅力の一つに豊富なプラグインがあります。Open source pluginsであれば、無料で利用できます。www.tiny.cloud導入もとても簡単で、pluginsプロパティに組み込みたいプラグイン名を配列で指定するだけです。const App = () => {  const [doc, setDoc] = useState("");  const onChange = (value) => {    setDoc(value);  };  return (    <Editor      initialValue={doc}      apiKey={process.env.REACT_APP_TYNY_MCE_API_KEY}      init={{        height: 800,        menubar: false,        branding: false,        language: "ja",        plugins: ["fullscreen", "link", "table", "lists"],      }}      onEditorChange={onChange}    />  );};ツールバー表示するツールバーの機能もtoolbarプロパティで指定することができます。こちらは文字列で指定します。|はツールバー上での区切りUIの指定です。const App = () => {  const [doc, setDoc] = useState("");  const onChange = (value) => {    setDoc(value);  };  return (    <Editor      initialValue={doc}      apiKey={process.env.REACT_APP_TYNY_MCE_API_KEY}      init={{        height: 800,        menubar: false,        branding: false,        language: "ja",        toolbar:          "undo redo | formatselect | fontsizeselect | bold italic",      }}      onEditorChange={onChange}    />  );};画像の指定エディタ内での画像指定にはImage Pluginを利用します。www.tiny.cloud画像選択時に、アプリケーション内の画像選択ダイアログを利用したい場合があります。その場合はfile_picker_callbackを利用すると実現できます。このcallbackはTinyMCE上で画像選択UIのクリック時に発火します。第一引数のcallbackに任意のURLを渡すと、それがエディタ上に挿入されます。なので、無理やりですが、callback関数をstateに保持しておき、ダイアログを表示、ダイアログで画像選択時にstateで保持したcallback関数に選択したURLを渡して実行する。といったアプローチで実現することができました。const App = () => {  const [doc, setDoc] = useState("");  const onChange = (value) => {    setDoc(value);  };  return (    <Editor      initialValue={doc}      apiKey={process.env.REACT_APP_TYNY_MCE_API_KEY}      init={{        height: 800,        menubar: false,        branding: false,        language: "ja",        toolbar: "undo redo | formatselect | fontsizeselect | bold italic",        file_picker_callback: function(callback, value, meta) {          if (meta.filetype === "image") {            // 任意の処理          }        },      }}      onEditorChange={onChange}    />  );};Full Page Plugin基本的には、ブログ記事のエディタのような使われ方が多いですが、Webページ(HTML)を編集するエディタとしても利用できます。そういった場合に、Full Page Pluginを利用します。www.tiny.cloudこのプラグインを利用しないと、HTML文字列をエディタに渡しても、head要素などが消されてしまい、bodyの中しか編集できないようになっています。このプラグインを利用することで、head要素などがそのまま組み込まれた状態で編集することができます。ただし、いくつか注意点があります。body_id, body_classTinyMCE上では、html要素やbody要素はTinyMCEが生成するものに書き換えられてしまいます。なのでbody要素に特定の属性を指定していたHTML文字列を渡しても、エディタ上では、その属性が消えてしまいます。body要素のclassやidは以下の設定で、追加することが可能です。なので、事前にHTML文字列をパースして、idとclassを抜き出してエディタに設定として渡すといった対応が必要な場合があります。https://www.tiny.cloud/docs/configure/content-appearance/#body_idhttps://www.tiny.cloud/docs/configure/content-appearance/#body_classJavaScript無効化TinyMCE上では、scriptタグがすべて無効化されます。主にセキュリティの目的なので、設定で無効化できる挙動でもありません。github.comdocument_base_urlJavaScriptの読み込みや実行はできませんが、CSSファイルは読み込めます。その際、リンクに相対パスを指定している場合、document_base_urlを指定することで、任意の場所で配布されているファイルにリクエストが可能です。https://www.tiny.cloud/docs/configure/url-handling/#document_base_urlコンテンツの書き換えTinyMCEが自動でHTMLの中身を書き換えてしまう場合があります。基本的に中身を変えてほしくない場合はverify_htmlとconvert_urlsをOFFにするのがおすすめです。

WYSIWYGエディタ TinyMCEを使った開発

最近、React QueryやSWRといった、キャッシュ機構をもったHooksを使う開発が多くなっています。自分も、ReactのプロジェクトでReact Queryを採用しました。その過程で迷ったことなどのメモです。react-query.tanstack.comReact Query vs SWRReact QueryとSWRは似たライブラリです。自分もどちらを採用しようか迷ったタイミングで、調べてみました。参考zenn.devscrapbox.ioただ、調べてみても、できることは両者大きな違いが無さそうでした。最終的には、React QueryにはDevToolsがあり、SWRには無い。という点でReact Queryを選択しました。DevToolsでは、どんなキーでどんなデータがキャッシュされているのか確認することができます。github.comReact QueryについてReact Queryの何が良いのかについて触れておきます。Reactでの開発によくある実装として、以下のようなものがありますデータを保持するstateを定義するuseEffectでAPIデータ呼び出しを行うAPI呼び出し中はローディングを表示するAPI呼び出しが終わったら、ローディングを終了して、結果をstateに更新する更新されたstateをもとにコンポーネントを表示するコードで表すと、以下のようになります。const App = () => {  const [data, setData] = useState(null);  useEffect(() => {    fetchData().then((res) => setData(res));  }, []);  if (!data) {    return <Loading />;  }  return <MyComponent data={data} />;};もし、Reduxを使っていた場合は、Storeに取得したデータを格納します。ここで、APIのレスポンスを格納するためのStateやStoreを用意するのではなく、APIのレスポンスをキャッシュすればコンポーネントがStateを定義しなくて良いよね。というアプローチをReact Queryが提供してくれます。React Queryを使った場合は以下のようになります。const App = () => {  const { data } = useQuery("fetch-data-key", fetchData);  if (!data) {    return <Loading />;  }  return <MyComponent data={data} />;};useQueryというHooksにキャッシュのキーとデータフェッチ用の関数を渡します。そうすると、fetchDataの結果をキャッシュします。すると、Appコンポーネントが再レンダリングされる際はキャッシュされたデータをHooksが返します。もしキャッシュが無いと、Appコンポーネントの再レンダリングごとにAPI呼び出しが発生しそうに見えますが、キャッシュのおかげでそのような問題もありません。APIからデータを取得して、それを表示するのがメインのアプリケーションであれば、Reduxなどは使わずにReact Queryだけで十分に感じました。自分の場合は、管理画面を開発したので、このユースケースにとてもマッチしており、シンプルなコードで開発を進めることができました。React Queryの導入ここからは React Queryの導入について説明します。まずはパッケージをインストールします。$ npm i react-query次は、QueryClientProviderを設定します。また、DevToolsを利用する場合はReactQueryDevtoolsを配置します。QueryClientProviderに渡しているQueryClientオブジェクトには、細かい設定を行えます。例えば、どれくらいの期間はキャッシュから返すのか？など。import { QueryClient, QueryClientProvider } from "react-query";import { ReactQueryDevtools } from "react-query/devtools";const queryClient = new QueryClient({  defaultOptions: {    queries: {      staleTime: 1 * 60 * 1000, // 1分間はキャッシュから返す      refetchOnWindowFocus: false, // ウィンドウにフォーカスしたタイミングでデータを再取得しないように    },  },});const App = () => {  return (    <QueryClientProvider client={queryClient}>      <ReactQueryDevtools initialIsOpen={false} />      <MyComponent />    </QueryClientProvider>  );};あとは、各コンポーネントでuseQueryといったHooksを利用するだけです。useQuery最後に、主に利用しているuseQueryについて説明します。他にもいくつかHooksが用意されていますが、自分は使わなかったので触れません。useQueryの第1引数には、キャッシュのキーを指定します。このキーが同じ場合は、キャッシュからデータが返されるので、予期せず違うAPI呼び出しなのに同じキーを指定しないようにしましょう。第2引数には、Promiseを返す関数を指定します。自分はaxiosと組み合わせて利用しました。Query Cancellation | React Query | TanStackconst App = () => {  const { data } = useQuery("fetch-data-key", fetchData);  if (!data) {    return <Loading />;  }  return <MyComponent data={data} />;};第1引数には配列を指定することも可能なので、ページネーションがあるような場合に便利です。const { data } = useQuery(["fetch-data-key", pageIndex], () =>    fetchData(pageIndex));任意のタイミングでデータを再取得したい場合のために、refetch関数も用意されています。const App = () => {  const { data, refetch } = useQuery("fetch-data-key", fetchData);  if (!data) {    return <Loading />;  }  return <MyComponent data={data} refetchData={refetch} />;};staleTimeデフォルトでは、staleTimeが0になっているので、キャッシュを使わずに毎回APIからデータを取得します。必要に応じて、どれくらいの時間キャッシュから返すのかを指定することになります。Initial Query Data | React Query | TanStack

React Queryを使った開発

Material-UI数ヶ月ほど、Material-UIを使った開発をしたので、知見などのメモです。Material-UIは、MaterialデザインベースのReactのUIコンポーネントライブラリです。material-ui.comとても有名で、便利なコンポーネントがたくさん用意されています。パッケージ基本的には、@material-ui/coreをインストールすれば良いです。追加で、アイコンを利用する場合は@material-ui/iconsをインストールします。また、coreに入ってないコンポーネントが、@material-ui/labというパッケージで提供されているので、もし利用したくなったらインストールします。自分の場合は、AlertやAutocompleteが使いたかったのでインストールしました。情報あまりネットに情報が無い印象なので、基本的に公式ドキュメントを見るだけです。あとは、似たようなUIのTemplatesを見るくらいです。material-ui.comコンポーネントComponents各コンポーネントについては、ドキュメントの「Components」項目を見ると、見た目やパターン、サンプルコードを確認できます。React Button component - Material-UIただし、コンポーネントごとにページが用意されているわけではなく、「Button」や「Card」といったある程度のまとまりでページが用意されています。例えば、「Card」コンポーネントの場合、ページの下部に「API」という項目があり、「Card」以外にも「CardActionArea」や「CardActions」といった関連するコンポーネントのAPIページへの導線が記されています。React Card component - Material-UIComponent API「Component API」という項目もあり、こちらは全コンポーネントのPropsなどの情報が書いてあります。逆に見た目やパターンなどは書いてないので、「Components」ページを見る必要があります。Button API - Material-UIよく使うコンポーネントButton基本的にボタンはこれIconButtonアイコンだけのボタンの場合はこれCardカードGridレイアウトはだいたいGridでいい感じにできるPaperある程度の区切りをPaperで作るDialogダイアログSnackbar、Alertエラーや成功時のフィードバックに使うTableテーブルTypography文字は基本的にこれCheckbox、Radio、Select、TextField、FormControlフォームApp BarよくあるヘッダーProgressローディングアイコン以下のページで、それっぽいキーワードで検索するMaterial Icons - Material-UIその他普段の開発では、まず「Components」ページで、見た目やサンプルコードを確認して、Props情報などが知りたくなったら「Component API」ページを見ていました。また、全体的にどんなコンポーネントがあるのかみたい場合は、以下のFigmaを見るといいかもしれません。Material-UI for Figma | Material-UI StoreDateTimePicker(日時)DateTimePickerが欲しくなった際は、以下の「Material-UI Pickers」が用意されています。material-ui-pickers.devこのライブラリは、ユーザーがdate-fnsやdayjsといった日時操作系のライブラリと組み合わせて使えるようになっています。自分の場合は、dayjsと組み合わせて使いました。以下のように、dayjs以外に、@date-io/dayjsパッケージをインストールします。$ npm i -s @date-io/dayjs@1.x dayjsあとは、Providerを設定します。import { MuiPickersUtilsProvider } from "@material-ui/pickers";import DayjsUtils from "@date-io/dayjs";import Root from "./Root";function App() {  return (    <MuiPickersUtilsProvider utils={DayjsUtils}>      <Root />    </MuiPickersUtilsProvider>  );}あとは、<DatePicker>や<DateTimePicker>といった用意されているコンポーネントを利用するだけです。dayjs用の設定をしておいたので、valueにDayjsオブジェクトが使えたり、onChangeのdataがDayjsオブジェクトとして返ってきます。type Props = {  value: Dayjs;  handleChange: (date: Dayjs) => void;};export const MyDateTimePicker: React.FC<Props> = ({ value, handleChange }) => (  <KeyboardDateTimePicker    variant="inline"    ampm={false}    value={value}    onChange={(date) => {      if (date) {        handleChange(date);      }    }}    format="YYYY/MM/DD HH:mm"  />);スタイルMaterial-UIには、core/stylesからmakeStylesというAPIが提供されており、CSS-in-JSスタイルでスタイリングをしていきます。@material-ui/styles - Material-UIimport React from 'react';import { makeStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';const useStyles = makeStyles({  root: {    color: 'white',    height: 48,    padding: '0 30px',  },});export default function MyButton() {  const classes = useStyles();  return <Button className={classes.root}>Hook</Button>;}また、CssBaselineというnormalize.cssに似た役割を持ったコンポーネントが用意されているので、アプリケーションのトップレベルで読み込むようにしました。SSR(Next.js)Next.jsで開発している際、「Prop className did not match」というエラーが出ます。SSRとクライアントサイドでclassNameが変わってしまうので、_app.tsxに以下の記事で紹介されているような対応をしました。github.comqiita.comThemeMaterial-UIで用意されているコンポーネントは色がprimaryやdefault、secondaryといった形で指定します。ここで適用される色はデフォルトのThemeです。Default Theme - Material-UIアプリケーションのデザインに合うように、Themeをカスタマイズしました。ThemeProviderを設定します。material-ui.comThemeの例import { createMuiTheme } from "@material-ui/core/styles";import blue from "@material-ui/core/colors/blue";import red from "@material-ui/core/colors/red";const theme = createMuiTheme({  palette: {    primary: {      main: blue["600"],    },    secondary: {      main: red["600"],    },  },  typography: {    h1: {      fontWeight: 600,    },    h2: {      fontWeight: 600,    },    button: {      fontWeight: 600,    },  },});export default theme;日本語だと、h要素でも細字になってしまったので、h要素のfontWeightを高く設定することも可能です。

Material-UIを使った開発

以下のような、コンポーネント内でコンポーネントを生成するようなコードについての話。function App() {  const Child = () => {    return <div>child</div>  }  return (    <div className="App">      <Child />    </div>  );}Reactは再レンダリングの際に、要素が同じtypeかを===でチェックして、違うtypeなら、対象のコンポーネントツリーを削除して、新しく生成するらしい。例えば、<a>から<img>は違うtype。<Article>から<Comment>も違うtype。コンポーネントの場合、参照が違うなら、違うtype。reactjs.org特に気にしてなかったけど、「コンポーネント内でコンポーネントを生成する際」に問題になることがある。以下のコードは、毎回、Childコンポーネントを新しく生成するので、typeの比較で違う参照となる。毎回コンポーネントツリーを削除して、生成していることになる。function App() {  const Child = () => {    return <div>child</div>  }  return (    <div className="App">      <Child />    </div>  );}なので、基本的には以下のように、コンポーネントの参照が1度だけ生成されるようにするのが良い。const Child = () => {    return <div>child</div>  }function App() {  return (    <div className="App">      <Child />    </div>  );}そして、Stateを持つ場合に特に問題になる。以下のコードでは、Appコンポーネントの中で、InnerChildコンポーネントを生成している。const App = () => {  const [count, setCount] = React.useState(0);  const InnerChild = () => {    const [innerCount, setInnerCount] = useState(0);    return <button onClick={() => setInnerCount((s) => s + 1)}>InnerChild: {innerCount}</button>;  };  return (    <div>      <button onClick={() => setCount((s) => s + 1)}>{count}</button>      <Child />      <InnerChild />    </div>  );};const Child = () => {  const [count, setCount] = useState(0);  return <button onClick={() => setCount((s) => s + 1)}>Child: {count}</button>;};Appコンポーネントが持つsetCountが呼ばれるたびに、Appコンポーネントは再レンダリングされ、その子コンポーネントであるInnerChildコンポーネントやChildコンポーネントも再レンダリングされる。この時に、InnerChildコンポーネントは、参照が変わり、typeが違うことになる。この結果、Stateがリセットされてしまう。コンポーネントの外で定義した、Childコンポーネントは、参照が変わらないので、同じtypeと判断され、再レンダリング時もstateが保持される。カウントがリセットされることはない。これは、Custom Hooksでコンポーネントを返すパターンを実装してると、知らず知らずのうちに、問題になることがありそう。ただ、InnerChildコンポーネントの生成にReact.useMemoを使うと、Stateが保持されたので、それで大丈夫なのかもしれない。以下のredditで、ReactコアチームのDan Abramovが問題についてコメントしてる。www.reddit.com以下の記事でも「Component Types and Reconciliation」という項目で説明している。blog.isquaredsoftware.com

コンポーネント内でコンポーネントを生成する際の問題

Build your own React「Build your own React」という自分で小さなReactを作る記事があります。以前から読んでみたかったので、重い腰を上げて全部読んだり、手を動かしてみました。pomb.us内容としては、Step by Stepでコードと実装の説明があり、最終的には以下のようなコードが動くようになります。jsxは、自作のDidact.createElementに変換し、Didact.render関数を実行しています。/** @jsx Didact.createElement */function Counter() {  const [state, setState] = Didact.useState(1);  return (    <h1 onClick={() => setState((c) => c + 1)} style="user-select: none">      Count: {state}    </h1>  );}const element = <Counter />;const container = document.getElementById("root");Didact.render(element, container);Step0からStep8まであります。各Stepのメモ各Stepの簡単なメモです。Step Zero: ReviewJSXからcreateElementへの変換についてtypeとpropsプロパティを持つオブジェクトを返す(他にプロパティあるけど)type: tagName、document.createElementに渡すタグ名。props: childrenや属性を持つオブジェクトReactを使わず、DOM APIを使った場合のコードに置き換える例を紹介ここはまだ事前知識の説明Step I: The createElement FunctioncreateElement関数を作成するpropsやtypeを持つオブジェクトを作成するだけtype, props, childrenを受け取って、オブジェクトを返すStep II: The render Functionrender関数を作成するStep1で作成されたオブジェクトをもとに、DOMをレンダリングするあくまでDOMのレンダリングだけやるので、差分更新などはなしStep III: Concurrent ModeStep2で実装したコードは、ツリーに対して再帰的にrender関数を同期的に呼び出していたので、ツリーが大きいとメインスレッドを長時間ブロックしてしまう作業を小さな単位に分割して、1つの作業が終わり、他に優先してやるべきことがあれば、レンダリングを中断するように実装するこのStepではこの準備として、requestIdleCallbackを利用したループを作成するブラウザがIdle状態の時に、小さな単位の作業を行うReactはrequestIdleCallbackを使わずに、scheduler packageを実装しているhttps://github.com/facebook/react/tree/master/packages/schedulerStep IV: Fibers作業の単位を整理するために、Fiberツリーというデータ構造が必要各要素ごとに1つのFiberを持ち、各Fiberが作業の単位となるFiberツリーは、次の作業を簡単に見つけやすいようになっているStep3で用意したrequestIdleCallbackのループにそって、要素のレンダリングといった作業を行うperformUnitOfWork関数を実装する以下の処理を行う要素をDOMに追加する要素の子のFiberを作成する次の作業を選択するStep V: Render and Commit PhasesStep4までの実装だと、ツリー全体のレンダリングが完了する前に、ブラウザが作業を中断する可能性があるこうなると、レンダリング途中の中途半端なUIをユーザーが見ることになるFiberツリーのルートをwipRootとして記録しておき、すべてのperformUnitOfWorkを終えたタイミングで、Fiberツリー全体をDOMにコミットするように、フェーズを分離するStep VI: ReconciliationこのStepで要素の追加だけではなく、更新や削除も行えるようにするrender 関数で受け取った要素を、DOM にコミットした最後のFiberツリーと比較するコミット後、DOMにコミットしたFiberツリーへの参照を保持しておく各Fiberにalternateとして、前回のコミットフェーズでDOMにコミットしたFiberへのリンクも保持しておく比較して要素のtypeが同じなら、DOMノードはそのままで、新しいpropsで更新するtypeが違くて、新しい要素がある場合は、DOMノードを追加するtypeが違くて、古いFIberがある場合は、古いノードを削除するFiberに、どのように変更するかを表すeffectTagを追加して、コミット時にeffectTagに応じたDOM操作をするStep VII: Function Components関数コンポーネントをサポートする関数コンポーネントのFiberはDOMノードを持たない点やchildrenは関数を実行しないと取得できない点がこれまでと違うFiberのtypeが関数の場合は、まず関数を実行してchildrenを受け取る(関数コンポーネントでreturnしてるオブジェクト)その後、DOMへのコミット時にDOMノードを持たないケースに対応する親のDOMノードを見つける際は、DOMノードを持つFiberが見つかるまでツリーをさかのぼる必要があるまた、要素の削除時にDOMを持つchildrenまでさかのぼる必要があるStep VIII: HooksuseStateを実装する同じコンポーネントで複数回、useStateを呼び出せるようにHooksを保持する配列や処理中のHooksのIndexといった変数を用意するstateやsetStateを実装するstateは、既にhookを持っているなら、そのhookのstateを返し、持ってないなら初期値を返すsetStateは、actionを受け取り、queueとして保持しておき、root要素から更新を行う更新時にqueueに保持しているactionを実行して、stateが更新されるその他全体として、Reactのコードと同じ変数名や関数名を使っているらしい感想Step0からStep3までは結構理解できましたが、Step4のFiberやStep6のReconciliationは難しくて、よくわかってない部分が多いです。全体を2回くらい見たり、コードをデバッグして、なんとか理解を深めることができました。これまで、仮想DOMやReactについて、なんとなくだった部分が少しだけ、解像度が上がった気がします。

「Build your own React」のメモ

二重リクエストフロントエンドからのAPIリクエストにおいて、二重リクエストが問題になることがあります。例えば、作成ボタンを素早くクリックした際に、何も考慮してないと、データが二重に登録される可能性があります。バックエンドでそういったことの対策が行われていない場合、フロントエンドで対策しておくことになります。フロントエンドでの対策として、送信中はボタンをdisabledにするなどもありますが、今回はAPIクライアントで二重にリクエストを送信するのを防ぐ方法について書きます。axiosで二重リクエストを防ぐフロントエンドのAPIクライアントとして、axiosを使っているケースが多いです。github.com以下の記事を参考にして、二重リクエストを防ぐAPIクライアントを実装しました。medium.comaxiosがCancellationに対応しているからこそ対応できています。実装内容対応方法は以下の通りです送信中のリクエスト内容を保存しておく送信中リストを用意するリクエスト送信時に、リクエストの内容を送信中リストに保存する保存する際のキーは、リクエストURLやメソッド、パラメータ、bodyを文字列化したものレスポンスが返ってきたら、送信中リストから消すリクエストを保存する前に、送信中リストをチェックして、同じ内容が存在していたら、キャンセルするaxiosインスタンスを作成まず、axiosインスタンスを作成します。アプリケーションのAPIリクエストは全て、以下のaxiosインスタンスを使って行うようにします。import axios from "axios";const axiosInstance = axios.create({  baseURL: "https://xxxxx/api",  headers: {    //  },});リクエストを保存して、二重リクエストならキャンセルaxiosInstance.interceptors.request.useというAPIでリクエスト送信前に任意の処理を実行できます。// リクエスト用axiosInstance.interceptors.request.use(  (request) => {    request.cancelToken = new CancelToken((cancel) =>      handleRequestForPending(request, cancel)    );    return request;  },  (error) => {    Promise.reject(error);  });送信中リストを作成し、リクエストに関する情報を文字列化し、送信中リストに追加します。もし、送信中リストに、同じリクエストが存在する場合は、二重リクエストが発生しているので、キャンセルします。リクエスト情報は、URL、HTTPメソッド、パラメータ、bodyデータを利用しています。import { AxiosRequestConfig, Canceler } from "axios";// 送信中リストlet pending: Record<string, null> = {};export const handleRequestForPending = (  request: AxiosRequestConfig,  cancel: Canceler) => {  const url = request.url;  // 重複チェックに使うflagUrlを生成 (url, method, params, data)  const flagUrl = `${url}&${request.method}&${JSON.stringify(    request.params  )}&${JSON.stringify(request.data)}`;  // 送信中リストにあるリクエストと同じリクエストならキャンセル  if (flagUrl in pending) {    cancel(JSON.stringify(request));  } else {    // 送信中リストに追加    pending[flagUrl] = null;  }};レスポンスが返ってきたら、送信中リストから消すレスポンスが返ってきたら、送信中リストから該当のリクエストを削除します。また、もしリクエストがキャンセルされた場合にログを出力するようにしています。// レスポンス用axiosInstance.interceptors.response.use(  (response) => {    // 送信中リストから該当のrequestを消す    handleResponseForPending(response.config);    return response;  },  (error) => {    if (axios.isCancel(error)) {      // キャンセルされた旨をログに出力      const canceledRequest = JSON.parse(error.message);      console.error(        `Canceled - ${canceledRequest.method.toUpperCase()}: ${          canceledRequest.url        } (params: ${JSON.stringify(canceledRequest.data)})`      );      return Promise.reject(error);    }    return Promise.reject(error);  });リクエストのハンドリング時は、request.dataがオブジェクトだったので、JSON.stringifyしていました。しかし、レスポンスのハンドリング時のrequest.dataは文字列なので注意。export const handleResponseForPending = (request: AxiosRequestConfig) => {  const url = request.url;  // 重複チェックに使うflagUrlを生成 (url, method, params, data)  const flagUrl = `${url}&${request.method}&${JSON.stringify(request.params)}&${    request.data  }`;  // 送信中リストから、該当のリクエストを消す  if (flagUrl in pending) {    delete pending[flagUrl];  }};後処理意図しないことが起こり、送信中リストにリクエストが残り続けてしまうのを防ぐために、SPAのページ遷移時にリストをリセットするようにしました。export const resetPending = () => {  pending = {};};Next.jsだと、以下のように実装するimport Router from "next/router";Router.events.on("routeChangeStart", () => {  // ページ遷移時にリクエストのペンディングリストをリセットする  resetPending();});

axiosで二重リクエストを防ぐ

これまでTypeScriptでの開発ばかりで、Flow(日本だとflowtypeって呼ばれてることが多い)は未経験でした。ついに触ることになりそうなので調べてみました。flow.orgFlow(flowtype)型アノテーションを付与している様子は、TypeScriptとさほど変わらないけど、あくまでFlowはJavaScriptに型アノテーションを付与しているだけという印象が強い。FlowはJSの静的型チェッカーTSのように型アノテーションを付与するただし、JavaScriptファイルに型アノテーションを付与して、ビルド時にその情報を取り除くだけ型推論も、もちろんある必要なnpmのパッケージ的には、flow-binhttps://www.npmjs.com/package/flow-binお試しはFlow Tryでできるhttps://flow.org/try/型チェックの実行flow コマンドでFlowのバックグラウンドプロセスが起動して、型チェックを実行tsc的なJavaScriptファイルに// @flowというコメントがあることで、Flowの型チェック対象と伝えることができる後述する　// @flow strictというコメントにすると、Flow Strictを有効にできるコンパイル型アノテーションを付与した状態だと、JavaScriptとしては動かないので、ビルド時に型アノテーションを取り除く必要がある。Compilersとしては以下の選択肢があるBabel(@babel/preset-flow)flow-remove-types設定ファイル.flowconfigが設定ファイルflow initで作成されるドキュメントでは、Lintというキーワードとして、色々と設定できる項目が紹介されているhttps://flow.org/en/docs/linting/rule-reference/型アノテーションざっと以下のドキュメントに目を通して、TypeScriptでよく使うようなものはだいたい揃ってることがわかった。あとは使ってみて、細かい違いとかは覚えたら良さそう。flow.org細かいメモMaybe型Nullableの場合は型の前に?をつける以下はstring or null or undefinedx : ?stringTS同様にパラメータ名の後に?でOptionalvalue?: stringnullチェックやtypeof x === 'string'といったコードを使うことで型を絞れるUnion 型やIntersectionもTSと同じように使えるtypeofで型を作れるのもTSと同じ$ReadOnlyArrayや$ReadOnlyという組み込みの型がある$Exactで余剰プロパティを防ぐ{| name: string |};は省略記法型でもSpread 演算子があるhttps://flow.org/en/docs/types/objects/type Fooのように、type aliasもあるTuple Typesもあるlet tuple2: [number, boolean] = [1, true];TSでいう〇〇は〇〇unknownはmixed型neverはemptyドキュメントないhttps://github.com/facebook/flow/pull/7655/filesreadonlyは+{ +value: boolean }keyofは$Keysts-ignoreは// $FlowFixMeなどいくつか種類があるhttps://flow.org/en/docs/errors/undefinedはvoidtype predicatesは%checksをつける感じで似てるflow-typedTSでいうDefinitelyTypedインストールした型はflow-typedディレクトリに入るもし型が無い場合は以下のコマンドで型を作るflow-typed create-stub {library}Flow Strictflow.orgFlow Strictを有効にしてより安全性の高いコーディングを行う - Qiitaファイル単位でより厳密な型チェックを設定できるconfigに設定する[strict]nonstrict-importunclear-typeunsafe-getters-settersuntyped-importuntyped-type-importファイルに // @flow strict を指定するReact + Flowドキュメントが用意されているflow.org@babel/plugin-transform-react-jsxにも対応している[options]react.runtime=automaticPropsは特に気にするところなく、TSの感じで良さそうSyntheticEventなども使えるhttps://flow.org/en/docs/react/events/ReactからインポートされているReact.Nodeとかの型もOKhttps://flow.org/en/docs/react/types/VSCodeこの拡張を使うmarketplace.visualstudio.comjavascript.validate.enable オプションをfalseにしないと、型注釈についてエラー出るJSファイルなのに型注釈かけないよ。みたいなM1 Macなぜか flowコマンドを実行すると、以下の表示で止まったPlease wait. Server is starting up: -

flowtypeについて調べた

MonorepoについてOSSや企業での開発でMonorepoを採用しているケースをたまに目にします。これまで、Monorepoでの開発に参加したことがないので、調べてみました。Monorepoは、単一のリポジトリで複数のパッケージを管理すること。BabelやJest, ReactなどなどいろんなOSSが採用している。(mono＝単一という意味)実現方法としては、LernaとYarn Workspacesを使う方法が多い。できることは両者ほぼ同じで、個別でだいたいやりたいことはできるけど、両方使うパターンも多いっぽい。いいところ複数のパッケージをまたいだ機能追加やバグ修正でも、1つのPRで完結する相互に依存しているパッケージ同士の連携が容易別れていると、publishしたり、npm linkすることになるので依存しているパッケージの管理が楽全体をまとめて、一緒にテストできるあたりがいいところ。LernaとYarn Workspaces基本的にできることは同じ。以下の記事がよくまとまってる。blog.cybozu.ioその他、LernaについてバージョンのFixedとindependentLernaにはFixed(すべてのパッケージが同じバージョン)とIndependent(パッケージごとに異なるバージョン)のモードがあるlernaでのmonorepoにおけるリリースフロー(Fixed/Independent) | Web Scratchlerna-changeloglerna-changelogというlerna公式ツールがある。これは、ラベルを付与したPR単位でリリースノートを作成してくれるツール。lerna-changelogで始める頑張りすぎないリリースノート自動生成 | WEB EGGLerna and Yarn WorkspacesLernaとYarnを一緒に使うパターンが多い最初の設定package.jsonのworkspaceフィールドを定義トップレベルはprivateフィールドをtruelerna.jsonで"npmClient": "yarn"するlerna initやlerna createでパッケージ作成パッケージのインストール全パッケージの依存パッケージをインストールトップレベルでyarn install叩けば良い。基本的にはトップレベルのnode_modulesやyarn.lockで管理する。バージョンが違うようなときはパッケージごとにnode_moculesが作られることもある。パッケージごとに、特定のパッケージをインストールする場合いくつかの方法がある対象のパッケージで普通に yarn add するyarn workspace <workspace_name> add <package>https://classic.yarnpkg.com/en/docs/cli/workspace/lerna add <package> —scope <project>パッケージ全体で利用する、共通パッケージをインストールする場合トップレベルで、yarn add -W <package>rootでyarn addするとエラーがでるのでWオプションをつけるyarn add | Yarnnpm-scriptsトップレベルで、各パッケージで定義されているnpm-scriptsを一括実行できる。yarn workspaces run testlerna run test-streamでログが見れる別パッケージの参照@toshi-toma/uiパッケージで、@toshi-toma/typesを参照するようなケースで、それらをMonorepoで管理してると便利みたいな話。Monorepoで管理してる場合、トップレベルのnode_modulesを見ると、packages/で管理してるパッケージを持っている。実態は、packages/の各パッケージへのシンボリックリンク。なのでrequireやimportは何も気にせずにできる。ただし、依存してるなら、package.jsonのdependenciesには明記する。lerna runを走らせたとき、package.jsonを見て、プロジェクト内に依存があれば、先にそっちを実行してくれるとかがある。TypeScriptpackages/直下にtsconfig.base.json的なのを作って、各プロジェクトのtsconfig.jsonでは、Baseのファイルをextendsすると便利TSのパッケージ間で依存関係が生まれてきたら、Project Referencesを使って効率的にビルドできる各パッケージのtsconfig.jsonのreferencesで依存してるパッケージを明記すれば、依存してるプロジェクトをビルドできる(tsc --build)packages直下のtsconfigに全パッケージのreferencesを記述すれば、tsc -b で全プロジェクトをビルドできる各パッケージのtsconfig.jsonでcompositeをtrueにする必要ありhttps://www.typescriptlang.org/docs/handbook/project-references.html#composite参考: https://efcl.info/2020/11/23/workspaces-to-typescript-project-references/publishlerna publishがあり、-conventional-commits オプションを利用することで commit log からバージョンを決定でき、CHANGELOG.mdも自動作成できる。参考https://blog.cybozu.io/entry/2020/04/21/080000https://efcl.info/2019/01/26/monorepo-release-flow/https://numb86-tech.hatenablog.com/entry/2020/07/21/155343

Monorepoについて調べた 〜Lerna & Yarn Workspaces〜

React Native for Webという言葉はよく耳にしていましたが、具体的にどういうものなのか知らなかったので、触ってみました。React Native for Webnecolas.github.io「React Native for Web」は、React NativeパッケージのコンポーネントやAPIで書かれたコードを、Webでも動かせるように、Web用にコンポーネントやAPIを提供しているライブラリ。パッケージはreact-native-web。React Nativeでコンポーネントを作ると以下のようなコードになる。import React from "react";import { StyleSheet, Text, View } from "react-native";function App() {  return (    <View style={styles.app}>        <Text style={styles.title}>React Native</Text>    </View>  );}const styles = StyleSheet.create({  app: {    marginHorizontal: "auto",    maxWidth: 500  },  title: {    fontWeight: "bold",    fontSize: "1.5rem",    marginVertical: "1em",    textAlign: "center"  },});export default App;ここで利用している、StyleSheet, Text, Viewといったコンポーネントが、react-native-webパッケージで、Webのコードでexportされている。react-native-web/packages/react-native-web/src/exports at master · necolas/react-native-web · GitHubなので、webpackのresolve.aliasで、importのreact-nativeをreact-native-webに置き換えれば、全く同じコードでそのままwebでも動く。// webpack.config.jsmodule.exports = {  resolve: {    alias: {      'react-native$': 'react-native-web'    }  }}コンポーネントreact-nativeと同じ名前やpropsを持つコンポーネントがexportされていて、内部ではReact DOMでReact Nativeっぽい見た目や動きのものを実装してるAPIコンポーネント以外にも、react-nativeで公開されているAPIも提供している。例えば、Share APIはreact-native-webでは、window.navigator.shareで実装されている。いいところReact Nativeで作ったコードが、読み込むパッケージが違うだけで、ネイティブアプリでもWebでも動くので、共通化できるのが良いポイント。iOS, Android, Webでアプリを提供したい場合に、とても良さそう。その他StyleSheetはCSS-in-JSと同じでコンポーネントごとにhash付きのclass名が付与されて、headのstyleタグに吐き出される感じっぽいPlatform.OSはwebが入るので、コンポーネントの出し分けも可能セットアップセットアップは簡単で、必要なパッケージをインストールして、webpackのaliasの設定をするだけ。必要なパッケージreact-domreact-native-webbabel-plugin-react-native-web無くても動くビルドの最適化のためにおすすめってドキュメントには書いてあるパッケージをインストールしたら、webpackのaliasでreact-nativeをreact-native-webに置き換えるだけcreate-react-appcreate-react-appでreact-native-webパッケージを入れたらとりあえず動いた。React Native for Webをデフォルトでサポートしてるっぽい。create-react-appのwebpackの設定を確認したところ、デフォルトでwebpackのaliasが入ってるから動くようになっている。github.com公式ドキュメントではExpoを推奨してる。サポートされているコンポーネント以下のページを見たら良いReact Native compatibility // React Native for Webその他参考https://watercelldev.hatenablog.jp/entry/2018/07/18/122604

React Native for Webを触ってみた

React Nativeに入門してから、追加で色々と触ったり勉強しました。toshi-toma.hatenablog.com前回やったのは、公式ドキュメント見たり、入門っぽい記事見て簡単なアプリを作るところまで。今回は、追加で本を読んだり、アプリを作ることで基礎くらいまで学んだと思います。ひとまず、React Nativeのコンポーネントを使ってUIを実装したり、APIを呼び出したり、画面遷移を実装するといったことはできそう。やったこと「基礎から学ぶReact Native入門」を読む画面遷移やネットワーク通信があるようなアプリを開発QiitaやZennで良さそうな記事を読むhttps://b.hatena.ne.jp/toshi-toma/reactnative/Kindle Unlimitedで読める React Nativeの本を軽く見る公式ドキュメントの全体を流し読み「基礎から学ぶReact Native入門」を読むReact Nativeの基礎を学ぶために、ある程度体系的に学べるような本を探してたところ、ちょうど最近発売したようなので、読んでみました。基礎から学ぶReact Native入門 (CodeZine Digital First)作者:WINGSプロジェクト 中川 幸哉発売日: 2021/02/25メディア: オンデマンド (ペーパーバック)基本的なコンポーネントや環境構築、API呼び出し、データの保存、画面遷移など、知りたいことがちょうど良い分量で書いてありました。日本語で基礎を学びたい人にはおすすめしたい本。画面遷移やネットワーク通信があるようなアプリを開発公式ドキュメントや本で基本的なことは学べたので、理解を深めるために小さなアプリを作ってみました。Dog APIを使って、API呼び出しやリストUI,画面遷移など一通り実装しました。https://dog.ceo/dog-api/作ったアプリのリポジトリgithub.comQiitaやZennで良さそうな記事を読む頻出するけど自分が知らない単語や概念があるのか気になったので、React Native Advent Calendar 2020の記事を中心に、記事を軽く見てみました。Advent Calendarはその技術の最近の情報を知れるので、良いですね。qiita.comここまでで大体の単語は分かったけど、「Native Modules」や「Native Components」は未知数。必要そうになったら勉強する。Kindle Unlimitedで読める React Nativeの本を軽く見るKindle UnlimitedでReact Nativeの本を5冊ほどざっと流してみました。基礎として学ぶべき項目はどんなものがあるのか、複数の本を読むことで分かりました。基本的には、「基礎から学ぶReact Native入門」で十分学べてそう。公式ドキュメントの全体を流し読み最後に、ドキュメントをざっと流し読みしました。内容はそこまで読んでないですが、どこにどんな項目があるのかなどは把握しておきたいので、見ました。https://reactnative.dev/docs/getting-started

React Native入門から基礎を学ぶまで

React Native入門した4月から新しい会社でReact Native使う予定なので、今日の3-4時間ほどで入門してみました。まず「React Native」で検索して、パット見て全体の軽い紹介してそうな記事を1つか2つ読んだあとは、公式ドキュメントを読みました。その後、React Native CLI で開発環境を構築して、簡単なアプリを作ってみました。https://reactnative.dev/今日、入門するにあたって見たもの公式ドキュメントIntroductionCore Components and Native ComponentsSetting up the development environmentあとはドキュメントの目次さらっと見たり、大事そうなページをさらっと見たチュートリアルhttps://reactnative.dev/docs/tutorialReact Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解するhttps://eh-career.com/engineerhub/entry/2020/02/06/103000React NativeについてこれまではReactでネイティブアプリ作れるクロスプラットフォームのライブラリくらいの認識だったけど、もう少しだけ解像度が上がって、ネイティブ部分とReact(JS)の間でUIライブラリやミドルウェアを提供してるイメージを持てた。どっかにランタイムでReact NativeはネイティブのViewを作成するって書いてあったけど、ビルドした結果どういう出力になるのかを見ないとちゃんとイメージできないので、どっかで調べたい。あとは、ネイティブモジュール？という仕組みで自分でネイティブコード書いて拡張したり、自作のUIコンポーネント作ったりできる。普段の開発では、React Nativeには標準で提供してるネイティブコンポーネントがあるので、それを読み込むイメージ。他には、コミュニティのいろんなコンポーネントがある。reactnative.directoryHooksは React Native 0.59 で導入されたっぽい。ブラウザのAPIも提供してるけど、どこまでできるんだろう。開発環境React Native には、次の２つの開発ツールが用意されてるので最初に選ぶReact Native CLIExpo CLI自分はプレーンなものを知りたかったので、React Native CLIからはじめた。npx react-native init MyTestAppプロジェクト名はハイフンとかだめで英数字だけiOS開発今日はAndroidまで試すのが面倒だったので、iOSだけやりました。iOSライブラリ管理ツール「CocoaPods」がいるiOS周りの依存インストールiosにcdしてpod installプロジェクト作成プロジェクト作成については以下のドキュメント読んだら分かりました。まずこれちゃんと読んだほうが良さそうhttps://reactnative.dev/docs/environment-setup最初に自分のMacにXCode入れ忘れてハマりましたあとはXCodeのインストール終わらなくてハマったhttps://blog.kubou.net/archives/233/その次はビルドしたら、BUILD FAILEDってなったので、v0.62にしたら直った完全に以下の内容と同じhttps://stackoverflow.com/questions/66062663/react-native-npx-react-native-run-ios-doesnt-work-after-initializing-the-proj結構ネイティブ開発の知識必要そうだなーという印象。アプリの起動npx react-native startMetroというバンドラーを起動npx react-native run-iosビルドしてシミュレーターでアプリ起動どっちも起動しないとシミュレーターで開発はできないコンポーネント以下の記事でリストで色々紹介されてたのでさらっとみた。https://reactnative.dev/docs/intro-react-native-componentshttps://eh-career.com/engineerhub/entry/2020/02/06/103000とにかくViewとTextはめちゃ使う。文字はTextに入れないとだめらしい。Webとはそこらへん全然違うな。スタイルStyleSheetを使うCSS-in-JSスタイルが基本。基本的にCSSだけど、使えないものもあるっぽい。使えるプロパティはドキュメントを見るText · React Nativeよく分かってないところまだ触りだけなので、ある程度のアプリを作るためのお作法とか、使うAPIとか設計とかは全く分かってない。あとはネイティブ部分は全く知見ないので、これから勉強しようと思いました。あとはCSSはStyleSheet モジュール使ったけど、普通にライブラリ使ったりするのかとかも気になる。とりあえず次はREST API叩いたり、ページ遷移するようなアプリ作ってみようと思います。感想WebでReact触っていたので、その延長線上で分かることが多かったです。アプリケーションを作るために新しく必要になる考え方はあまりなく、React Nativeの少しの違いや使うコンポーネントやAPIだけある程度覚えればやっていけそう。公式チュートリアルがとても薄かったので、このチュートリアルやれば基本的なところ抑えれるよ。みたいなのが無かった。このあたりは他のライブラリだとだいたい用意されているので、気になった。ここらへんはReact分かってたら、あとはドキュメント見たらいいよ。くらいの温度感なんだろうか。

React Nativeに入門した日

Improving Progressive Web App offline support detection以下の記事のまとめやメモです。developer.chrome.com記事の内容WebアプリをPWAとしてインストール可能かの条件として、Chromeではこれまで「fetch イベントを含むサービスワーカーがあること」となっていました。それが、今後は「オフラインモード時のfetchイベントでHTTP ステータスコード 200を返すこと」となるみたい。まず3月にリリース予定のChrome 89から、警告が表示されるLighthouseにもガイドが表示されるその後、8月にリリース予定のChrome 93から、適用される予定※ 既にインストールされているPWAには影響しない実装よりな話これまでの判定についてこれまで、PWA化はmanifest.jsonとほぼ空のService Workerをインストールすればいいので簡単だよ。と言われていましたが、今後はちゃんとオフラインサポートを実装する必要があります。コード的に見ると、これまでは以下のService WorkerスクリプトでOKだった。self.addEventListener("fetch", (event) => {});今後の判定について今後は、installイベントなどでCache APIを活用してリソースをキャッシュ。fetchイベントでオフライン時はキャッシュからリソースを返す。といった対応が必要になります。どこまでやるかはプロダクトによります。ある程度リソースをキャッシュしてオフラインでも動作するようにするとか。とりあえず静的なHTMLだけ返すとか。最低限インストール要件を満たすためには、例えば以下のような処理は実装しないといけなそう。const CACHE_NAME = "cache";const OFFLINE_URL = "/";self.addEventListener("install", (event) => {  event.waitUntil((async () => {    const cache = await caches.open(CACHE_NAME);    return cache.add(OFFLINE_URL);  })());});self.addEventListener("fetch", (event) => {  event.respondWith(    (async () => {      try {        const networkResponse = await fetch(event.request);        return networkResponse;      } catch (e) {        const cache = await caches.open(CACHE_NAME);        const cachedResponse = await cache.match("/");        return cachedResponse;      }    })()  );});

PWAのオフラインサポート検出の改善

2020年2020年を振り返っていこうと思います。振り返りを毎年継続して書いていくことで、その記事を見れば自分の1年間の活動を思い出せたら良いなと思ってます。ほとんど外出してないので、今年っぽい写真がなかった(写真は松山城からの景色)去年の振り返りtoshi-toma.hatenablog.com2020年仕事複業TechTrainフロントエンドの開発個人事業主と確定申告アウトプット、イベント開発、学習OSS英語プライベート今年買ったものさいごに仕事今年はサイボウズに新卒で入社して、4年目の年でした。仕事として、そこまで大きな変化はなく、去年(2019)からやっていた内容に継続的に取り組んでいました。blog.cybozu.io主にフロントエンドの脱レガシーに取り組んだ1年だったので、そこでの知見をもとに、チームメンバーでWEB+DB Pressで執筆したりもしました。blog.cybozu.io業務としては、それ以外にも探究活動や社外向けのイベント開催などにも取り組みました。探求活動では、Service WorkerやSvelte、ASTベースのリファクタリングなどに取り組みました。フロントエンド以外だと、引き継ぎエンジニア向けの社内イベントの企画と運営などにも取り組んでいます。今年の10月頃に開催された、OSCでは、そういった取り組みについても話しました。エンジニアによるエンジニアのための社内イベントの企画 / Planning internal events by engineers for engineers - Speaker Deck複業TechTrain引き継ぎTechTrainでフロントエンドのメンターをやってます。Reactの相談が多いけど、FirebaseやVue.jsやCSSやTypeScript、Next.js、キャリア周りの相談もあって面白いです。自分の知らない範囲での相談もあるので、面談前に軽く勉強したりするので、いいきっかけになったりします。techbowl.co.jpフロントエンドの開発4月頃から新たに、フロントエンド開発の複業をはじめました。ReactとTypeScriptをベースにしたプロジェクトです。複業では、本業のサイボウズでは経験できない多くのことに取り組めて、とても良かったなと思います。本業だと、どうしても経験できる領域やステージに偏りがあるので、複業を通して新しいプロジェクトのベースを作ったり、一人で技術選定したり、一人でもくもくとコードを書いたり、チームメンバーのレビューをするなどを経験できました。月に40時間をコンスタントに複業に当ててるので、プライベートの時間がほとんど確保できないのは、結構辛かったです。個人事業主と確定申告本格的に複業に取り組む時間の割合が多くなったので、開業しました。ネットで色々と調べたり、チームメンバーに聞いたりしてなんとかできました。経費にできるものなど、なんだか大人になった気分です。toshi-toma.hatenablog.comアウトプット、イベント今年の1月頃は普通に勉強会を開催していました。Ehime.js #4 初心者歓迎 LT会 - connpassそれがコロナの影響で、いっきにリアルで勉強会を開催できなくなり、オンラインにシフトしていきましたね。地方に住むエンジニアとしては、YouTubeで勉強会を見れるので、とてもありがたかったです。去年はアウトプット重視で登壇や記事の執筆などにも注力してましたが、今年はほとんどできなかったです。登壇はコロナの影響で、カンファレンスや勉強会の機会がとても減った & オンラインになったあとはモチベーションが下がってました。もうちょい記事など書いたりしたかったけど、複業で時間があまり確保できなくて、ほとんどアウトプットしない年になりました。その中でも、オンラインで何度かだけ登壇する機会がありました。フロントエンドのエコシステム / Frontend Ecosystem - Speaker DeckService Workerとは、それを使ってできること / what-is-service-worker - Speaker Deck自分は開催するモチベーションがなくなってるので、オンラインでも継続的に勉強会を開催してくれてる人には感謝です。開発、学習引き続きReactベースのフロントエンドの事を勉強してました。今年はYouTubeやFrontend Mastersといった動画コンテンツを使うことが多かったです。最近、周りのエンジニアの影響でLeetCodeも始めました。単純に問題を解くのが楽しいので、趣味としてもいいなと思いました。アルゴリズムやデータ構造周りは来年から本格的に勉強しようと思ってます。OSS今年の前半は時間もモチベーションもあったので、OSSにPRを送ってみたりもしてました。toshi-toma.hatenablog.com複業を始めた頃には、プライベートの時間は複業と英語の勉強でいっぱいいっぱいになり、OSSに取り組むこともしなくなりました。来年は再開したいです。英語今年注力したことの一つに英語学習があります。年始のタイミングでTOEICを受けて、自分のスタートラインを確認して、そこからは毎日コツコツ英語に取り組んでいます。モチベーション維持のためにレアジョブをほぼ毎日やって、基礎を固めるために英文法や英単語、リスニングなど取り組みました。いかに習慣化するかを意識しました。好きなテーマの英語コンテンツに触れるという意味でYouTubeの存在は大きかったです。11月頃からモチベーションが下がり気味で、時間に余裕が生まれるまではペースをおとして緩く取り組もうと思っています。プライベートプライベート的には在宅勤務が基本になり、1年間のほとんどを家で過ごしていました。家での生活が快適になるものを買ったり、自炊をしたりしました。ただ、自粛の影響で、これまで継続的にジムに行っていたのがなくなり、家で少しの筋トレに変えました。ご飯を食べる時間は動画を見ていて、SUITSやウォーキングデッドといった海外ドラマを見たりして過ごしてました。あとは、将来のことも考えて資産運用について調べて、始めたりもしました。来年はiDeCoも始めようかなという感じもあります。来年はより快適な部屋を求めて引っ越し予定です。もう少し愛媛を満喫できそうです。今年買ったものロボット掃除機Ankerのロボット掃除機を買いました。掃除機をかけなくても十分綺麗になるには最高でした。ただ在宅勤務と相性が悪いのが最近の悩みです。Bluetooth防水スピーカーお風呂では音声コンテンツを聞いてるので、防水スピーカーでより快適になりました。スタンディングデスクオフィスでスタンディングデスクを使っていましたが、在宅勤務中もスタンディングデスクを使いたかったので、FLEXISPOTのスタンディングデスクを買いました。満足です。iPad Air初のiPadを買いました。スマホとPCあるから使わないかなーと思い敬遠してましたが、いざ買ってみると、利用シーンが多くてびっくりしました。最近はだいたいのことをiPadでやってる気がします。AirPods Pro体験としてとても良い。あと気軽なノイズキャンセリングなのも良い。Mac miniM1 Macです。在宅が多いので、デスクトップにしました。プロジェクター大画面でドラマや映画を見たいけど、大きいテレビは場所をとる & 高いので、プロジェクターを購入してみました。2万円くらいだったけど、映像は綺麗で最高でした。メガネこれまでは常にコンタクト生活でしたが、メガネを作りました。画面を見る時間が長く、偏頭痛持ちだったのですが、メガネだと目への負担が小さく、頭痛になる率が減りました。特に問題もないのでメガネで生活するようになりました。Notionモノではないですが、今年からNotionを有料で使っています。ノート系だけではなく、タスク管理もTodoistからNotionに移行しました。基本的に大体のことをNotionに書いてます。さいごに今年はコロナの影響で生活スタイルが家を中心に変わりました。だからこそ、これまで以上に快適な部屋作りに注力したし、複業や英語学習などにも時間を使うことができました。エンジニアとしては、引き続きフロントエンドを中心にやっていくと思いますが、来年はもうちょい挑戦する年にしたいです。今年、2020年もありがとうございました。

2020年の振り返り

はじめに最近、フロントエンドでたまに聞く、Svelteというライブラリについての紹介記事です。https://svelte.dev/ReactやVue.jsのような宣言的にUIを記述できるので、簡単にWebアプリケーションやUIを作れる。かつ、バンドルサイズやランタイムが小さく、高いパフォーマンスが期待できるライブラリです。まだコミュニティやエコシステムが成熟しているわけではないので、不都合はありますが、小さなアプリケーション開発のようなケースでは活躍するのではないかと思っています。Svelteで作成したToDoアプリのサンプルプロジェクトを以下のリポジトリで確認できます...

Svelteとは

今年、始めて確定申告と開業を経験したので、備忘録として残しておく。自分は専門的な知識があるわけではないので、間違った情報もあると思うので、その点はあしからず。開業と初めての確定申告去年、副業を始めた。年間の所得が20万円以下だったので、「確定申告しなくていいのか〜」と思ってました。www.freee.co.jpふと気になって調べてみると、副業20万円以下＝確定申告は不要は正解。だけど住民税の申告は必要らしい。住民税のみの申告なら、確定申告をしなくてもいいが個別に申告するくらいなら確定申告をすれば、自動的に住民税にも反映される + 余分に払った源泉徴収が返ってくるかも。ということで確定申告をすることにしました。確定申告特に経費があるわけでも無かったので、確定申告は会計ソフトを使うことでとても簡単でした。まずは「会計freee」を契約した。その後は、会計freeeに去年の収入情報を登録したのち、freee上で「確定申告」の流れにそって進めて、必要事項を入力したら書類が作成された。support.freee.co.jp入力にあたって、本業の源泉徴収やふるさと納税の受付書が無いとだめだった。ふるさと納税で、ワンストップ特例制度の申請をしていたけど、これは確定申告をすると無効になるので、確定申告でふるさと納税に関しても入力しないとだめだった。www.satofull.jp書類が作成されたら、印刷して税務署に書類を提出したら終わり。提出も5分くらいで終わった。マイナンバーカードを持ってると、オンライン上で完結できるらしいので来年はそれでやりたい。開業確定申告とは別で、開業の申請もしました。4月から新しく副業を始めたので、このタイミングで開業したほうがいいのかを調べた結果、することにしました。www.freee.co.jp主にポイントは、青色申告することで控除が受けられるのが大きいらしい。青色申告にすると帳簿など書類作成が大変らしいが、会計freeeを使ってるとだいぶ簡単なので、問題にはならないらしい。開業もとても簡単で、「開業freee」に必要事項を入力すると書類が作成されるので、印刷して税務署に提出するだけだった。開業届けと同時に、青色申告するために必要な青色申告承認申請書も用意できるので一緒に提出した。経費に関しては、事業に関わるものなら経費にしてよくて、会計freeeに支出として登録すれば良い。ただ、領収書などは印刷して保管しておく必要があるので注意が必要そう。電子帳簿保存の事前申請をすれば、電子でもいいっぽい。さいごに始めてのことで、いろいろと分からないことが多かった。だけど、freeeが分かりやすかったり、ネットにたくさん記事があったり、YouTubeで動画をみたりして学んだらなんとかなった。

開業と初めての確定申告 in 2020

What's coming in ESLint v7.0.0https://eslint.org/blog/2020/02/whats-coming-in-eslint-7.0.0ESLintの次のメジャーバージョン「7.0.0」に入る機能が決まったようです。社内用に日本語でのまとめを書いたので、せっかくなのでブログとしても公開します。※ ESLintは日本人のTSC(Technical Steering Committee)の方がいて、いつもQiitaに解説記事を投稿してくれるので、もしその記事が出たらそちらを見るほうが良いです。v7.0.0の開発は以下のGitHub Projectで確認できます。https://github.com/eslint/eslint/projects/6✋Dropping support for Node.js v8.xNodeのv8.xは去年の12月でEOLになったのでESLintもv7のタイミングでNode v8.xのサポートを終了"engines": {-    "node": "^8.10.0 || ^10.13.0 || >=11.10.1"+    "node": "^10.12.0 || >=12.0.0"}Deprecating Node.js/CommonJS-specific rulesコアのルールが見直され、Node.js/CommonJS特有のルールはeslint-plugin-nodeに移行される。ESLint本体で管理されている以下のルールはコアのルールとしてはdeprecatedになり、eslint-plugin-nodeに移行されます。callback-returnglobal-requirehandle-callback-errno-buffer-constructorno-mixed-requiresno-new-requireno-path-concatno-process-envno-process-exitno-restricted-modules将来のメジャーリリースでコアから削除される予定なので、eslint-plugin-nodeに移行しておいてね。という話ESLint class replacing CLIEngine classESLintのAPIを非同期APIに移行。これまでESLintをNode.jsから利用する場合、CLIEngineクラスを利用していました。(このクラスを使ってエディタのプラグインやESLint組み込みのツールなどが作られてる)ただ、CLIEngineクラスは同期APIなので、並列でファイルをチェックやECMAScriptモジュールのロードなど新しい機能のブロッカーになっていました。そこで新しく非同期APIであるESLintクラスへの置き換えを進めていくようです。ESLintクラスは最初CLIEngineの単なるラッパーとして作って、段階的に非同期メソッドを実装していき、最終的に、ESLintクラスとCLIEngineクラスが完全に分離されるっぽい。(このあたりの詳しい実装はよく分からなかったので曖昧です)v7.0.0では、CLIEngineクラスはdeprecatedになる。 将来のメジャーリリースでCLIEngineを削除する予定Descriptions in directive comments/ eslint-disable **/に説明がつけれる/* eslint-disable no-new -- this class has a side-effect in the constructor. */Warnings for using ~/.eslintrcv6.7.0で非推奨になっているホームディレクトリでの.eslintrc(設定ファイルが見つからない時にホームディレクトリの設定が適用されるやつ)がv7.0.0だと警告されるようになる。ホームディレクトリでの.eslintrcはv8.0.0で削除予定。Updating the base path when using --config or --ignore-path --configや--ignore-pathオプションで指定した設定ファイルやignoreファイルのbase pathがworking directoryになる。これまでは、オプションで渡したファイルの場所だったっぽい。Plugins loaded from config file directoryESLintのshared-config(eslint-config-xxx)からpluginを直接読み込めるように。https://eslint.org/docs/developer-guide/shareable-configsv7.0.0以前ではプラグインの読み込みはESLintがインストールされている場所(v5.x)だったり、working directory(v6.x)でした。v7.0.0からはリント対象のファイルに最も近い設定ファイルを基準にプラグインが読み込まれるようになるっぽい。これまでeslint-config-xxxのpackage.jsonでは依存してるpluginはpeerDependenciesに指定して利用側でpluginをインストールしていたが、dependenciesに指定することができるようになる。File extensions in config filesv7.0.0以前では、ディレクトリを指定してリントを実行した場合、*.jsファイルだけが対象になっていた。それが設定ファイルのoverridesセクションのファイル指定にマッチするファイルがリント対象になる。React、Vue.js、TypeScriptなど、.js 以外のファイルを利用している場合に便利です。Updated default ignore patternsESLintのデフォルトのignore patternに以下の要件を追加unignore .eslintrc.jsunignore /bower_components/*ignore node_modules/* in subdirectoriesStricter RuleTesterESLintのルールのテスト用のAPIであるRuleTesterにいくつか追加されている。https://eslint.org/blog/2020/02/whats-coming-in-eslint-7.0.0#stricter-ruletesterFails if a rule uses the nonstandard node.start or node.end properties, which may not be provided by all parsers that ESLint supports.Autofix rules must test the output of their fixes.Tests where the code has a syntax error will now fail.Tests fail if the test specification contains unknown properties.いくつかありますがAutofix rules must test the output of their fixes.Autofix時の結果をテストで書いてないplugin多いから、対応大変かも。Installing preview releases of v7.0.0この内容はnext tagでインストール可能です。$ npm i eslint@next --save-dev

「What's coming in ESLint v7.0.0」を読んだ

TDD Boot Camp in 愛媛に行ってきました先日(2/15)に愛媛にて開催された「TDD Boot Camp in 愛媛」に行ってきました。会場はサイボウズ松山オフィスです！agile459.connpass.com当日の様子togetter.comTDD Boot Camp in 愛媛に行ってきました内容テスト駆動開発まず何のタスクから取り組むか？まずは一歩一歩コードの品質Testingについて事前に見たものフロントエンドのテスト使う可能性のあるテストツールテストの種類(Reactでの例)Testingテストコードの品質Testingの層Integration TestとUnit Test常にTDDでやるのか最後に内容内容としては、TDDの伝道師、和田卓人さん (@t_wada) によるテスト駆動開発についての講演＋ペアプログラミングによるTDD実習でした。午前中の講演では、テスト駆動開発と何か。から始まり、ライブコーディングで実際にTDDを実践する様子を見ることができました。t-wadaさんによるテスト駆動開発のライブコーディング見れるの最高すぎる。。。 #tddbc— Toshihisa Tomatsu (@toshi__toma) 2020年2月15日t_wadaさんがどのような思考プロセスで、どんな順番でTDDを実践するのかを見ることができ、とても勉強になりました。午後は、言語によるペア(自分はJavaScript)を組んでのTDD実習でした。実習の中ではコーディングした後にみんなでコードレビューなども行いました。インプット(午前中の講演)からアウトプット(ペアで実習)の流れがとてもスムーズで理解が深まりました。テスト駆動開発Boot Campに参加することで学んだテスト駆動開発のポイントをざっと書いておきます。まず何のタスクから取り組むか？テストが書きやすいという基準＋重要度で考える。聞いただけだと、あまり実感がわかなかったですが、実習中にこの重要性に気づきました。TDDの中で出てくるRedからGreenまでのプロセスをいかに早く辿り着くかで、その後のタスクの進めやすさに影響するので、まずはテストが書きやすいか。という軸で考えることが大事だと思います。まずは一歩一歩t_wadaさんによるライブコーディングや、考え方などから、コーディングにおいて一歩一歩進む姿が印象的でした。普段は焦って、どこまで確実に動作していて、どこが問題になりそうなのか。未知の状態で突き進むことが多いですが、まずは正しく失敗することを確認したり、簡単だけど正しく成功させることができることを確認することが重要。問題を小さく切り分けることが重要。まずは簡単に失敗させて、テストを実行させるスタート地点にたっているか確認する。ライブラリや設定ミスとか、いろいろあるからね。#tddbc— Toshihisa Tomatsu (@toshi__toma) 2020年2月15日コードの品質テストを書いて、テストが落ちてないからOK。で終わらずに、コードの品質について常に考えることが重要。テストケースを見て、プロダクトコードの振る舞いを過不足なく簡単に理解できるようなテストコードやテストケースの品質。Red-Green-Refactoringのサイクルの中で、Greenにした後にはどこか改善できるポイントはないか考えるなどなど。できることはたくさんありそう。何より、テストを書いたら目的達成。ではなくコードの品質を高めることを常に意識する。テストケースは後から別の人が見たときに仕様書レベルでプロダクトコードを理解できるように意識する & テストコードもプロダクトコードレベルに品質の高い状態にするぞ #tddbc— Toshihisa Tomatsu (@toshi__toma) 2020年2月15日TestingについてTDD Boot Campに参加するということで、事前にTestingについて、フロントエンドにおいてのテストについてインプットをしておきました。ここからは事前にインプットしたTestingについて書いていきます。事前に見たものJest | Getting Startedhttps://jestjs.io/docs/en/getting-startedClean code that works - How can we go there?https://t-wada.hatenablog.jp/entry/clean-code-that-works明日からはじめるテストのあるフロントエンド開発https://speakerdeck.com/mukai21/ming-ri-karahazimerutesutofalsearuhurontoendokai-faAn Overview of JavaScript Testing in 2019https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2019-264e19514d0aフロントエンドのテスト使う可能性のあるテストツールJestCypressreact-testing-libraryreact-hooks-testing-libraryStoryshotsreg-suit(Enzyme)テストの種類(Reactでの例)Linting, TypeCheckESLint, Stylelint, tscUnit Tests関数やクラスなどが対象入力に対して出力が期待するものかex: Jest, react-testing-library etcIntegration Tests機能が対象複数のユニットテストでの手順をテストするモックを可能な限り利用しないex: Jest, react-testing-library etcE2E Testsアプリケーションが対象ブラウザを制御してシナリオがどのように機能するかをテストする内部構造は無視してブラックボックスのようにチェックex: Cypress, SeleniumAccessibility Testingex: pa11yVisual Regression Testingex: backstop, reg-suitTesting調べる中でTestingについて気になったポイントを書いていきます。テストコードの品質テストコードのクオリティを下げると将来メンテナンスできない大量のコードを持つことになるので、テストコードも品質はプロダクトレベルで書くべき。Testingの層テストピラミットやTesting Trophyなど考え方の参考にできる。ただしUnit TestやIntegration Test、E2Eなど人によってどんなテストを書くかは違うので、保守や実行コストなどを考慮して、3つに分解して、各層ではどんなテストを書くかをチームで議論する。Integration TestとUnit TestE2E、IntegrationとUnit Testで、どのテストを書くのか迷ったときに、1つ参考にできそうだったのが、内部品質と外部品質の観点。E2Eは外部品質を担保するし、Unit Testは内部品質を担保してくれる。integrationは中間くらい。それぞれ担保できるものが違うので、何を保証したいか考える。なのでIntegrationやE2Eでカバーすれば機能的にOKでしょ。と思ってもそれを続けるとコードの内部品質が落ちる。常にTDDでやるのかもちろん向き不向きがある。例えばフロントエンドだと期待する結果がわからなかったり、まずは作ってみないとわからないものもある。必ずテストファーストではない。プラクティスとして持てると良い。まずは実装してみて、その日のうちとか、その週までに十分な観点を入れたテストを追加するでも良いし、フロントエンドはある程度はE2EやIntegrationでカバーして、複雑そうな部分だけUnitテスト書くでも良さそう。最後に今回のTDD Boot Campはt_wadaさんにTestingやテスト駆動開発についてその場で聞いて、インプット→アウトプットをすることで理解を深めることができる最高の場でした。思考や取り組み方など今後のエンジニアリングで参考にできそうものが多かったです。主催のAgile459さん、そしてt_wadaさん、参加された皆様ありがとうございました！

TDD Boot Camp in 愛媛に行ってきました & Testingについて

eslint-plugin-reactへのコントリビュートに挑戦してみた今年からある程度まとまった単位で活動をブログなどの記事としてアウトプットしておくことで、それを使った振り返りができるように意識しています。2020年もはや1月が終わり、どんなことをしてたか振り返るとeslint-plugin-reactへのPR作成に時間を使っていたのでまとめを書きます。eslint-plugin-reactGitHub - yannickcr/eslint-plugin-react: React specific linting rules for ESLinteslint-plugin-reactはESLintのプラグインの1つで、React用のルールが用意されています有名なESLintのconfigであるeslint-config-airbnbなど、様々な場所で利用されています最近はReactを使うなら、TypeScriptを併用して使うことが多いので不要になっているルールも多い気がしていますOSSへのコントリビュート去年からOSSへコントリビュートしていくモチベーションが上がっていたので、今年は去年以上にやっていくぞということで定期的にIssueを眺めていました。OSSへのコントリビュート経験が少ないので、どう進めたらいいか分からなかったので1on1などの時間でOSS活動をやってるチームメンバーと話して、ある程度どんな風に進めるか分かってきました。実際にやる時は自分も使ってるOSSを1つ選んで、最近のIssueやPRを眺めてみる。あまり色々なOSSを見ない。最初は1つに絞るくらいが良さそう「help wanted」がついているIssueを見て、自分にもなんとなくできそうかなーくらいに思えるものがあれば探究してみるあたりを意識してやってみました。そこで探究した結果、eslint-plugin-reactに2つPRを投げることができました。https://github.com/yannickcr/eslint-plugin-react/pull/2533https://github.com/yannickcr/eslint-plugin-react/pull/2542[Fix]: Does not validate for LogicalExpression #2533これは去年の12月にやっていた内容です。対応したIssuereact/prop-types does not validate missing propTypes for functions in version 7.17.0 · Issue #2526 · yannickcr/eslint-plugin-react · GitHub作成したPR[Fix]: Does not validate for LogicalExpression by toshi-toma · Pull Request #2533 · yannickcr/eslint-plugin-react · GitHubIssueを見て、何がbugなのか分かりやすかったので見てみました。react/prop-typesのルールがチェックされていないというものです。return (    ordering.length > 0 && (      <Paginator items={ordering} pageSize={10} />    ))最初は、Issueに書いてある通り、prop-typesのコードを見にいってデバッグしてみました。ただ、最初の起点になるコードで、そもそも該当のコードがチェック対象になっていないことが分かり、さらに上位のコードをデバッグしていきました。その結果、コンポーネントを取得するutilコード側で、今回のケースが漏れていることが分かりました。対応としてはLogicalExpressionもチェック対象に含めるようにしました。ESLintのプラグインのテストはvalidとinvalidのケースを書くだけなのでテストを追加して終わりです。ちょっと修正が入ったけど、さくっとマージされました。[Fix] jsx-indent: Does not check indents for JSXText #2542対応したIssuereact/jsx-one-expression-per-line · Issue #2467 · yannickcr/eslint-plugin-react · GitHub作成したPR[Fix] `jsx-indent`: Does not check indents for JSXText by toshi-toma · Pull Request #2542 · yannickcr/eslint-plugin-react · GitHubこれもIssueを見て、なんとなくできそうな気がしたので見てみました。内容的には、以下のようにJSX内にplaneなテキストがある場合に、それがindentされないというものです。return (    <div>text    </div>);最初はIssueのタイトルにあるreact/jsx-one-expression-per-lineのコードを見に行ったのですが、デバッグしてみると、特にindentを考慮していないのが分かりました。原因はreact/jsx-indentにあることが分かりました。そこからはjsx-indentのコードをデバッグしていったのですが、今回の対象となるJSXTextノード用のコードが一切なかったので実装が必要でした。また、JSXTextは他のNodeの場合と情報がだいぶ違うので自分で正規表現を使って現在のインデント数を計算したり、fix時の処理を実装する必要がありました。ここでJavaScriptの正規表現について結構調べ直しました。対応的には、JSXTextノード用のハンドラーを設定して、現在のインデント数を正規表現で取得。期待するインデント数と違う場合はreport関数に渡して、FixerFunctionでnodeのテキストを期待するインデント数でreplaceするということを行いました。他のノードと形式が特殊すぎて、だいぶ実装が大変でした。感想良かったこと今回、OSSへのコントリビュートを探究してみて、良かったことがいくつかありました。まず、勉強の題材としてめちゃ良さそうだと思いました。業務で経験してない実装だったり、既存のコードを読むのも勉強になりました。また修正内容を考える時に良いロジックを考えたり、ASTや正規表現の勉強になったりなどなど色々あります。あとは、Issueを見ると関係するライブラリにも詳しくなれると感じました。例えば、ECMAScriptの新しい構文やReactの新しいAPIに対応する時は、eslint-plugin-reactのIssueに上がってきていました。継続することで新しいライブラリの機能にも詳しくなれそうです。追記(2020/02/02)今回やってみて一番良かったのは、「OSSへのコントリビュート無理ではないな。」ということが分かったことです。自分が使ってるOSSへのコントリビュートってハードル高く感じてましたが、なんとなく分かりやすそうなIssueを1つ選んで、じっくりコード読んで1つ1つデバッグしてみたら、なんとかなるのが実感できました。自分も2つめのPRは1週間くらい考えながら作ったりしたので、時間をかければなんとかなるな。と感じました。あとは、有名だけどメンテされてないOSSも多いのでは。と思いました。eslint-plugin-reactは有名ですが、bugやhelp wantedラベルがついたIssueがまだまだあるけど、積極的にコントリビュートしてる人も多くなさそうです。他にもこういったOSSは多そうです。学び今回対応したIssueどちらも、最初に想定した場所とは違う部分が原因でした。Issueに書いてある内容に囚われすぎないようにしようと思いました。また、普段の開発はモブプログラミングなのでレビューというフローをあまり経験しないのですが、OSSだとちょっと実装方針に迷っても気軽に相談できなかったので、これでいいのかなーと不安なままPRを作成するような進め方になりました。普段の開発だと、チームメンバーに実装する前にさくっと相談できるので違うポイントだなと思いました。後日談#2542のPRがマージされた後に、そのPRが原因のbugが報告されていて焦りました。Don't be afraid of making mistakes. Keep coding and  contributing, and your skill will be improved and the OSS project will be better. Do your best.— shisama / Masashi Hirano (@shisama_) 2020年2月2日「壊してしまってごめんなさい。。。もっと注意します。。。」という気持ちでしたが、失敗を恐れずに、注意はしつつ、これからも頑張っていこうと思います。

eslint-plugin-reactへのコントリビュートに挑戦してみた ~1月の活動を振り返る~

最短の時間で最大の成果を手に入れる　超効率勉強法最短の時間で最大の成果を手に入れる 超効率勉強法作者:メンタリストDaiGo出版社/メーカー: 学研プラス発売日: 2019/03/05メディア: 単行本2019年の12月末ごろから読み始めて昨日読み終わったので読書メモです。読み終わったその日じゃなく、1日空けてからまとめを書くことで記憶に残りやすいと思ってます。メンタリストDaigoさんの学習に関する本です。イラストなども多いのでスラスラ読めました。目次と一言まとめ1章 やってはいけない！7つの勉強法2章 「超効率勉強法」の基本言語化の2つのアプローチで具体的な手法が紹介されています。3章 学習効果を激しく高める！「勉強前」7つのテクニック4章 記憶の残り方が変わる！「勉強後」5つのテクニック5章 上級者向け！勉強の効果をさらに高める7つの学習習慣6章 才能の差はこうして超えろ！地頭を良くする科学的トレーニングモリーとマインドセットについて紹介されています。明日から取り入れたいポイント本を読んで明日から取り入れたいと思ったポイントを、勉強前、勉強中、勉強後に分けて紹介します。勉強前知っていることを書き出すまずは知っていることを書き出す。新しいことを学ぶときは、いま自分が知っている情報をもとに学ぶので事前に思い出すことで効果的に理解しやすくなるそうです。音楽を正しく使う勉強中は無音が良いが、音楽を聴くと気分が良くなるので、休憩時間や勉強前に好きな音楽を聴くと良い。ピアプレッシャーでやる気を出す仲間からのプレッシャーをうまく使う。なるべく集中している人が多い環境や、モチベーションが高い人の多い環境に身を置くようにする。勉強中クイズ化想起の手法の一つとして紹介されていたクイズ化。テキストを見ながらノートを取っても脳には定着しないので、ここをまとめたいと思ったら、本を閉じてまとめたい内容を思い出しながら自分の言葉でまとめる。分散学習脳の定着までは時間がかかるので、一定の時間がたった後に復習する。自己解説/ティーチングテクニック再言語化の手法の一つとして紹介されていた自己解説とティーチングテクニック。自分が理解しているのか確認するつもりで、自分に対して質問を投げかける。これでわかった気になるのを防ぐことができる。また、学んだ内容を自分ではなく人に説明するのも効果的。教えるつもりでもOK。エンジニアならラバーダックとかは有名ですね。ひとりごと学習/マルチモーダル学習/ジェスチャー法ひとりごとをしながら学習すると集中力も上がり、記憶への定着率も上がる。これは自己解説と合わせて使えると思いました。また、マルチモーダル学習として、多くの感覚を使って学ぶのが良さそうです。ここはジェスチャーをしながら学習すると良さそう。勉強中にも運動する立ちながら勉強すると脳の血流がよくなって、頭が良くなるのでスタンディングデスクを活用する。あとは定期的に体を動かすようにすると良さそう。読書の時は特に部屋の中で歩きながらできそう。音楽を正しく使う勉強中は無音 or 自然音。勉強後昼寝昼寝の効果は明白。10分の昼寝でも集中力や生産性が上がるらしい。あと昼寝ができない人は何もしないで目をつぶるだけでも効果的。自分はなかなか寝れないので目をつぶるところから始めると良さそう。運動運動は脳の働きが良くなり、記憶の定着率も上がる。勉強後の5分運動してみたり、定期的に体を動かすと良さそう。ワーキングメモリー最後に地頭を良くするポイントとしてワーキングメモリーについて。コードを書く時にいろいろな情報を頭の中で整理するときに、うまくできないときが多いのでワーキングメモリーを鍛えることをやると良さそうでした。運動やDNBをやるのはもちろんだけど、面白いのは筆記開示。不安なことがあると、そこに脳のリソースが取られるので集中できないっぽい。不安なことを何でもいいから書き出すだけでも効果的みたいです。最後にDaigoさんの動画はニコニコ動画でも見てるので知っていることもいくつか出ていましたが、1つのトピックについて集中して学べるので、この本を読んで良かったです。さくっと読めるので、一回読むのをおすすめします。

超効率勉強法を読んだ

2020年2019年の振り返りに続いて、2020年をどんな年にしたいかをまとめます。今年の年末はこれを見て振り返りができたら良いなと思います。toshi-toma.hatenablog.com2020年意識したいこと🎨 "特定の技術について学び始めたら、触ってみただけではなく、自分のものになるまでしっかり学ぶ"⏳ "自分にとって本当に必要なものと向き合う & 時間を大切にする"🌈 "小さく多くの成果より、少なくても大きな成果を出す"🚴‍♂️ "できることの深掘りをする"👨‍💻 "エンジニアとしての市場価値を上げる"🚀 "学んだこと、達成したこと、やったことなどをアウトプットし、それを見て振り返りができるようにする"やりたいこと📦OSS活動📚フロントエンドの基礎をしっかりつける🗣登壇🏋️‍♂️強みを作る✈️英語まとめ意識したいこと🎨 "特定の技術について学び始めたら、触ってみただけではなく、自分のものになるまでしっかり学ぶ"去年は色々触ってみてはすぐに次へいくことが多く、その結果振り返ると身についたスキルがあまり無かったと思います。今年は1つのことを学び始めたら、基礎的なレベルは完全に理解して、人に説明できるくらいはやりたいと思います。⏳ "自分にとって本当に必要なものと向き合う & 時間を大切にする"去年はよくわからない所に時間を使っていたり、だらだらすることも多かったので、今年は時間の使い方を意識したい。Apple Watchに寝るまでの時間を表示するライフハックも良さそうだし、作業中はポモドーロとかして集中して取り組みたいです。 「100日後に死ぬワニ」が流行ってますが、起きたらまず入眠時間を決めてApple Watchにカウントダウンさせる「17時間後に寝るオレ」が自分史上最高のライフハックです。(今日は残り10時間22分) pic.twitter.com/imL9eki4pg— shao (@shao1555) 2019年12月28日🌈 "小さく多くの成果より、少なくても大きな成果を出す" 2019年を振り返った時に、たくさん小さいリポジトリを作ったみたいだけど、全然覚えてなかったし、何をやっていたのか分からないという感じでした。今年は少なくてもいいから、しっかり形に残る成果を出していこうと思います。🚴‍♂️ "できることの深掘りをする"去年からフロントエンドにフォーカスし始めたので、今年は自分ができることを深掘っていきたいとも思います。👨‍💻 "エンジニアとしての市場価値を上げる"去年に初めて転職ドラフトをやって、自分の活動をレジュメにまとめるということをやりました。そこで自分に足りない所や伸ばしたいところが少し分かってきたので、足りないところは埋める。伸ばしたいところは伸ばすような活動をすることで、エンジニアとしての市場価値を上げたいなと思います。🚀 "学んだこと、達成したこと、やったことなどをアウトプットし、それを見て振り返りができるようにする"2019年の振り返りをやった時に、自分の活動を振り返るのが大変でした。周りの人の振り返りを見ると、定期的にアウトプットしてる記事やブログをもとに振り返りをしている人が良さそうでした。なので、ある程度の単位で学んだことや、達成したこと、やったことをブログや登壇、技術的な記事としてアウトプットしていこうと思います。振り返りの時に、ブログやQiitaなどの記事を見れば振り返りができるのが理想。やりたいこと📦OSS活動今年は何かしらのOSSに集中してコントリビュートしていきたい。去年の末に少しずつ始めて、学習対象としても良さそうなことが分かってきました。📚フロントエンドの基礎をしっかりつける去年は中途半端なところが多かったので、今年はReactベースのフロントエンド開発で必要になる技術を一通り身に付けたい。🗣登壇去年に引き続き、登壇できる機会があれば積極的にやっていきたい。ただ登壇も量より質を求めたい。去年は技術やライブラリの薄い話が多かったので、今年は自分の活動で成果を出して、それをベースに話せると良いなと思います。🏋️‍♂️強みを作るまだまだ自分の強みを明確に持ててないので、今年は自分の興味次第で、何かしらの強みを作り始めるくらいまでいけたら良いなと思います。✈️英語去年は英語学習の習慣化を始めるくらいだったけど、今年はしっかり自分の英語スキルを伸ばしたいと思います。まずは焦らず中学英語くらいはしっかり身に付けたい。TOEICも受けるし、レアジョブも継続する。スピーキング、リーディング、ライティング満遍なく伸ばすイメージ。まとめ2020年はこんな年にしたいです。あえて曖昧目標にしていて、ここから3か月単位で具体的な行動目標にしていきます。今年も頑張るぞー！🏃‍♀️三日坊主を防ぐ「曖昧目標」のススメ

2020年に意識したいこと・やりたいこと

2019年2019年を振り返っていこうと思います。振り返りを毎年継続して書いていくことで、その記事を見れば自分の1年間の活動を思い出せたら良いなと思ってます。愛媛で楽しく暮らしてます2019年仕事登壇イベント記事学習英語開発OSS複業プライベートさいごに仕事2019年は社会人3年目の年ということで自分のキャリアについて考えることが多かったとともに、変化も多かった年でした。前半はプロダクトのエンジニアとして、フロントエンドからサーバーサイドまで触っていました。そこから、特定領域に絞って専門性を高めるという方向に舵を切るということでフロントエンド専門チームに異動しました。blog.cybozu.ioチームメンバーがみんなフロントエンド強くて毎日学びの多い生活ができています。仕事としては、プロダクトの機能開発からは遠ざかって、新しいツールやライブラリの導入だったり、レガシーな部分をモダンにするといった活動が中心です。このあたりはBattle Conference Under30でも話しました。bcu30.jplogmi.jp後半はプライベートで学びたい部分と仕事で学べる部分が徐々に被ってきたので、良い意味でプライベートと仕事の境目が曖昧になってきました。フロントエンドの開発とは別で社内イベントの企画や運営もやっていて、今年大きかったのは「開発合宿」です。控えめに言って最高の合宿でした。2020年もやりたい！blog.cybozu.io登壇2019年に注力したことの1つが社外での登壇でした。2019年の1月に初めて勉強会でLTをやったところからスタートして最終的には7回登壇してました。toshi-toma.hatenablog.com2019年の登壇と資料Ehime.js #2 「意外に知らないnpmと便利なCLI」フロントエンドカンファレンス福岡2019 「歴史から学ぶ現代のフロントエンド」Nihonbashi.js #5 「サイボウズ フロントエンドエキスパートチームとOSSの管理について」Battle Conference Under30 2019 「大規模フロントエンドの技術的負債と向き合う。」Meguro.es # 21 「Google I/O ’19から見る新しいJavaScript」React.js meetup #7 「React+Storybook ことはじめ」We Are JavaScripters! @28th 「JavaScriptersが知って得するChrome DevTools」新しい技術や分野を学ぶ際、「情報を収集→整理→スライドにわかりやすくまとめる」というプロセスが効果的だと考えて、登壇という形でアウトプットするように意識しました。11月にあったフロントエンドカンファレンス福岡は今年の自分の中では大きい機会でした。初めてCFPで登壇を応募してカンファレンスで話すということを経験できたのは自分としては大きかったです。ありがとうございました。frontend-conf.fukuoka.jpspeakerdeck.comイベントいまは愛媛県に住んでいるので勉強会に気軽に参加することはできませんでしたが、東京にいる間は勉強会に積極的に参加しました。また、フロントエンド系のカンファレンスにも参加できてたくさん刺激をもらいました。愛媛に移住してからは、自分でJavaScriptのコミュニティを始めて月に一回のペースでハンズオン or LT会を企画しています。2019年の10月から始めて、3回開催できました。toshi-toma.hatenablog.com記事ブログは10記事書きました。それとは別でQiitaに4つの記事を書きました。反応が多かった記事qiita.comqiita.comqiita.com学習まだ中途半端なものも多いですが、フロントエンドの技術を幅広く勉強してたと思います。これまで中途半端だったHTML/CSSを本やネットの記事、自分のサイトを作ってみて体系的に学習してみたり。あとはReact、TypeScript、Storybook、ESLintやPrettierなどフロントエンドの技術を調べてましたが、このあたりは特に中途半端なままなので来年はしっかり学びなおしたいと思っています。あとはNode.jsやASTに新しく触れることができました。技術系以外だと、プロダクティビティや健康系の本を読むことが多かったです。英語2019年の後半からは英語学習を習慣化するために試行錯誤してました。30分でいいから毎日学習する習慣をつけるために文法本から始めました。最初は一億人の英文法から始めて途中からEssential Grammar in Useに流れました。Essential Grammar in Use with Answers and Interactive eBook: A Self-Study Reference and Practice Book for Elementary Learners of English作者:Raymond Murphy出版社/メーカー: Cambridge University Press発売日: 2015/03/26メディア: ペーパーバック一億人の英文法 ――すべての日本人に贈る「話すため」の英文法（東進ブックス）作者:大西 泰斗,ポール・マクベイ出版社/メーカー: ナガセ発売日: 2011/09/09メディア: 単行本（ソフトカバー）そしてずっと始めたいと思っていたレアジョブも11月に契約を開始して、英会話に取り組んでいます。少しずつ習慣化に近づいてきているので来年に期待。開発プライベートの開発はReactとTSのプロジェクトを作って環境構築しては途中で飽きたり、新しいライブラリのHello Worldをやっては飽きたりであまり身にならないことばかりやってました。このあたりは来年はちゃんとしたものを作り上げるまでやりたい。github.comgithub.comOSS2019年の後半から少しずつOSS活動にも興味を持ち始めました。試しに自分でOSSを作ってみて公開してみたり。www.npmjs.com業務での活動も合わせて- PR 8個- Issue 2個しました。来年はここに注力したいです。複業今年から複業でTechTrainのフロントエンドメンターを始めました。定期的にフロントエンドに関する面談を担当しています。techbowl.co.jpBootcampで資料を作成してメンターをやったりもしました。note.comプライベートプライベートごとだと大きな変化はやはり東京→愛媛への移住です。家賃やランチも安く、通勤のストレスからも開放されて、毎日快適に過ごしています。人や勉強会が多い関東圏は恋しく感じるときもあります。他は週1くらいのペースでジムへ行くのは続けています。あと最近はジム後のサウナにハマっています。あとは会社の夏休みを利用してグアムに旅行してリフレッシュできたのも良かったです。2019年は良いものを買って、自分のQOLが上がるようなものを買えた一年でした。toshi-toma.hatenablog.comさいごに2019年は総じて変化が多く、アウトプットもある程度できて良い一年でした。毎年去年よりも良くするのを意識して日々改善して、何事も楽しんでいきたいです。

2019年の振り返り

今年買って良かったもの2019年も終わるので、今年買って良かったものを書いておこうと思います。今年はミニマリストしぶさんの本を読んでだいぶ影響されたと思います。手ぶらで生きる。見栄と財布を捨てて、自由になる50の方法作者:ミニマリストしぶ出版社/メーカー: サンクチュアリ出版発売日: 2018/05/07メディア: 単行本（ソフトカバー）無印のリュックwww.muji.net通勤や旅行など普段使いのかばんとして、無印のリュックを使っています。全体的にちょうど良く、肩の負担も軽いのでとても気に入っています。ヘインズのTシャツ[ヘインズ] ビーフィー Tシャツ BEEFY-T 1枚組 綿100% 肉厚生地 ヘビーウェイト H5180-2 メンズ ホワイト 日本 XS (日本サイズXS相当)発売日: 2019/12/20メディア: ウェア&シューズ朝服を選ぶのが面倒なので、しぶさんが来てるTシャツをずっと着るようにしたらとても楽になりました。ウルトラライトダウンジャケットwww.uniqlo.com今年からユニクロのウルトラライトダウンデビューしました。軽いのに暖かくてシンプルで最高。トゥルースリーパー セブンスピローショップジャパン トゥルースリーパー セブンスピロー (2019年モデル) 低反発 枕 シングル ホワイト 抗菌 消臭 高さ調整可能 日本製【正規品】発売日: 2019/04/25メディア: ホーム&キッチン睡眠の質を向上したいと思い、良い枕を探した結果、トゥルースリーパーの枕を購入しました。これを買ってからぐっすり眠れるようになったと思います。モットンのマットレスmotton-japan.com枕に続いて睡眠の質の向上のためにマットレスを購入しました。それまではお布団で寝てたのをマットレスに変えたら起き上がるのが辛いくらいぐっすり眠れるようになりました。ノートPCのスタンド【国内正規代理店】Bluelounge Kickflip MacBook Pro(13-inch, Late 2016/13-inch, Late 2016, Touch Bar対応) 用フリップスタンド 13インチ発売日: 2014/07/15メディア: Personal Computersこれは会社で購入してもらって、Macbook Proで利用しているのですが作業が快適になった&Macが熱くなるのを防いでくれています。AlexaEcho Dot (エコードット)第3世代 - スマートスピーカー with Alexa、サンドストーン発売日: 2018/10/30メディア: エレクトロニクス定期的にセールになるので気になっていたスマートスピーカーを購入しました。思ってたよりは毎日使ってて、「いま何時？」「今日の天気は？」と毎日話しかけてます。パナソニック ヘアドライヤーパナソニック ヘアドライヤー ナノケア カッパーゴールド EH-NA9A-CN発売日: 2018/09/01メディア: ホーム&キッチンドライヤーが古くなっていたので新調しました。毎日使うものなので高くて良さそうなものを買った結果、乾くスピードが爆上がりしました。マルチポット和平フレイズ 片手鍋 マルチポット L 14cm 3L (3~4人用) 3合炊き IH対応 ご飯鍋 ふっ素樹脂加工 トゥーメイ ドルチェ(To May dolce) レッド RB-1254発売日: 2019/12/16メディア: ホーム&キッチンフライパンと鍋どちらも管理するのが面倒なので、今年はマルチポット1つで生活してます。特に不満もなく便利です。Notionwww.notion.so今年はNotionというメモやタスク管理、カレンダーなどが一体になっているサービスを契約しました。毎日のメモなどで活用してて、これをベースに毎日作業しています。ノートの体験としても過去1です。今年1番買って良かったものSonyノイズキャンセリングヘッドホンソニー SONY ワイヤレスノイズキャンセリングヘッドホン WH-1000XM3 S : LDAC/Bluetooth/ハイレゾ 最大30時間連続再生 密閉型 マイク付 2018年モデル プラチナシルバー出版社/メーカー: ソニー(SONY)発売日: 2018/10/06メディア: エレクトロニクス今年1番買って良かったものはソニーのノイズキャンセリングヘッドホンです！これは買った後に興奮してたくさんの人に勧めてしましました。電車通勤や飛行機のストレスから完全に開放されたのはもちろん、カフェなど、どこでも集中できるようになったので自分の生活に与えた影響は大きいです。

2019年買って良かったもの

第二弾 地方IT勉強会 Advent Calendar 2019の9日目の記事です。adventar.org東京から愛媛に引っ越した地方暮らしを経験してみたくて、今年の9月に東京から愛媛に引っ越して生活しています。愛媛での通勤風景それまでは社会人になってからの2年ほど東京のオフィスに出社して、東京で開催されるフロントエンドやJavaScriptの勉強会に参加してました。JavaScriptのコミュニティを始めた地元が愛媛というわけでもなく、会社のオフィスがあるというだけなので会社以外の知り合いが0でした。せっかく新しい土地に来たので、エンジニアの知り合いを作りたいという気持ちでconnpassで愛媛県で開催される勉強会を調べてみました。そしたら勉強会は月１くらいで、フロントエンドやJavaScriptに関する勉強会もほとんどありませんでした。東京の勉強会の開催数に慣れていたのでびっくりした＆自分でコミュニティを始めないと、社外のエンジニアと交流する機会がないことを実感しました。はじめて1からコミュニティを始める思い立ったらすぐ行動するのが良いと思い、さっそくconnpassでグループを作るところからはじめました。名前は「Ehime.js」です。ehimejs.connpass.com東京で開催される勉強会が〇〇.jsのものが多かったので、特に何も考えずにEhime.jsにしました。記念すべき第1回目の内容をどうしようか考えたところ、「もくもく会」を開催することにしました。これは個人的には良い判断だと思っています。愛媛のことを全然知らず・どんな人・どんなコミュニティがあるかも分からなかったので、そもそも人が集まるのかすら不安だったこともあり、東京でよくあるLT会というのはやめておきました。そしてもくもく会のほうが、参加者と気軽に交流できそうという期待もありました。イベントページを公開！connpassにイベントページを作成して、公開しました。この時は人が集まるのかとても不安だったのを覚えています。第1回目のイベントページEhime.js #1 を公開しました！サイボウズ松山オフィスで開催します。 https://t.co/K4o2tFSQLT #ehimejs— Toshihisa Tomatsu (@toshi__toma) 2019年9月12日自分の宣伝できる場所はTwitterしかなかったので、それだと限界があると感じ、ネットで「愛媛　勉強会」「四国 IT」などで検索していくつかお世話になりました。四国の勉強会をまとめたカレンダーを作成している方がいたりsites.google.com愛媛のIT系の人が集まるSlackグループに入って、宣伝させてもらったりramusara.hatenablog.comこういったブログに書いてもらえたのもありがたかったですkamatamadai.hatenablog.com周りの人や宣伝してくれた方のおかげで、無事に第1回目は満席になりました🎉LT会をやりたいこのコミュニティを始める時に、月1でコンスタントに開催していくことを決めていました。理由は、自分の東京での経験から、定期的にアウトプットやインプットができる場があることの大切さを感じていたので、それが愛媛にあるといいなと思ったからです。第2回目は、やりたいと思っていたLT会を開催しました。ehimejs.connpass.comLTって緊張するし、こんな話で需要あるのかな...って思う人も多いけど、実際話してみるとそんなこと無いしLTの資料を作る時間が一番勉強になる。というのを思っていたので愛媛でもLT会をやりたいと思ってました。無事LT枠で申し込んでくれる方が何人かいたおかげで、開催することもでき、当日も面白い話をたくさん聞くことができました。愛媛でコミュニティをはじめて良かったこと東京から愛媛に引っ越して、コミュニティを始めて3ヶ月が経ちました。この3ヶ月を振り返って良かったことを整理してみます。まず「1からコミュニティを始める経験ができた」です。東京は既にたくさんのコミュニティがあり、どうしてもそこに途中から入ることが多かったです。今回自分で新しくコミュニティを始めて、試行錯誤する経験ができたのはとても良かったと思います。あとは「地方ならではの勉強会」がとても良いなと思い気に入っています。愛媛で別の勉強会に参加して驚いたのは、勉強会の最初に参加者全員の自己紹介があったことです。参加者が多いLT会などだと、どうしても参加者全員の顔と名前を覚えることができませんが、こういった時間があり、より参加者と密にコミュニケーションがとれるのは地方の勉強会の良いところだと思いました。そして、特定の分野だけに偏った参加者があまりいない。というのも特徴の１つかなと思います。愛媛だとフロントエンドだけ専門にやってる人がどうしても少ないので、他の分野の経験がある人が勉強会に来てくれました。自分があまり知らない分野の話を聞けるのが良いなと思っています。今後やりたいことこれからもWebやフロントエンドに関する勉強会を愛媛で開催していこうと思っています。参加者がコンスタントにアウトプットやインプットができるように月に1回は開催していきます。自分のフロントエンドやWebの経験や知見を、参加者に還元できるようにハンズオンなども企画したいなと思っています。まだ試行錯誤中ですが、これからもよろしくお願いします。愛媛で勉強会を開催したい方へコミュニティを始めるうえで、勉強会の会場探しが大変だと思います。自分の場合は、働いているサイボウズのオフィスがあるので、そこを利用できたのが大きかったと思います。これから愛媛で勉強会を開催したい方は、サイボウズの松山オフィスを会場提供できるのでお気軽に相談くださいcybozu.co.jpさいごに3ヶ月でたくさんの人と交流でき、参加してくれる方がいるからこそコミュニティが成り立つのを実感しています。そして、コミュニティをはじめて何もわからないところからのスタートでしたが、会社の経験豊富なチームメンバーに相談できたのも良かった&恵まれているなと思いました。Ehime.jsに参加してくれた方ありがとうございます！これからもよろしくお願いします。

東京から愛媛に引っ越して、JavaScriptのコミュニティを始めた

dotfilesdotfilesを作成しました。github.comエンジニアはエディタやshellの設定ファイル(dotfiles =設定ファイル)をdotfilesとしてGitHubで管理する文化があるようですが、初めてだと作り方など全然分からなかったのでまとめます。作り方について説明する前に、なぜdotfilesを作るのかを説明します。エンジニアは自分の好きなエディタや好きなshell、好きな開発環境をカスタマイズしていくと思います。その環境をPCを変えるたびに構築するのは大変なので、設定ファイルをGitHubで管理してスクリプトを1つ実行すれば、いつもの開発環境が構築されるというのを実現するというのが主な目的だと思います。dotfilesについては人によって様々ですが、その一例としてdotfilesの作り方について紹介します。Step1 リポジトリ作成GitHubに自分用のdotfilesリポジトリを作成します。他の人のリポジトリもたくさん公開されているので参考にすると面白いです。github.comStep2 Applicationを自動でインストールできるようにbrew.shの用意Macを使っている人であれば、brewを使ってツールやアプリケーションをインストールする人が多いと思います。今回は、brew.shというshellスクリプトを実行すると、普段使っているツールやアプリケーションを自動でインストールできるようにしました。用意したスクリプトは以下の通りです。brewが入っているかのチェックやbrew installで列挙したツールを順番にインストールします。またbrew caskを使ってMacのGUIアプリケーションなどもインストールするようにしました。#!/bin/sh -xeecho "installing homebrew..."which brew >/dev/null 2>&1 || /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"echo "run brew doctor..."which brew >/dev/null 2>&1 && brew doctorecho "run brew update..."which brew >/dev/null 2>&1 && brew updateecho "ok. run brew upgrade..."brew upgradeformulas=(    git    zsh    fzf   # 省略)echo "start brew install apps..."for formula in "${formulas[@]}"; do    brew install $formula || brew upgrade $formuladonebrew tap caskroom/caskcasks=(    google-chrome    firefox   # 省略)echo "start brew cask install apps..."for cask in "${casks[@]}"; do    brew cask install $caskdonebrew cleanupbrew cask cleanupcat << END**************************************************HOMEBREW INSTALLED! bye.**************************************************ENDStep3 各種設定ファイルを用意dotfilesで管理したい設定ファイルを用意します。自分の場合は以下のファイルを用意しました。.aliases.gitconfig.gitignore.hyper.js.screenrc.zshrcStep4 dotfilesを環境に適用するためにinstall.shを用意Step3で用意した設定ファイルをinstall.shというshellスクリプトを実行すれば、自分のルートにシンボリックリンクを貼ることで適用できるようにしました。用意したスクリプトは以下の通りです。今回はnodebrewでnodeをインストールするようにもしました。#!/bin/sh -xe# 実行場所のディレクトリを取得THIS_DIR=$(cd $(dirname $0); pwd)cd $THIS_DIRecho "\033[0;32mstart setup... \033[0;39m"echo "setup symbolic link..."# dotfileのシンボリックリンク作成for f in .??*do    [[ "$f" == ".git" ]] && continue    [[ "$f" == ".DS_Store" ]] && continue    ln -snfv ~/dotfiles/"$f" ~/doneecho "finish"source ~/.zshrcecho "setup nodebrew and node"if !(type "nodebrew" > /dev/null 2>&1); then    curl -L git.io/nodebrew | perl - setup    nodebrew install-binary stable    nodebrew use stablefiecho "finish"echo "\033[0;32mAll Finish!!! \033[0;39m"Step5 GitHubにpushしてREADME.mdを整備Step2~Step4までで用意した設定ファイルやshellスクリプトをリポジトリへpushします。また、install.shとbrew.shを用意したので、使い方などREADME.mdに書いておきます。あとで使う自分向けですね。だいたいがリポジトリのクローンやshellスクリプトに実行権限を与えて、実行するくらいです。$ git clone https://github.com/toshi-toma/dotfiles.git$ cd dotfiles$ chmod +x brew.sh$ sh brew.sh$ chmod +x install.sh$ sh install.shこれで完成です。さいごにdotfilesがどんなものなのか？から5つのStepに分けて作り方を紹介しました。他の人の設定を見ると、とても手が込んだものもあり面白かったです。最初から頑張ると大変なので、まずはbrewでのアプリケーションのインストールとshellやgitの設定ファイルを用意するくらいが楽そうです。また、こまめにメンテナンスしておく必要もありそうです。

dotfilesの作り方

Battle Conference U30 #20192019/07/06に開催された若手エンジニア向けのカンファレンス「Battle Conference U30」に参加しました。参加者は同世代のエンジニアばかりで、たくさん刺激を受けました。テーマだけじゃなく世代で縛るカンファレンスも良いですね。bcu30.jp資料今回は「大規模フロントエンドの技術的負債と向き合う。」というタイトルで発表しました。bcu30.jp資料はSpeaker Deckに公開してあります。speakerdeck.comこれまでプロダクトチームで考えたり取り組んできた内容を中心に話しました。Twitter上など、同じように悩んでいる人も多そうで、改めて頑張ろうと思いました。感想懇親会含め、スピーカーの人たちとたくさん話せて良かったです。来年もあれば、ぜひ参加したいと思います。今日のBattle Conference Under30 の資料です！「大規模フロントエンドの技術的負債と向き合う。」よろしくお願いします。#BCU30  #bcu30_2https://t.co/X6XqNgvCLj— Toshihisa Tomatsu (@toshi__toma) July 6, 2019

Toshihisa Tomatsu

2024年振り返り

コードフォーマッターとしてBiomeを使う

2023年の振り返り

「フロントエンド開発のためのセキュリティ入門」を読んだ

Keychron Q11を購入して分割キーボードデビューした

2022年の振り返り

2021年の振り返り

WYSIWYGエディタ TinyMCEを使った開発

React Queryを使った開発

Material-UIを使った開発

コンポーネント内でコンポーネントを生成する際の問題

「Build your own React」のメモ

axiosで二重リクエストを防ぐ

flowtypeについて調べた

Monorepoについて調べた〜Lerna & Yarn Workspaces〜

React Native for Webを触ってみた

React Native入門から基礎を学ぶまで

React Nativeに入門した日

PWAのオフラインサポート検出の改善

2020年の振り返り

Svelteとは

開業と初めての確定申告 in 2020

「What's coming in ESLint v7.0.0」を読んだ

TDD Boot Camp in 愛媛に行ってきました & Testingについて

eslint-plugin-reactへのコントリビュートに挑戦してみた ~1月の活動を振り返る~

超効率勉強法を読んだ

2020年に意識したいこと・やりたいこと

2019年の振り返り

2019年買って良かったもの

東京から愛媛に引っ越して、JavaScriptのコミュニティを始めた

dotfilesの作り方

Battle Conference U30 #2019で登壇しました

2024年振り返り

コードフォーマッターとしてBiomeを使う

2023年の振り返り

「フロントエンド開発のためのセキュリティ入門」を読んだ

Keychron Q11を購入して分割キーボードデビューした

2022年の振り返り

2021年の振り返り

WYSIWYGエディタ TinyMCEを使った開発

React Queryを使った開発

Material-UIを使った開発

コンポーネント内でコンポーネントを生成する際の問題

「Build your own React」のメモ

axiosで二重リクエストを防ぐ

flowtypeについて調べた

Monorepoについて調べた 〜Lerna & Yarn Workspaces〜

React Native for Webを触ってみた

React Native入門から基礎を学ぶまで

React Nativeに入門した日

PWAのオフラインサポート検出の改善

2020年の振り返り

Svelteとは

開業と初めての確定申告 in 2020

「What's coming in ESLint v7.0.0」を読んだ

TDD Boot Camp in 愛媛に行ってきました & Testingについて

eslint-plugin-reactへのコントリビュートに挑戦してみた ~1月の活動を振り返る~

超効率勉強法を読んだ

2020年に意識したいこと・やりたいこと

2019年の振り返り

2019年買って良かったもの

東京から愛媛に引っ越して、JavaScriptのコミュニティを始めた

dotfilesの作り方

Battle Conference U30 #2019で登壇しました

Monorepoについて調べた〜Lerna & Yarn Workspaces〜