環境 React(CRA) Javascript npm 方針 当たり前の前提として、既に動いている機能は壊さない Javascript -> Typescript へ最短で置き換えて、無事起動するところまでを第一の目標とする any 型を許容する（後の改修や機能追加で型を順次付与していく想定） 作業の概要 コンパイルエラーを解消し、最低限動作するまで ts-migrate を使って全体的に Typescript へ移行する ts-migrate で出力された指摘を手作業で修正し、指摘コメントを削除していく 依存ライブラリに必要な@typesを install していく 型が無くてエラーになっているところに対して any で型を付与していく ※ここまで終わったら この時点で master にマージしても問題はない マージする場合は既存機能が問題なく動作するかしっかり確認する！ 一旦マージし

背景 突然ですが JavaScript ってどうやって勉強していますか？ 私がぱっと思いついたのは以下のような方法です。 書籍を最初から最後まで読む OSSのコードを読んで見る。 UdemyやYoutube等の講座を見る もちろんネット上には素晴らしい書籍や教材が豊富ですが、ドキュメントを最初から最後まで詳細に読むなんて方法は辛いですよね？ （やれる人もいます） 今回は手を動かしながらゲーム感覚でJavaScriptの文法を覚えられる（業務のコードが読めるようになる）JS Challengerというサイトをご紹介します。 JS Challengerとは サイトの説明から抜粋すると JSに特化したコーディング演習が無料でできる ビギナーから上級者まで対応 JSの基礎からDOM操作まで幅広く学べる のように記載があり、いわゆる JS専用のコーディング問題集 だと考えることができます。 また以下

数多くの Node.js ライブラリの作者として知られる Sindre Sorhus 氏が次のようなツイートをしていた。 Why is `import.meta.url` a string and not a `URL` instance? — Sindre Sorhus 💙💛 (@sindresorhus) July 24, 2022 これを見て私も理由が気になったので調査してみた。 先にまとめ URL の仕様にそうすべきと書いてあるから。 普通に考えると？ まず最初に思いつくであろうものが「import.meta.urlはECMAScriptの仕様だが、URLオブジェクトはHTMLの仕様に含まれるため、仕様間のそういった参照はできない」という理由である。 実際 Twitter 上ではそのように考えている人もいた。 しかし、それは誤りである。 ECMAScriptのimport.me

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事はRust大好きな就活中の大学院生が業務でもRustを書くためにRustを布教すべく、フレームワークTauriを使うことでデスクトップアプリケーションをRust + Webフロント技術で簡単に作れることを紹介するハンズオンになります！ 本ハンズオンではReactPlayerを利用した動画プレイヤーを作成します。ハンズオンに+αでUIを整えた完成品は以下のURLからダウンロード・インストールして実際に使えます!!!!!↓ 動画プレイヤーのデモ↓ GitHubリポジトリ: https://github.com/anotherhollo

他の方の記事ですが、読んでいておもしろかったです。記事に出ている本はClean ArchitectureとTDD、LeanとDevOpsの科学くらいしか読んだことなかったです。 また自分も書くことで、他の方も記事を書くようになり、ついでに他の方の記事を読んでみるなどしたいなと思ったので書いてみます。 私はソフトウェアエンジニアとしてのキャリアはまだ7年くらい[1]なので短い方ですが、約7年間の中で読んで印象に残ったものを紹介します。 計算機プログラムの構造と解釈 Scala関数型デザイン&プログラミング Effective Java Programming Rust 実践ドメイン駆動設計 なお、この記事ならびに本のリストは誰かの役に立つことは想定しておらず、単に自分が読んで影響を受けているなあと感じる本をまとめています。つまり自己満足です。 加えてこの手の記事を書く際には、一応筆者のプロフ

みんな大好きGAFAMはご存知の通り言論統制が大好きだよ！言論統制はユーザだけでなく社員にも課しているよ！どんなことが言えないのか紹介していくね！ Stand-up meeting：みんな大好きスタンドアップだよ！立てない人達への配慮でsync-up meetingにしようという運動があるよ！スクラムを組んだりスプリントを走る方が運動強度としては大変そうなのにそっちは大丈夫なんだね！ Brown bag meeting（茶色い紙のバッグ=ランチを持ち寄ってするカジュアルな勉強会）：有色人種差別があった時代の風習のせいで差別用語扱いになったよ！その昔、例えば教会の入口には茶色い紙を持った人がいて肌の色と比べて黒い人を入れないようにしていたよ！Brown bag meetingがこれを思い起こさせるので黒人さん達への配慮的によろしくないみたいだね！Lunch and learnに言い直すべきだ

目次 はじめに ことのきっかけ 改善提案のためにやったこと 解決する課題を決める プロトタイプを作る 戦略を立てる アウトカム目標を設定する 提案する さいごに はじめに はじめまして、フロントエンドエンジニアの鵜木(うのき)です。 弊社では現在、生産性の向上を目的に Motivation Cloud (以下 MC)のフロントエンドをリアーキテクトしています。今回はこのリアーキテクト活動の背景やここに至るまでの経緯をご紹介したいと思います。 新しいアーキテクチャの設計内容や採用した技術スタックに関する紹介は別記事で行います。なので本記事はこれからアプリケーションレイヤーの大規模改善を検討している人向けになります。 ことのきっかけ リアーキテクト活動が始まったきっかけは、フロントエンド横断組織(通称 フロント会*1 )メンバーの開発モチベーション低下が発覚したことです。その時のコメントを一部

v2.4.2からChakraBaseProviderというものが追加されています。 これにはToastProviderが含まれており結果としてframer-motionがbundleされてしまうので、より軽量に使いたい方は本記事の内容を参考にしてみてください。 https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Freact%402.4.2 はじめに この記事で説明しているChakraProviderの使い方は公式ドキュメントで推奨されているものではありませんのでご了承ください。 概要 ＠chakra-ui/reactではなく@chakra-ui/providerのChakraProviderを使う themeはextendThemeを使わずcomponentsのthemeを外す @chakra-ui/cliで

If you're a close follower of everything MUI, you might be aware that we've been working on a new design system. If not, then this post will give you a first look at Joy UI－MUI's new starting point for your design system! If you've ever considered using Material UI because of the developer experience, reliability, and completeness, but hesitated because of the design, this is great news for you. J