boushiのブックマーク - はてなブックマーク

マニュアルでReactのフロント環境構築(前編)

この記事について Reactを使ったフロントエンド開発環境構築について説明します。タイトルの「マニュアルで」とは、 create-react-appを使わなで自力でセットアップを行うという意味です。また、この記事は個人開発の備忘録を兼ねたものなので実用的な視点から見ると間違いなどあるかもしれません。何か気づいたことなどあれば教えてもらえると嬉しいです。というか絶対どっかしら間違ってます、ごめんなさいおこらないで。作成するプロジェクトについてライブラリにReactを使用する(フレームワークは使わない) TypeScript(ES6)で記述するスタイルにはstyled-componentsを使用する webpackでビルドするトランスパイラにTypeScript, Babelを使用するリンター、フォーマッターにはESLint, Prettierを使用する GitHubでコード管理

boushi 2021/06/27

リンク

アーキテクトを目指すエンジニアの最短ルート - エス・エム・エスエンジニアテックブログ

介護や医療、ヘルスケア、シニアライフなどの4つの領域で高齢社会の情報インフラを構築している株式会社エス・エム・エスで、技術責任者をしている @sunaot です。2015年2月に入社して以来、技術責任者として開発組織の構築や開発基盤の整備をリードしてきました。今まで私がソフトウェアエンジニア︵以下、エンジニア︶の採用面談を延べ800件ほど担当してきた経験を振り返ると、ソフトウェアアーキテクト︵以下、アーキテクト︶をキャリアのゴールに据えているエンジニアも多いようです。ただ、アーキテクトを目指している一方で、実際にアーキテクトになるためには、どういった会社組織でどのような経験をしたらいいのか分からないというケースも見受けられました。今回は、アーキテクトを目指したいエンジニアの方向けに、アーキテクトになるために必要な4つの経験や、それが経験できる会社組織について紹介します。アーキテクトと

boushi 2021/05/06

リンク

「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540

昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。当日、来れなかった方はぜひこちらをご覧ください！そして、当日お越し下さった皆さま本当にありがとうございました！ Twitterで﹁CSSアニメーション﹂﹁CSSヤクザ﹂というワードがたくさん飛び交って、とても嬉しいです。これからもCSSと共に新しい表現を模索していきますのでぜひお楽しみに！

boushi 2020/02/18

リンク

TypeScript の流儀

Bonfire Frontend #4 http://yj-meetup.connpass.com/event/136480/

boushi 2019/09/04

リンク

「めんどくさい」の正体を脳科学者に聞く | Lidea(リディア) by LION

﹁めんどくさい﹂の正体を脳科学者に聞く作成日 2019.07.12 斎藤充博時短歯の健康毎日を豊かに生活習慣改善調査﹁めんどくさい﹂という感情はなぜ起こるのか？めんどくさがりなライター・斎藤充博さんが﹁めんどくさい﹂のそもそもを脳科学者に取材。30秒で﹁めんどくさい﹂が消える方法や、﹁めんどくさい﹂が起こるメカニズムを解説。人が人として生きていくためにも﹁めんどくさい﹂はあったほうがいい、という結論になりました。こんにちは。ライターの斎藤充博です。僕は毎日思うのですが…。いろいろなことがめんどくさい。仕事がめんどくさい。家事がめんどくさい。風呂も歯磨きもめんどくさい。もう、めんどくさいと思うのもめんどくさいです。みなさんもめんどくさくないでしょうか？　こんな気持ちをどうしたらいいのか…。

boushi 2019/07/12

あとで読む

リンク

JavaScriptで配列の初期値に空の配列をセットする際に気をつけるべき点 - APC 技術ブログ

先進サービス開発事業部の高橋です。主にフロントエンドの開発を担当しています。今回はちょっとした小ネタを。タイトルは意味が伝わりにくいですが、要は以下のような2次元配列をあらかじめ作りたかったということです。 [[], [], [], ...] // 配列の中に空の配列が値として入っている状態。 [] は配列それでどのようにしたかというと、以下のような形で配列を初期化して値をセットしました。 let hairetsu = Array(N).fill([]); Array.prototype.fill(value, start, end)は配列を開始位置から終了位置まで指定した値で埋めるメソッドになります。第二、第三引数のstart,endを指定しなければ最初から最後までうまる形になります。私の目論見では、上記のように配列にそれぞれ空の配列がN個セットされているはずでした。そして

