大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）

Macで文字入力の効率アップ！Controlキーを使用するキーボードショートカット11選 活用することでキーボードのホームポジションから指を大きく動かすことなく、カーソルの移動が可能 Macで意外と知られていないのは、controlキーの活用。controlキーを使いこなすことで、キーボードのホームポジションから指を大きく動かすことなく、カーソルの移動が可能だ。 物書きは当然のこと、文字を入力する人なら覚えておいて損はしない。キーボードショートカットは覚えるまで訓練が必要だが、身体に染み付くと作業スピードの向上を実感できるだろう。本記事ではMacで文字入力の効率がアップするControlキーを駆使したキーボードショートカットをまとめた。参考にしてもらいたい。

アプリ内マーケティングとは？ アプリ内マーケティングとは、必要なユーザーに、必要なコンテンツを、必要なタイミングで届けることで、ユーザー体験を最適化するマーケティング手法のことである。それによって、エンゲージメントの高いユーザーを大きく増やし、アプリにとっての価値を最大化するわけだ。具体的には「プッシュ通知」と「アプリ内メッセージ」を最適化する。 エンゲージメントが高まると、「商品一覧」「商品詳細」「カートに入れる」「購入する」といった各ファネルの離脱率が減少し、コンバージョン率も改善するという。 「当社のクライアントベースでどういう経済効果があったのかで言うと、例えば新規ユーザー獲得に 5,000,000円使っている会社があります。1万人獲得したため、CPIは 500円です。1か月後、1,500人しか残っていなかったため、1か月後のリテンション率が15％でした。それでリテンション率を5％

こんにちは、mzpです。 今日はMisocaのesaに書いていた「よいコミットメッセージ・よくないコミットメッセージ」という記事を紹介したいと思います。 あらすじ 開発チームでは「コミットメッセージには変更理由を書いて欲しい」「コミットメッセージはWhatよりもWhyが大事」という話を何度かしているのですが、なかなか徹底できていません。 ので、もう少し具体的に「こういうコミットメッセージはよくないですね」というまとめを作ってみることにしました。 ちなみにこの過程でみつけたコミットメッセージに、こんなものがあります。 一切情報がなくておもしろいですね。 ファイル移動を移動した事実しか書かない これは以下のようなコミットメッセージです。 ファイル名を変更 ディレクトリを移動 ファイルを移動したことはコミットメッセージを見なくてもdiffから分かりますが、なぜその移動をしたかが分かりません。 の

ネット上ではSIer批判＝技術のことをわかっておらずプログラムも書けずPMも出来ない非効率でダメダメな上流工程と、 人月単位での労働力提供という業界の慣習に縛られ、持ち前の優秀な技術力・知識を生かせず非効率な作業を強いられているかわいそうな下請け開発者、という構図が確立されているように思います。 自分が関わるまでは、まあそうなんだろうなと思っていましたが、しかし実際にそういう立場のひとと関わりをもつにつれて、どうもそうではないのではないかと思うようになりました。このあたりの実情を書いていこうと思います。 なお、先に言っておきますが本記事で書くことは、上流工程がどうのとか、業界の多重請け負い構造がどうのとか、給料が安くてとか労働条件が過酷でとか、そういう話とは全く関係がなく、純粋にプログラミングのスキルの話だけです。 対象はおもに詳細設計、実装UTだと思ってもらえれば。外部仕様が決まった状態

次にreactをインストールします。 $ npm install -S react react-dom package.jsonは以下のようになりました。 { (中略) "devDependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "webpack": "^1.14.0" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", }, (中略) } ビルド設定 webpackでビルドできるように設定ファイルを作ります。 clientディレクトリにwebpack.config.jsファイルを作成し以下の内容

はじめに 今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。 「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。 入門記事のためイテレータやジェネレータ等のわかりづらかったり、 説明が長くなりそうな機能や構文は割愛しております。 ES2015(ES6)とは ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、 2015年に標準化されたため正式名称はES2015になった。 正式名称がES2015ならES6という名称を使うのは間違いなのか どちらの名称でも問題はない。 ES6の名称の方がエンジニアコミュニティに中では浸透しているらしく、ES6と記載されていることが多い。 詳細は以下を参考。 ES6 or ES2015 ? 〜WEB+DB PRES

その結果、自分はすっかり言及の減ってしまったリーンソフトウェア開発や、それらの源流であるトヨタの生産方式、トヨタが現在取り組んでいる自工程完結を評価するのがよいのではないかと思い至った。本稿は、そういうポエムである。 本稿でいうリーン（ソフトウェア）開発とは何か？ 2003年にメアリー・ポッペンディークとトム・ポッペンディークにより提唱されたトヨタ生産方式を源流とするリーン生産方式をソフトウェア開発に適用した原則集。以下を指す。 リーンソフトウエア開発～アジャイル開発を実践する22の方法～ リーン開発の本質 エリック・リース氏のリーンスタートアップやオライリーのリーンシリーズとは異なるので注意いただきたい。 きっかけとしてのアジャイル方法論の違和感：結局、アジャイルでも多くの課題が残る。 「今回のプロジェクトがやりにくいのはウォーターフォールでやっているからだ」、「今回のプロジェクトが適当

