「技術書の読書術」を読みました 「技術書の読書術」読んだら面白かったので、後から見返せるようにまとめました。 この本はどんな本？ 「探し方」「読み方」「情報発信＆共有」の3つの章でコツやテクニックが書いてある 二人の技術書の著者による共著であり、考え方や思想が異なる部分もそのまま載せている 2022年10月が初版で現時点（2022年末）では比較的新しい本 各章のページ配分は以下のような感じで、表題通り「読み方」が多く書かれている ５：読み方 ３：探し方 ２：情報発信＆共有 この感想を書いた人は？ 0歳2歳を絶賛子育て中のWEBエンジニア５年目くらいの人 育休中に生活や仕事の効率を上げたいと思ってこの本を手に取った 本は読むけど、何度も見返したりアウトプットすることはあまりなかった 個人的おすすめ度：★★★★☆（4/5） GOOD：技術書大好きな著者の具体的なノウハウに触れられて刺激を受けた

こんにちは、リファクタリングが大好きなミノ駆動です。 この記事は READYFORアドベントカレンダー2022 、初日の記事です。 これはなに？ 日々の開発をただ漫然とこなすだけでなく、獲得した技術や知識を外に向けて発信することは、他のエンジニアを助ける、自己の成長につながる、思わぬ機会を得られるなど、さまざまな恩恵をもたらします。 Qiitaアドベントカレンダー2022という折角の機会ですから、あらためて技術発信することの意義や恩恵を見直し、モチベーションアップに繋げられればと思います。 また、本記事に記したノウハウによって、発信内容のクオリティアップに少しでも貢献できればと思います。 この記事のゴール 以下の理解を得ることをゴールとします。 技術発信はさまざまな恩恵をもたらすこと 技術発信がより有効なものとなるノウハウを把握すること 筆者の発信実績 説得力を持たせるために一応記載します

Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo 以下はRoden( Twitter / GitHub / Webサイト )によるアニメーションライブラリ紹介記事、18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Projectの日本語訳です。 help youの後の文字はPC版Chromeだと見えなかった。スマホ版では見れる。 元記事はリポジトリへのリンクだけというのも幾つかあるので、適当に解説を加えています。 18 amazing 🤩 GitHub repositories that will hel

{ "editor.formatOnSave": true, "prettier.eslintIntegration": true, "prettier.tslintIntegration": true } 上記コードだとVSCodeのフォーマッタしか効かないため、整形がうまくいかずに崩れます。 そこで、"eslint.autoFixOnSave": true, "tslint.autoFixOnSave": trueを追加し、ファイルを保存して自動フォーマットしたところ、一回崩れて整形される（画面がチラつきます）という感じになります。 やはり"editor.formatOnSave": trueが原因のようです。

Google Fontsのunicode-rangeを使ったサブセット方法 - 祝 Noto Sans / Serif JP on Google FontsCSSfontNotoSansGooglefontsNotoSerif Google FontsでNoto Sans JP / Noto Serif JPが提供されるようになったということで（以前から他の日本語フォントも提供してましたが）、試してみたら、けっこう軽かったので、どのようにサブセットをしてるかの解説です。 Google Fontsのunicode-rangeを使ったサブセットがわかりよいデモ Noto Sans JPの1ウェイトのみのcssファイルは以下のようになってます。 /* [0] */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font

はじめに どんなソフトウェアエンジニアも拡張しやすくメンテナンスしやすいソフトウェアを作りたいと思っているはずです。また、どんなプロダクトマネージャも同様に拡張しやすいシンプルな要求を作りたいと考えているはずです。 しかし、将来の不確実性や発展性に対して見通しを立てるのは難しいものです。そのため、開発チームの思いとは裏腹にソフトウェアの複雑性はどんどんと増大していきます。気がついたら技術的負債と呼ばれるような手もつけられない泥団子になってしまうということもしばしばです。誰もが生産性を下げるために機能を追加したいわけではなく、ビジネス価値を提供するために機能を追加したいだけなのにです。 このような状況を避けるためにはどうしたらよいのでしょうか。今回はその一つの手段として、要求には隠れた「意図」があり、それを発見していくことの重要性についてまずはお話しします。さらにわかりやすい要求が持つ仕様の

Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない

Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a