boushi 2019/06/03

let hairetsu = Array(3).fill(0).map(()=>[]); でどうでしょう [JavaScript]

リンク

炎上した『ビッグコミック』の佐藤浩市『空母いぶき』インタビュー原文を読んだら、完全に原文と文脈を違えて引用した産経記者のやらかしであった - CDBのまんがdeシネマ日記

佐藤浩市の原文、実は﹁総理という仕事の過酷さと重要さ﹂について語っているというわけで、映画﹃空母いぶき﹄についての佐藤浩市氏の発言が論争になっている﹃ビッグコミック﹄を買ってまいりました。何の話かわからない方は、まあこちらを読んで下さい。﹁佐藤浩市が安倍首相を揶揄した﹂は言いがかりだ！ https://lite-ra.com/2019/05/post-4711.html 佐藤浩市発言冷静に取る向きも https://news.biglobe.ne.jp/topics/entertainment/0513/10036.html 佐藤浩市の発言炎上、批判する百田尚樹氏は﹁安倍首相を揶揄﹂と“曲解”の可能性 https://biz-journal.jp/2019/05/post_27882.html 経緯としてはリテラが文字数をさいてよくまとまっていると思う。重要なのは、リテラだけでは

boushi 2019/05/14

あとで読む

リンク

New React Redux coding style with hooks without selectors

IntroductionReact Redux is one of popular web tech stacks. As I found React hooks so promising, I have been developing a hooks-based library for React Redux called “reactive-react-redux.”

boushi 2019/04/22

react
redux

リンク

Creating a react-redux alternative with Hooks and Proxies

Learn to create a simple React/Redux integration using Hooks, then improve the performance using JavaScript Proxies. Ever since I first learned Redux, I’ve been thinking about alternative ways to integrate it with React. My intuition was that Redux is super simple (which I like a lot), whereas react-redux’s performance optimizations make it complex. And while I’d still recommend that you use the o

boushi 2019/04/22

react
redux

リンク

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響

当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの用語 CSSのパフォーマンス CSSの記述の順番リソースはじめにこの記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに

boushi 2019/04/11

css

リンク

全社的に会社用GitHubアカウントを廃止した件 - ZOZO TECH BLOG

はじめまして。2019年1月に入社したSREスペシャリストのsonotsです。最近MLOpsチームのリーダーになりました。今回の記事はMLOpsの業務とは関係がないのですが、3月に弊社で実施した会社用GitHub個人アカウントの廃止について事例報告します。 TL;DR 会社用GitHubアカウントを作るべきか否か問題会社用GitHubアカウントの利用で抱えた問題 1. OSS活動時にアカウントを切り替える必要があり面倒 2. GitHubの規約に準拠していない会社用アカウントを廃止した場合にセキュリティをどのように担保するか GitHubのSAML single sign-on (SSO)機能について会社用アカウントの廃止およびSSO有効化の実施会社用GitHubアカウントを使い続ける場合私用GitHubアカウントに切り替える場合 Botアカウントの場合 Outside Coll

boushi 2019/04/11

github

リンク

騙されたと思ってやってみて！！ストレッチのプロが教える肩、腰、腕周りのストレッチまとめ「痛くてちぎれる」「生活の質が３段階上がる」

なぁさん｜ストレッチトレーナー｜月額オンラインレッスン🎊3周年 @nst_nakata パソコン作業してる人はコレめっちゃ効きます❗️ デスクワークって腕をずーーっと曲げた状態。つまり筋肉をほぼ1日中ずっと使いっぱなしになるんですよ。もちろん腕はガチガチ。頭痛になるのも腕→肩→首と固まってくるから。ぜひグーーッと気持ちよく伸ばしてください😌👌 pic.twitter.com/EzvnIAdyrb 2019-04-03 18:32:58 なぁさん｜Ｘで﹁週10時間だけ﹂働く @nst_nakata 週10時間だけ働くひとり社長←Ｘを活用してオンライン講座を運営← 自律神経失調症になりドクターストップ← トレーナーとして独立開業｜起業6年目｜年商2,000万円規模のマイクロ法人を経営｜妻と愛犬LOVE｜アイコンとヘッダーは妻が制作@ochapochacha｜Ｘで累計売上8,000万円