ruby に慣れていて python に慣れていないんだけど、python を書く機会が増えてきたので備忘録のような感じで。 python は完全に初心者。 python 3。python 2.x のことは気にしないことにした。 手元の処理系 ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16] Python 3.5.2 :: Anaconda 4.2.0 (x86_64) で確認している 長さ ary_len = [1,2,3].size # [1,2,3].length でもいい hash_len = {a:1}.size # {a:1}.length でもいい string_len = "hoge".size # "hoge".length でもいい range_len = (1..9).size # Range#len

はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親子関係、各画面を呼び出すための操作をまとめると以下のようになります。[ ]で囲まれた青文字がUI表現で、赤文字部分が最終操作画面とその説明です。★が初期画面です。 まとめたつもりなんですが読みにくいし主題とあまり関係がないので、面倒な人は下の画像まで読み飛ばしてください [フローティング操作ボタン] メイン（様々なエントリー一覧） [ツールバー横のナビゲーションドロワーボタンから左部ナビゲーション：タイトルは「話題を探す」] [仕切り線：カテゴリー] ホーム [タブ] 人気エントリー（いわゆるホッテントリ）★ 新着エントリー（

巷の噂で Ruby の Array#<< が Array#push よりも速いと聞いたので調べてみた。まずはベンチマークを取ってみた。 require 'benchmark' Benchmark.bm 10 do |r| r.report "push" do 8000000.times do; [].push(1); end end r.report "<<" do 8000000.times do; [] <<1; end end end 結果は以下の通り。 user     system      total        real push         1.570000   0.000000   1.570000 (  1.579687) <<           1.280000   0.000000   1.280000 (  1.288951) 確かに Array#<< の

MySQL を UTF-8 で使おうと思ってハマりがちなのは charset utf8 を指定してしまうことです。 MySQL の UTF-8 には歴史的事情により utf8 と utf8mb4 の二つあります。 UTF-8 は1バイト〜4バイトで1文字が構成される文字コードですが、MySQL の utf8 は4バイト文字を扱うことができません。ハマりたくなければ utf8mb4 を使いましょう。 utf8 を使ってしまった場合に4バイト文字がどのように扱われるか、自分でもうろ覚えだったのでメモしておきます。 登録 接続が utf8mb4 でカラムが utf8mb4 あたりまえですが、そのまま登録されます。 mysql> insert into utf8mb4 (c) values ('美味しい🍣と🍺'); mysql> select * from utf8mb4; +--------

先日公開した「誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック」という記事が、予想を遥かに超えて様々な方から多くの反響をいただきました。現時点での結果としてわかりやすい数字をご紹介すると、はてなブックマーク（通称はてブ）でブックマークされた数が約4900、Facebookでのシェア数が約11000、Newspicsでのシェア数が約6000となりました。 キャリア論、精神論、自分語りは、実力を兼ね備えた人の話しか影響力はありません。冷静に考えて、特に名があるわけでもない一介のWeb製作者の私が自分の経験談を語っても参考にならないため、極力このブログでも避けてきました。しかしこうした結果が生まれた今なら、自分自身のキャリアと行動を振り返って、自分なりのアウトプットに対する考え方をお話するのも良いかと考えました。 このエントリーで私が伝えたい結論は「他人に影響を与える

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利

アメブロでReactやIsomorphic Web Applicationを採用した理由――その成果と構成技術：大規模ブログサイト表示速度改善 大解剖（1）（1/2 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。初回は、Isomorphic Web Applicationについて。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介していきます。連載第1回では、Isomorphic Web Applicationについてお伝えします。 Amebaでは、これまでリッチなユーザー体験を実現するために、さまざまな取り組みをしてきました

Reactとは――その3つの特徴 「React」はFacebookが公開している、ユーザーインタフェース（以下、UI）を効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）です。 Reactには、次のような特徴があります。 シンプル Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できます。 叙述的 コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになります。そのため、効率的にレンダリングさせることができます。 コンポーネントベース 「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができます。コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすく

Justin Lee, Kurt Bollacker, Oz Raza, Ujjwal Sarin, and Alex Milowski on September 19, 2023 Our journey building our service deployment system and tools by leveraging Kubernetes and Knative Ariadne: building a custom observability UI for personalized search Navigating and troubleshooting complex ML and engineering systems, especially those with numerous components, can often be an intricate and cha

For those who attended my talk at Data Day Texas in Austin last weekend, you heard me talk about how Stitch Fix has reduced contention on: Access to data Access to ad-hoc compute resources to help scale Data Science. As attendees requested, I have posted my slides here, which you can find a link to at the bottom. For those that weren’t at my talk, here’s a brief background to the slides; they shou