はじめに Firebase Realtime DBを実践投入するにあたって考えたことを読んで頂いてありがとうございます。　多くの方から「いいね」を頂いて、今回のこの記事を書くモチベーションになりました 本当にありがとうございました！ さて、CloudFirestoreは、Firebase Realtime Databaseとは全く違うデータベースです。特にSubCollectionやQueryが導入されたことにより、リレーションシップの設計に関して大きく異なります。 この記事では、主にCloudFirestoreにおけるリレーションシップの設計方法から、アプリ・CloudFunctionsに至るまでを幅広く解説して行こうと思います。 次の記事ではデータベースの歴史を解説しています。 RDBの限界とNoSQLの登場 Cloud Firestoreでの開発について 私の経験上確実に断言できるこ

この記事はRaspberry_Pi - ラズパイでやらなければいけない４つのセキュリティ対策！の再投稿です。 はじめに ラズパイは低価格で高スペックで出来ることも多いのですが、セキュリティ面を何も気にせずデフォルトで利用するのはかなり危ないです！ というのも、ラズパイを使う以上はおそらくインターネットに接続することになると思うのですが、ラズパイはrootユーザーの名前とパスワードが公開されているので、インターネットに接続した段階で、猛烈なアタックを受けます。 なので 新規ユーザーの作成 SSHで公開鍵認証 ポート番号等の設定変更 piユーザーの削除 を行っていきます 参考：5ステップで完了！ラズベリーパイ(B+)のセキュリティ設定まとめ！ 前提条件！ 参考：Raspberry PiにSSHで公開鍵認証を使いたい！ まずはルートユーザーでログインします。 ラズパイの設定が終わっていない方はこ

概要 認証にFirebase authを使っているWebサービスで、アカウントに対して電話番号認証をさせ認証情報をリンクさせる仕組みを導入します。 動機 Webサービスにおいて一人にたくさんのアカウントを作られることを防ぎたいというのは割とよくあるケースだと思います。 このときに使える方法のひとつが電話番号(SMS)認証です。SMSで4桁とか6桁の数字を送ってユーザーに入力させるアレです。 メールアドレスとちがい電話番号は無料でいくらでも作るということはできないので、アカウントの開通に電話番号の確認を要求するようにすることは有効な手段です。 ちなみにFirebase authでは電話番号をログイン情報に使うこともできますが、今回はログインはあくまでGoogleやGithubなどOAuthを使い、電話番号認証は既存のアカウントに紐付ける方法についてです。 リポジトリ 今回作成したデモアプリは

