「JSON色付け係」という自虐 フロントエンドエンジニアの間では、「私の仕事は JSON に色を付けることです」という有名な自虐ネタがある。 おそらく初出は以下のツイートなのだろう（*1）。ただ、出典はあまり詳しく調べていない。 初めてこの言葉を見た時、面白い言い回しだなと思った。確かにフロントエンドの仕事にそういう側面はある。 実際、コンテンツの表示がメインのページで作業すると上記のような気持ちになる。この場合、フロントでやることといえばせいぜい日付の表示形式を適切にフォーマットするくらいだ。結局バックエンドからデータが返ってこないとフロントだけでは何もできないと思うこともある。 もちろん、フロントだけで簡潔する手書き風グラフ作成ツール excalidraw のようなものは別だし、フロントで複雑な状態を扱う部分を書いたり、フォームを使ってユーザー入力を受け付け、入力値を検証するバリデーシ

(プロダクト開発の文脈で) 使われていない機能は百害あって一理なしなので積極的に消すべきだと考えている。 使われていない機能は消すべき慈悲はない とある日の某氏に降り掛かった悲しい出来事 消すべき理由1: プロダクトにおける "コア" の部分がハッキリする たくさん機能があると何がコアなのか分かりづらくなる。「色々できることは分かったけど、何が強み（売り）なの？」という質問に答えにくくなる。 機能が減ればコアな部分が明確になる。コアが明確になると説明しやすくなる。説明しやすくなると営業しやすくなる。UIもシンプルになってお客さんにとっても使いやすいものになる。サポートにかかるコストも減る。開発者もどこを重点的に守る必要があるか分かる。 消すべき理由2: 機能の数は開発コストに直結する 売れることがバレれば競合はどんどん増えるし、時代が変われば求められているものが変わる。一度システムを作れば

「本を読むのが苦手なんだけど、どうやったら本を読めるようになるんですか？」とよく聞かれるのでnoteに書くことにしました。 想定読者 ・ 本を読むことに対して苦手意識がある方 ・ 本を読んだ方がいいと思いつつも、本を読めてない方 僕の読書量僕の読書量は年間で30~40冊ぐらいです。 参考までに以下のようなデータがありました。 月2冊~4冊だと約上位20%に位置するみたいです。 https://www.excite.co.jp/news/article/Jcast_kaisha_350473/ 本とは圧倒的優秀な先人達の知恵を借りるツールだと思っていて 僕は本を読むようになってから人生の難易度を劇的に下げられたことを実感しています。 例えば、本に書いてあるような定石やフレームワークを仕事に用いたり 誰かに説明する際にも本に書いてあった内容を基に説明したりすることで 説明コストを下げたりしてい

ヤフーは、7月より募集を開始したギグパートナー（副業人材）において、応募者4,500人以上から選出された10歳から80歳までの104名と業務を開始しました。業務を開始したのは、「事業プランアドバイザー」（COO（最高執行責任者）小澤隆生 管掌）91名と「戦略アドバイザー」（CSO（最高戦略責任者）安宅和人 管掌）10名と「テクノロジースペシャリスト」（CTO（最高技術責任者）藤門千明 管掌）3名です。 ■本件の概要 Yahoo! JAPANでは、社会の新常態（ニューノーマル）を見据えた「オープンイノベーションの創出」を目的に、当社以外で本業に従事する方の副業先としての募集を2020年7月に開始しました。（※1）応募人数は4,500人を超え、面談や当社の事業や、より良い社会を目指すための提言といったレポートの提出をしていただきました。社内にて審議の結果、まずは104名のギグパートナーを選出し

今年6月のTypeScript Meetup #4で初公開されたTypeScript製フレームワーク「frourio (フルーリオ)」が今月のアップデートでめちゃくちゃカッコいい感じに仕上がっているので紹介します frourioはフロントからバックエンド・ORマッパーまでのアプリ全体を一つのTypeScriptとして統合型チェックが可能になるフレームワークです 1つのディレクトリで完結するので一見するとモノリシックのようですが、型で繋がっていること以外はフロントとバックが個別のプロジェクト扱い（それぞれに別のpackage.jsonがある）なのでフロントはVercel、バックエンドはDockerでAWSにデプロイするみたいなことが可能です 新しいfrourioの特徴 TypeScript製で最速のフレームワーク コマンド1発でフロントSPA + RESTサーバー + ORマッパーの環境構築

これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse

この記事は クラウドワークスアドベントカレンダー2019 12日目の記事です。 概要 こんにちは、怒り駆動リファクタリングを生業としている @MinoDriven です。 弊社リファクタリング専門チーム「バグハンター」で現在実施中のリファクタリング設計について紹介致します。 ドメイン駆動設計 を用い、Railsレガシーコードに対しViewとControllerを ActiveRecord非依存 に変更する設計です。 状況 弊社ブログの過去エントリにあるように、弊社サービスcrowdworks.jpはサービスインから8年経過し、 30万行 を超えるモノリシックRailsアプリになっています。 開発生産性が低下してきています 。 生産性低下の課題を解決しようにも、大規模な上に複雑かつ密結合な構造になっており、 マイクロサービスへの移行も、リプレイスも困難な制約 があります。 そこで半年前にリフ

ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において

2020年６月28日におこなわれた棋聖戦五番勝負第２局▲渡辺明棋聖（36歳）－△藤井聡太七段（17歳）戦は歴史的な一局でした。 中でも、藤井七段が指した61手目△３一銀は現在の最強コンピュータ将棋ソフト「水匠」がすぐには最善と判断できなかった一手として話題となりました。 その発端は開発者・杉村達也さん（33歳）の以下のツイートからです。 このツイートの真意について、杉村さんにうかがいました。 「６億手読む」とは、おおよそ28手先まで読むこと ――なんだかおそろしく話題になりましたね。 杉村「いやもう、びっくりしてます、正直なところ（苦笑）。けっこう今までも『これだけ読ませたら』みたいなツイートはちょっとずつしていました。例えば叡王戦の高見先生も相当いい手を指したとか」 ――2018年、第４期叡王戦七番勝負第１局▲永瀬拓矢七段－△高見泰地叡王戦（肩書は当時）。高見叡王は（72手目）△６五桂と

わたしは、ビジネスノウハウ本が嫌いだ。大嫌いだ。 個人で効率化できる部分なんてかぎられているのに、「お前が努力すれば成果を出せる」的なのが気に食わない。 それなら先に、ムダな会議を減らせって話だ。 ……というひねくれ者のわたしだが、とある本に出会って、自分でもちょっと戸惑うくらい感銘を受けてしまった。 どうやらわたしは今まで、”2流”のビジネス書しか知らなかったらしい。 Windows95の基礎をつくった天才プログラマーが語る、3つの仕事術 わたしが手に取ったのは、『なぜ、あなたの仕事は終わらないのか』という本だ。 ふだんこういった本はあまり読まないけど、kindle Unlimitedで読めるし、評価が高かったから、気まぐれでダウンロードしてみた。 著者は中島聡氏。 1960年北海道生まれ。早稲田大学高等学院、早稲田大学大学院理工学研究科修了。 高校時代からパソコン系雑誌『週刊アスキー』

“コロナ感染拡大前後”で比較した、SNSにおける生活者の行動変容。企業はSNSとどう向き合うべきか？ ～Instagramの投稿データ80万件を分析～ 企業のSNS活用を支援するテテマーチ株式会社（本社：東京都品川区　代表取締役：上田大介　以下「当社」）は、新型コロナウイルスの感染拡大が人々のライフスタイルに大きな影響を与えていることを受け、当社が提供するInstagram分析ツール「SINIS」に蓄積された80万件の投稿データを解析し、Instagramのユーザー動向と、そこから見えてきた生活者の行動変容について調査しました。 そして、調査結果にもとづき、新型コロナウイルスの感染拡大が続く今、企業はSNSとどう向き合うべきなのか提言いたします。 調査結果のサマリ ・コロナ感染拡大後、Instagramのストーリーズ投稿の平均表示回数は31%増加し、 ユーザーのストーリーズ投稿の閲覧時間や

チームのマネージャーが、自らの責務をジョブディスクリプションとして明文化することは難しい。職務内容や権限を、断片的にしか書けないかもしれない。もしそうなるなら、実務も断片的になっている可能性がある。 チームマネジメント（組織マネジメント）という活動は、個々のマネージャーの経験や関心によって、断片的になりやすいように感じている。断片的とは、マネジメント活動が、責務の一部の領域に偏ってしまっていたり、問題を検知してはじめてその領域がマネジメント範囲であることを知る、といった様子を指している。 このような状態になる背景は、マネージャーにとって、マネジメントが、日々の実務を通して蓄積された経験に基づく活動になっているからではないか。マネージャーは孤独だ。ひとりでその責務を担う。エンジニアとは違い、チームで協働するわけではない。だから、形式知として言語化されず、個人の経験として暗黙知にとどまる。その

2020年1月15日、株式会社メルカリにて「Mercari x Merpay Frontend Tech Talk vol.4」が開催されました。フロントエンドの技術に興味があるエンジニアが集まり、各々の知見を共有します。プレゼンテーション「TypeScriptで型安全に入門したい」に登壇したのは、Atsuco Asaoka氏。TypeScriptを始める決意を固めてから、静的型付けやobject、arrayの扱い方などを学んでいく過程と、そこから得た知見について語りました。講演資料はこちら TypeScriptに手を出したきっかけ atsuco_02氏（以下、atsuco_02）：前のお二人が難しい話をしていたので、私は簡単な話をしようと思います。TypeScriptの話をしたいなと思います。 ちょっとだけ自己紹介させてください。アサオカアツコといいます。この黒いネコのアイコンでTwi

2023年5月26日（金）に各種改正に伴う、規約及びプライバシーポリシーの一部変更を行いました。 詳細は以下より内容をご確認ください。 [利用規約](https://job-draft.jp/rule) [エージェント利用規約](https://job-draft.jp/agent_rule) [個人情報の取り扱い](https://job-draft.jp/privacy_policy)

こんにちは！ 去年の４月に新卒入社してからお酒ばかり飲んでいるエンジニアのd4teです。 4月から11月まではUX改善チームにてお仕事検索画面のフロントエンド開発を担当しておりましたが、11月からはリファクタリングチームにてcrowdworks.jpのリファクタリングをしています。 現在のcrowdworks.jpの状況 過去の記事にもあるように、crowdworks.jpはサービスインから約8年が経過し、30万行を超えるモノリシックなRailsアプリケーションになってきていて、コード行数の増加量やファイル変更数の推移は年々鈍化してきています。 内部には開発生産性を低下させる技術的負債が溜まってきており、技術的な投資がしづらくなってきているという課題があります。 自分が所属しているチームは、外部から見た動作を変えずに内部のコードを整理するリファクタリングで技術的負債を解消し、開発生産性の向

機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜　ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜　クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん

履歴や世代、データの削除すべてをリレーショナルデータベースだけで扱う方法。実用上はオーバーキルになることも多いと思われるので、あくまでもインデックスを効かせ整合性制約をすごくちゃんとやるとしたらこうなるよ、程度の知識として捉えてください。

ニューヨーク州北部にある発電所は、発電した電力の一部を使ってビットコインをマイニングしている。その規模は産業規模だ。 天然ガス発電所のグリーニッジ・ジェネレーション（Greenidge Generation）は、施設内へのマイニング設備の設置を無事終えたと発表した。7000台近くのマイニング機器と敷地内で生み出された電力を使って、1日に平均5.5ビットコインをマイニングできる。CoinDeskのBitcoin Price Indexによると、約5万ドルに相当する。 グリーニッジは自社の「ビハインド・ザ・メーター」電力を使う。すなわち、自社で使うために発電した電力で生産原価しかかからない。グリーニッジのブロックチェーン戦略担当ディレクター、ケビン・チャン（Kevin Zhang）氏は、この取り組みは潜在投資家にビットコインとエネルギー市場の双方へのユニークな投資機会を提供すると声明で述べた。

7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも

[レベル: 上級] loading=lazy 属性で実装するネイティブ Lazyload がウェブ標準になりました。 Chrome 以外のブラウザのサポートが期待されます。 The lazy loading attribute (<img loading="lazy") is now officially a web standard 🎉 Thanks to @domfarolino and other community members!https://t.co/fMqFq8gBVs pic.twitter.com/fFotntnBlD — Houssein Djirdeh (@hdjirdeh) February 12, 2020 The specification for native image lazy-loading has been merged into the HTML