Next.js11がついに発表されましたね。 next/script、Next.js Liveなど、興味深い機能が色々ですが、自分が地味に嬉しかったのはNext.js専用のESLint設定がデフォルトでサポートされたことです。 create-next-appでESLint設定済みのNext.jsプロジェクトが作成できる ReactやNext.jsのプロジェクトを立ち上げる際、結構面倒くさい難しいのがESLintの設定です。 .eslintrcファイルの記述とか、extendsの記述順によって優先されるルールとかも変わってくるので、慣れないうちはなかなか難しい作業でしょう。（自分はいまだに試行錯誤してます…） しかし、今ではcreate-next-appを使うと、専用のESLintが設定済みのNext.jsプロジェクトを作成してくれます。 実際にコマンドを実行した結果を見ていきましょう。 $

こんにちは、 tbaba です。元々 Rubyist として入社していますが、ここ2〜3年はフロントエンド力の向上にも力を注いでおります。 突然ですが、React で状態を管理する時に何を使っていますか？クラスコンポーネントにしてクラスに状態をもたせている、Redux を使って管理している、React Hooks で管理している、などなど色々な選択肢があるかと思います。 そんな中で自分たちのチームは、現在社内向けのアプリケーションにおいて、フロントエンド開発をする際に Recoil という状態管理ライブラリを使うことが多いです。そこで、今日は「なんでそれ使うの」「何が便利なの」みたいな話ができれば良いなと思います。 先に言っておくと、自分のスキルセットとしては「 TypeScript を利用した開発2年目」「React を利用した開発3年目」「基本は Ruby on Rails が得意なバ

最近、おうちに 3D プリンターをお迎えしました。 いままでも、シェア工房スペースを持つ DMM.make AKIBA まで行けば 3D プリンターを使つかうことはできましたが、大きいものを出力しようと思うと7時間くらいかかります。待ち時間も考えると、日常的に使えるものではありませんでした。 家に3Dプリンターがやってくると家でうだうだしているうちに印刷できるので、ここ最近は毎日稼働させて、家のカイゼンに使える小物を出力するのにハマっています。 ヘビーユースしているうちに、「これは一家に一台、主フこそいじれると最高なのではないか？」と思うようになりました。 3Dプリンターをおうちに迎えて感動したこと 1. 100均に行って便利小物探さずとも、Thingiverse で探せる！ Thingiverse は、3Dデータのシェアリングプラットフォームです。 生活で使える小物、面白いアイテム、フィ

第二版 HappyHacking keyboard前史を追記します。 はじめに　現在、多くの方に支持頂いてロングセラーキーボードとなったHappyHacking keyboard(以下、HHkeyboard)ですが、初期の開発について記録を残しておく必要があると考え、主に技術的な側面での検討内容について文章を残したいと思います。 筆者は初代HHkeyboardからLite2までは企画・開発・製造・販売を担当、Proでは企画までを担当していました。 時代背景 和田英一先生とそのお仲間がHHkeyboardのアイディアを考案されたのは、PCがほぼIBM PC/ATの互換機に集約されつつあり、それにつれてキーボードもほぼIBM PC/AT配列(現在の一般的なキーボード)が標準になってきた時期になります。 SONYが撤退し、DECが消え、それまで研究用に使われていたワークステーションも段々と下火に

Twitter等で告知していたものの、ブログで告知できておりませんでした。AWS認定データベース 専門知識の試験対策本を書き、2021年6月17日発売開始しています！！ 要点整理から攻略する『AWS認定 データベース-専門知識』 (Compass Booksシリーズ) 作者:NRIネットコム株式会社,佐々木 拓郎,上野 史瑛,小西 秀和,小林 恭平マイナビ出版Amazon 試験対策本の内容 本書は、サービスカットとソリューションカットの両建てで、試験範囲の解説をしています。最初の1章で、AWS認定試験の概要と試験勉強の仕方、教材についての説明をしています。2〜6章がメインで、2〜4章はサービスカットでそれぞれのデータベースサービスの解説をしています。５・６章はソリューションカットで移行や監視、セキュリティなどについて、どのように対応するのか考え方をまとめています。そして7章でWell-Ar

CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマークアップを行った場合をみてみます。spanタグの class 名に btnの名前が付与されていますが、ブラウザー・支援技術は、以下をボタンだと認識できません。