ラズパイやArduinoを電池で動かしたい時に、消費電力は5v 0.5Aとか書いてあるけど、電池に書かれているのは5000mAhとか単位が違う…これだけでは、自分の電池でこれらの機器を何時間動かせるかわからなかったのでまとめてみた。 単位の意味 まずは電池容量計算に出てくる単位とその意味を整理。 mAh(ミリアンペア時） 例えば 540 [mAh] とは、540 [mA] の電流を 1 [時間] 、流すことができることを表している。 Wh（ワット時） ワット時という他には、仕事率、電力の単位である(W)ワットと、時間の単位である時(h)から組み立てた単位。 １Whとは、１ワットの仕事率で１時間続けた時の仕事量、あるいは１ワットの電力を１時間消費した時の電力量を指す。 W（ワット） ワットさんにちなんでつけられた、仕事効率を表す単位。 電気工学の分野では、仕事率である電力は、以下の式で表され

2019年6月12日に日本でもGoogle Nest Hubが発売されました。日本初のGoogleアシスタント画面付きスマートスピーカーです。 やはり手に入れたからには、スマートスピーカーのアクション（スキル）を作りたいですよね！ 開封の儀の記事はこちらを見てください。 https://note.mu/gaomar/n/n855952289aeb 画面付き対応はAlexaならAlexa Presentation Language(APL)を使ってリッチなコンテンツを作成することができます。Google Nest Hubも同様にSDKが公開されています。 Google Nest HubではInteractive Canvasという機能を使って実装していきます。 https://developers.google.com/actions/interactivecanvas/ ■2019年7月2

TypeScriptはJavaScriptに静的型を導入したプログラミング言語で、登場から現在までその人気を増し続けています。 動的型付き言語であるJavaScriptに静的型の安全性（コンパイル時にバグ・間違いを発見することができる能力）を与えることで、TypeScriptはJavaScriptによる開発の効率を上げてくれます。 裏にJavaScriptがあるという特性もあり、TypeScriptは「部分的に静的型チェックをする」というような挙動をサポートしています1。詳しくは後述しますが、これによりJavaScriptからTypeScriptへの移行が可能となっています。TypeScriptは@ts-check（あるいは@ts-ignore）などを通じてこのようなユースケースも手厚くサポートしています。 このことの裏返しとして、TypeScriptを利用するときは注意すべき点があります

この記事はリクルートライフスタイル Advent Calendar 2015 - Qiita の17日目です。 こんにちは。現在、ホットペッパーグルメのエンジニアをやっている敷地@shikicheeです。 gitで英語のコミットメッセージどう書けばいいの？ と思ったことはありませんか？ 英語で書きたいなーって思っても、いざ書くとなると躊躇しますよね。 ネイティブはどう書いてるのでしょうか。 そこで、github上で実際に使われているコメントを解析し、 よく使われている例をまとめてみました。 解析したデータ github上で1万スター以上を獲得している169リポジトリのコミットメッセージを対象としました。 bootstrap、jquery、react、d3、docker、node、tensorflowなどの有名なプロジェクトばかりなので、良いコメントが期待できます。 解析するコミットメッセー

はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。

San Francisco Font Family San Francisco はひとつの書体ではなく、SF Pro, SF Compact などと呼ばれ、それぞれに Text, Display, Rounded バージョンが存在します。Text よりも Display の方が多くのウェイトを揃えているのは、Text は視認性を重視した書体ゆえ、細いものは利用する想定にないからなのだと思われます。SFシリーズはVariable fontに対応しています。 SF Pro vs. SF Compact SF Pro は macOS や iOS, tvOS デバイスのシステムフォントとして採用されています。SF Compact は Apple Watch のシステムフォントとして採用されています。Compact は字が四角形に近い形をしていて、Apple Watch のような小さなデバイスでも視

追記 2019/12/05 Vue 3.0 のリリースが現実的に近づいてきて色々と事情が変わっているので、話半分に聞いておいてください。 はじめに Patreon での支援募集をはじめました。この記事が良かった！という方は、今後の情報発信のためにもぜひぜひ支援お願いします。 https://www.patreon.com/potato4d Vue.js Advent Calendar 2018 年の管理役の potato4d です。昨年に引き続き、今年も Vue.js のアドベントカレンダーは他にもたくさんあるので、ぜひ #1 から追ってみてください。 12日目の今日は、 Vue.js + TypeScript での理想的な開発環境について考えてみたいと思います。 Vue.js における TypeScript 利用はまだまだ課題が多く、型の恩恵をうけるためのテクニックも複数存在しています。

事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・？ と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは？ まず根本の理解がほぼなかったので調べることにしました。 こことか https://qiita.com/koutalou/items/07a4f9cf51a2d13e4cdc こことか https://blog.tai2.net/the_clean_architecture.html こことか https://qiita.com/Tueno@github/items/705360b357c2a00c9532 こことか h

はじめに この記事はだいぶ古くなっており、現在はReact Hooksを使ったReduxとComponentの繋ぎこみ方法があるようです。この記事ではそのあたり触れられてないので注意です。（Reduxの基本的な記事としてはまだ使えると思います、、、思いたい。） React-Reduxを人に教える機会があるのですが、中々キャッチアップが難しいFWです。 自分自身もReact自体未経験のところから、それなりに規模のある開発に参画したので、 その時に「ここが難しかったなあ」というところを自分なりに図解してみたいと思います。 前提 ReactとReduxの接続にはreact-reduxのconnectを使うこととします。 この記事で伝えたいところ 自分が難しく感じたのはこのあたりでした。 （ソースが色々あって）全体の流れがよくわからない actionを起こすとreducerが反応する仕組みがよくわ