boushi 2019/04/05

リンク

docker build 時の apt install が遅い問題 (docker build の --add-host オプションを使って APT のパッケージリポジトリを国内ミラーに設定できる) - ひだまりソケットは壊れない

こんにちは、Docker ビルドおじさんです。今日ずっと docker build してる (してない)— Nobuoka Yu (@nobuoka) 2019年3月22日ubuntu:18.04 ベースで Dockerfile を書いてビルドしまくってるのですが、apt install がとにかく遅い！！！なぜなら日本に住んでいるから！！ archive.ubuntu.com が遠い！！！ Dockerfile に追記せずに apt で使うリポジトリを https://t.co/Skrw55Kyjw から国内のミラーに変える技みたいなのないんだろうか……— Nobuoka Yu (@nobuoka) 2019年3月22日解決方法調べてみたらいろいろ解決策がありそうだった。解決策その1日本を出る。 archive.ubuntu.com の近くに行きましょう。解決策その

boushi 2019/03/24

docker

リンク

Private Class Field の導入に伴う JS の構文拡張 | blog.jxck.io

Intro ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。提案されている構文や、挙動について解説する。 Class Field Declaration まず前提として、現状の Class のフィールドはコンストラクタで定義する必要がある。例えば count フィールドを持つ Counter クラスを定義した場合、以下のようになる。 class Counter { constructor() { this.count = 0 } increment() { this.count ++ } display() { console.log(this.count) } } const c = new Counter() c.in

boushi 2019/03/15

ECMAScript

リンク

[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css

フォームをスタイルのが苦手という人も少なくないと思います。中でもselect要素はブラウザのデフォルトが非常に使いにくく、スタイルするのに知識が必要です。フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシートを紹介します。 select-css -GitHub select-cssの特徴 select-cssのデモ select-cssの使い方 select-cssの特徴 select-cssは、デスクトップ・スマホの各ブラウザで一貫して美しく見せるスタイルシートを適用します。IE 9以前など、一部のブラウザでは、アイコンのデザインはサポートされていませんが、コントロール可能で通常の目的には十分に適しています。

boushi 2019/02/22

css

リンク

TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog

この記事は2016年に書かれた古い記事です。当時はまだTypeScript2.0も出ていないころで今とは状況がかなり異なっています。参考にする場合注意してください。はじめに TypeScriptの型システム Declaration space Open-ended ここまでの確認型定義ファイルを読み書きできるようになるために declare キーワード既存のオブジェクトの型定義を拡張するグローバルなオブジェクトに対する宣言 module Export Assignments Relative or Non-relative module imports ES2015形式実際の定義ファイル既存の定義ファイルを拡張する declare global { } について Typings についておわりにインターン募集中はじめにこんにちはアプリケーションエンジニアの id:t_k

boushi 2019/02/21

typescript

リンク

@typescript-eslint ことはじめ - teppeis blog

追記: 2019/05/01 最近の@typescript-eslint/eslint-plugin, Prettierのアップデートによって、正式にTypeScript 3.4対応されました。一通り普通に動いてる感じ。これまで自分で使っていて問題になったのがパフォーマンス。ESLint単体やTSLintに比べて、プロジェクトによるだろうけど2倍以上遅い。体感で結構辛い。 Poor performance on some projects · Issue #389 · typescript-eslint/typescript-eslint これはTypeScriptのパーサーを通す部分の構造上の問題が原因なので、簡単には直せなそうな気配。とりあえず、個人的には型を必要とするルールにそこまでの価値を感じていないので、該当ルールを無効にしてparserOptions > projectを削

boushi 2019/02/21

リンク

Spring Bootでマイクロサービス作って苦労したお話 / DeveloperSummit2019-SpringBoot

Developers Summit 2019でお話した資料です。資料から読み取れない部分を一部Qiitaで補足しています。 https://qiita.com/h-r-k-matsumoto/it ems/4b639ed1f87fd6f67a4e

boushi 2019/02/15

spring-boot

リンク

CSSセレクタのチートシート｜37パターンを一覧で解説

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

boushi 2019/02/08

css

リンク

はてなブックマーク

タグ

boushiのブックマーク (1,011)

お知らせ

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス