最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で

「UNIXはただ死んだだけでなく、本当にひどい臭いを放ち始めている」「キャッシュはアーキテクチャではない。単なる最適化だ」などの語録を生んだ「Goの父」とも呼ばれるロブ・パイク氏の「プログラミング5カ条」について、ネット上で話題となっています users.ece.utexas.edu/~adnan/pike.html http://users.ece.utexas.edu/~adnan/pike.html Rob Pike's Rules of Programming (1989) | Hacker News https://news.ycombinator.com/item?id=24135189 パイク氏の「プログラミング5カ条」は以下。 ルール1：プログラムのどこで処理時間がかかるかはわからない。ボトルネックは意外な場所で発生するので、ボトルネックがどこにあるかを証明するまでは、臆測

こんにちは、Webアプリケーションエンジニアのid:hogashiです。 半年ほど前に公開した「開発環境のフォントなに使ってますか？」に続く、はてなエンジニア世論調査の第2回「VSCodeの拡張機能、なに使ってますか？」です。 ソースコードエディタであるVisual Studio Code（以下、VSCode）は多くのエンジニアに利用されています。VSCodeにはソースコードのシンタックスハイライトやデバッグなど、さまざまな拡張機能をインストールして使うことができますが、公開されている拡張機能は膨大にあります。 その中から、はてなのエンジニアはどんな拡張機能をインストールして、日頃の開発に使っているのでしょうか？ 前回と同様にアンケート調査してみました。 アンケート方法 アンケート結果から見える人気の機能拡張 6割の拡張機能は1人だけが使用 人によってかなり異なるインストール数 興味深いコ

ネット上にはたくさんのIT系のコンテンツがあふれています。そのほとんどは文章として書かれていますが、一部にはマンガの形で面白く分かりやすくしたものもあります。 ここでは、マンガ化されたITコンテンツを集めてみました。毎年夏休みの恒例企画、ITまんがの2020年版です。今年も6本のマンガを新たに追加しました。 もしここに掲載していないITまんがをご存じでしたら、Twitter（@publickey）などで教えてください。毎年更新する予定です。 2020年版の新着ITまんが

2019-03-26 成長するエンジニア組織のマネジメントについて語ろう https://manaboo.me/projects/16Read less

こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー

ドメイン駆動設計でなぜ作るのか？ ドメイン駆動設計の考え方 ドメイン駆動設計を実践するための６つの問い 事例研究 ドメイン駆動設計を現場に導入する 体験的に学ぶ エヴァンス本をちゃんと読む

Clean Architecture　達人に学ぶソフトウェアの構造と設計を読んだので、まとめてみます。コメントやツッコミなどのフィードバックがあればうれしいです。 続編としてクリーンアーキテクチャ本を読むためのポイントという記事を書きました。併せてご覧ください。 なぜ良著？著者のロバート・Ｃ・マーチン（著書読んだことあるかも？）は、50年前から現代に至るまで、様々なアーキテクチャを見て、第一線級として開発し続けてきた経験を元に、どのアーキテクチャでもクリーンにしようとするなら、基本部分は変わらないと言ってて、それらが美味くまとまった本だからです。 いってみればコンピュータ工学について抑えるべきポイントを解説した本であり、The Clean Architectureそのものについてはほとんど割かれていません。それくらい、基本として知るべき事が書かれた本なのです。 最近のアーキテクチャを追いか

誰もが知る(？)プログラミングフォントこと Ricty にインスパイアされ、Ricty のように英文フォントと和文フォントを合成したプログラミングフォントを作りました。 その名も、プログラミングフォント「白源 (はくげん／HackGen)」です！ 白源 (はくげん／HackGen) 通常版 生成元にはプログラミング向け英文フォント Hack と、Adobe 製作の源ノ角ゴシックに丸みを付けた派生フォント 源柔ゴシック を使用させていただきました。 白源の生成元である Hack、及び源柔ゴシックには、いずれも SIL Open Font License Version 1.1 という大らかなライセンスが適用されているため、改変及び配布が自由となっています。したがって、白源の生成済みフォントファイル (ttf ファイル) は GitHub からダウンロードして、すぐにご利用いただけます。 「白

Portalsとは japan.zdnet.com とのことで、iframeタグとよく似たportalタグができるらしい。 portalタグと<iframe>タグの違いは何かと言えば、Googleの新たなPortalsテクノロジーが<iframe>タグの制約を取り去ったものだというところにある。 Portalsを使用することでユーザーは、埋め込んだコンテンツへのナビゲーションが可能になるとGoogleは述べている。<iframe>タグではセキュリティ上の理由からこういったことが許されていない。 さらに、Portalsではアドレスバー上のURLを上書きすることもできるため、<iframe>タグが今日担っているコンテンツの埋め込みという枠を超え、ナビゲーションシステムとしても利用できる。 ふむふむ。 例えばエンジニアらは、ユーザーがニュースサイトを閲覧しており、記事の末尾に達した際に、<por

エンジニアがプロジェクトがオンスケであると嘘をつき続けるゲームは盛り上がった pic.twitter.com/aWkKIPtAAS— Yoshifumi Yamaguchi (@ymotongpoo) 2017年7月30日 @ryushi さんの主催で仲間内で集まってボードゲーム・カードゲームで盛り上がったのですが、その中で @tokoroten が持ってきた「Not My Fault!」というカードゲームが非常に衝撃的でした。 まず、背景設定がすごい。 残り30日で絶対に完成させなければいけないプロジェクトに、プレイヤー達はプロジェクトメンバーとして参加しています。 進捗は絶対に遅れてはいけません。 もし、プロジェクトの進捗が報告されていたよりも進んでいないとしたら？ それはもちろん、進捗を過大報告したヤツの責任です。 監査を入れて、そいつを追い詰めよう！ というのがゲームの設定です。

ワークマンについてはこちらの記事もおすすめ今年もワークマンの新作ランニングウェアでロードからトレイルまで走り込んでみた 2019ワークマンはランニングでもコスパ最強なのか？トレイルランナーが片っ端から試してみた【2018春夏モデル】コスパ最強ワークマンで全身揃えて紅葉の奥秩父を歩いてきた【2017秋冬モデル】コスパ最強と噂のワークマンで全身揃えたらどこまでいけるか試してみた【2016秋冬モデル】何だかんだいって、山道具は高いと思われています。最先端の技術が使われいるから？あるいは命を預ける道具だから当然？もちろんそれぞれ一理あるでしょう。 でも、それがアウトドアにどうしても踏み出せない要因の一つだったとしたらこんな切ない話はありません。実際のところはそんなことないのに。 そんな考えがきっかけで以前レポートした『冬のワークマン特集』は、おかげさまで驚くほど多くのユーザーに読まれ、シェアしても

生きててよかった

久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？  モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは

新しい技術が出てきたとき、大多数の若い人よりも圧倒的にスピーディーに使いこなすおっさんは珍しくない。 新技術を習得する能力は、年齢よりも、「スキルを獲得するために必要なスキル」、すなわち「メタスキル」に大きく依存するからだ。 たとえば、ある開発ツールを導入すべきかどうか若い人に相談されたので、「まず、ドキュメントを読もう」と言ったら、「ドキュメントを読んでもよくわからなくて。。」と言う。ググったらすぐに公式サイトの至れり尽くせりのドキュメントが出てきたので、「これ読めばいいじゃん」と言ったら、こんなに大量の英語のドキュメントを読むのは無理だと言う。 あるいは、AIを導入するという話になったとき、「AIがよく分からないので教えて欲しい」と言ってきた若い人に、良質の入門書を勧めたら、数式が分からないので読めないのだという。数式の読み方を教えてみたら、数式以前に、そこで使われている数学概念自体を

All in Slack いまさらですが Slack を使い始めました。チャット用途ではなく、RSS 読むためだけに Feedly 開くの面倒だから何とかしたいというのと、モヒカン Slack に入ったらなかなかよかったためです。 究極のIT系最新技術情報収集用Slackチーム公開 - モヒカンSlack - - Qiita そういえば Twitter も全然開かないし会社の SNS も見なきゃいけないし Instagram は見てるヒマないしたまーに Skype 届くし GoogleCalendar の通知は毎日見逃すし、気づけばスマホにもPCにもいろいろなアプリが常駐してるしいろんなタブが開いてる。 しんどくなってきたので何でもかんでも Slack でまとめてみようと思いました。 Slack でできること・やること RSS Feed を読む、Twitter, Instagram, Ya

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

iOS Clean Architecture の説明と、実際にMoneyForwardでiOS Clean Architectureを導入してみた話をします。 Sample code: https://github.com/koutalou/ios-cleanarchitecture