Reactハンズオンラーニング 第2版 - hitode909の日記
ひさしぶりに学習した。 Reactは2015年くらいには、趣味でVRハウスを作ったり、QRコードを読めるページを作ったり、仕事でも使ったり、React鳥貴族っていう名前のただの飲み会に行ったりと、しばらくは触っていたのだけど、チームの異動があって、最近は主にjsx-domという、JSXを書いてBabelを通すとcreateElementに変換してくれる、という独特の世界観のJSXを書いたりしていた。 jsx-domは、Styled Componentsを使えたり、useRefを使えたりと、ちょっとReactのエッセンスは吸われているものの、単にcreateElementしてくれるだけで、差分レンダリングとかは当然できない、という、シンタックスシュガーとしてJSXを使える、というもので、偶然発見して、React非導入アプリケーションにとっては便利じゃん、って使っていたけど、身の回りに使ってる
未知の道に突入せず、まずは半分知ってるくらいの状態になる - hitode909の日記
Perl製アプリケーションからGraphQLを喋ってみたい、ということがあって昨年末に2週間くらいでプロトタイピングしていた。 CPANにGraphQLというライブラリが公開されていて、社内の利用実績もあるので、これをいきなり使ってみても良かったのだけど、自分はGraphQLについては、耳では知っていて、GitHubのAPIを呼び出したことがある、くらいで、実際に実装したことはなかった。 このような状態で突き進むと、問題に遭遇したときに2パターンの怪しさが出てきて、切り分けていくことになる。未知のものが多すぎて、プロジェクトXの、トンネルを掘るだけで難しいのに現地の言葉はわからない、みたいな回をイメージしてください。 GraphQL自体への理解が間違っているパターン スキーマ、クエリの書き方が悪い、概念を勘違いしている、など PerlでのGraphQLライブラリの使い方が間違っているパター
コードを書くには連続した2時間が必要 - hitode909の日記
ある日の午後のスケジュールは、30分ミーティングx2→30分自由時間→そして1.5時間ミーティング、その後は30分自由時間と30分ミーティングを繰り返して定時を迎える…みたいな様子だった。案の定、自由時間で意味ある仕事を進めることはできなかった。 自由な時間が30分あれば、チャットを読んだり、コードレビューしたり、グループウェアを見て回ったり、とかはできる。コードを書くにしても、ここをこう変えれば良いことがわかっていて、書くだけ、とか、ライブラリのバージョンアップ、くらいなら30分で書いてpushしておいて、次の30分でテストが落ちたら直したりして、と進められる。 しかし、そういうことより難しいことをしようとすると、30分だと、さて、問題がどういうものかは分かってきたので、どうしようかな、というあたりで時間切れになってしまう。1時間あれば、ようやくコードを書き始められるかな、というところで
VSCode ExtensionのBookmarksが便利 - hitode909の日記
VSCodeで長いコードや入り組んだコードを読んでいくときに、さっき読んでたあれはどこに行ったっけ、となって困っていた。ファイル名を手元のテキストファイルにメモしたりしていたけど、ところでさきほどのメモのタブはどこにいったのか…と混乱していた。 エディタ内にブックマークを作れる拡張があるに違いない、と探したらBookmarksという拡張があった。 その名の通りで、行に対してブックマークを追加できる。サイドバーのBookmarksタブからブックマーク一覧を参照できる。 ここのテストは後で直しそうだな、と思ったらとりあえずブックマークしておく、みたいに使えて便利。 marketplace.visualstudio.com 追記 コメントで偽物の拡張があると教えてもらった。たしかにインストール数が100くらいの同名の拡張がありました。どのような挙動をするかは分かっていません。GitHubのリポジ
海外旅行のしおりをScrapboxで作ったはいいが旅先でオンラインになれるかはわからない、というときに便利なやつを作った - hitode909の日記
標記のとおり、新婚旅行のスケジュールとか宿泊先とか、ここに行きたいとか、緊急連絡先とか、ありとあらゆる情報をScrapboxにまとめたものの、旅先でうまいことオンラインになれるかはわからないので、エクスポートしてダウンロードしたJSONをlocalhostで見るためのアプリケーションを作った。 以前Scrapbox記法をMarkdownに変換するやつを作っていたので、それを使ってMarkdownに変換したあとShowdownでHTMLにレンダリングして表示している。 github.com 様子 ターミナルから起動すると8080番で起動するという、旅行グッズとは思えないアーキテクチャになっている。 PAGES_JSON=~/Downloads/hitode909.json npm run start トップページ 最近更新した順にページが並ぶ。 MaterializeのCSSを読み込んでいる
突然シェルのhistoryが消えてめっちゃつらい - hitode909の日記
突然シェルのhistoryが消えてめっちゃつらかった。学生の頃に、漢のzshという連載を見て、シェルのヒストリは無限に大きくすべしというプラクティスを実践していた。それ以来、10年間くらい育ててきたけど、今朝見たら突然15KBになっていた。偶然Dropboxに残ってるのを復元したけど、直近5年分くらい消えてしまった。数ヶ月ぶりにTimeMachineのディスクをつないでみたらそもそも認識されなくて、ディスクごと壊れてるようだった。バックアップはリストアできないと意味ない。 思うのが、シェルの履歴という形で各自が有用なコマンドを保持していて、消えて困っているのがおかしい。リポジトリごとにhistory置き場となるウェブサービスを作ってどんどんpushしていくような形とか、エディタのランチャから起動するだけで開発が完結するとか、現代的な形は考えられると思う。昔はsshですばやくサーバーに接続し
一人で仕事してると不安になる現象 - hitode909の日記
ソフトウェアを作っていて，一人でずっとやってると不安になったり，他人がずっと一人でやってると心配になったりする． ふつうのチーム開発では，仕様や方針は皆で合意が取れていて，実装したところは「きのう話していたこの部分を作ってきました，レビューしてください」みたいな話をする 一方で，チームでやっていても，一人で仕事していたら，「実は私はこういうことをやっていて，その上で，この部分を作りました，仕様を理解した上でレビューしてください」みたいな話になる このとき，「実はこういうことをやっていて」という部分を一人でやっていると，見逃していたり，誤解していて，前提から間違っていて，まったくもってだめ，という可能性が上がっていく 一人で作り続けると，一人につき1回10%間違えるとしたら，2回一人で作ると，0.9*0.9=0.81くらいの精度に下がっている 設計段階で二人で見ていれば，間違う可能性は1-0
Flow練習した - hitode909の日記
Flowはfacebookが作ってるJSに型を書けるやつ． 今日ちょっと練習してみたところ良かった．練習に手頃なところから型でも書いてみるかとやっていたところ，FormDataにFileをappendするところで，それはFileじゃなくて?Fileで，nullになる場合もあるのでおかしいよって教えてもらったりした．型をつけるだけで不具合が見つかって，こういう世界もあるのか，という感じだった．fileがなかったらreturnする処理を足しておいた． ちょっとずつ書いていけるのがよくて，このファイルは難しいことをしていて型が付くと恩恵を受けられそう，とか，このあたりはこれからがっつり開発するので先に型を付けておこう，といった進めかたができる． 最初はちょっと慣れない部分もあったけど，ちょっと練習したら普通に書けるようになった．シンタックスがちょっと増えるので，どこまでJSのシンタックスで，どこ
はてなブログのAMP対応で学ぶウェブサービスのAMP対応 - hitode909の日記
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．このあと14時から品川のマイクロソフト様のオフィスでおこなわれている，YAP(PはパチモンのP)Cで発表します． この記事では，発表資料を公開いたします．現地の方は今すぐCルームに来てください．そうでないかたは懇親会でお会いしましょう． はてなブログのトピックもあるようです． トピック「YAPC」 #yapc8ojic のツイート はてなブログのAMP対応で学ぶウェブサービスのAMP対応 2016/07/03 YAP(achimon)C::Asia Hachioji 2016 mid in Shinagawa hitode909 自己紹介 id:hitode909 @hitode909 京都から来ました はてなではてなブログを作っている 自己紹介 YAPC 2015でベスト
Perlのモジュールを静的解析してPlantUMLでクラス図をレンダリングするやつ - hitode909の日記
仕事のコードで，子クラスがたくさんいる難しいクラスがいて，継承関係を整理したいけど，どこがどうなってるのか一見すると分からなかったので，静的解析してクラス図をレンダリングするやつを作った． github.com package2plantumlclassdiagramっていうコマンド(長い)に，このファイルたちをレンダリングしてくれ，って渡して，PlantUML形式のファイルを作る PlantUMLでPNGとかに変換 という手順で使う． % package2plantumlclassdiagram ~/Plack/lib/**/**.pm > plack.plantuml % GRAPHVIZ_DOT=$(which dot) plantuml -charset UTF-8 -tpng plack.plantuml Plackのソースコード全体をレンダリングするとこんなかんじで，継承してる
70ページでドメイン駆動設計の要点を押さえられるDomain-Driven Design Reference - hitode909の日記
Domain-Driven Design Reference，Amazon見てたら発見して，安かったから買ってみた． ぺらっとしてて，ポケット索引集みたいな雰囲気．エリックエヴァンスのドメイン駆動設計から，要約が抜粋されていて，70ページくらいで，重要な概念を押さえられる．原著は著者の経験を語ってくれるコーナーが大半を占めるけど，この本ではバサッと切られて，定義だけが載ってる． 前の本から10年くらい経ったので，新しい内容も増えてる．ドメインイベントとパートナーシップ，巨大な泥団子．いずれも実践ドメイン駆動設計に出てきた． これだけ読んでドメイン駆動設計さあ始めよう，とはならないだろうけど，でかい本読みたくないけど議論には参加したい，とか，どんなものか軽く眺めたい，みたいな人が読むにはてっとり早いかもしれない． 唯一役立ったのが前書きで，エリックエヴァンスのドメイン駆動設計の本のことをTh
YAPCでベストトーク賞いただきました #yapcasia - hitode909の日記
国内最大級の技術カンファレンスであるYAPC::Asia Tokyoで発表して、なんとベストトーク賞をいただきました。 まさかんなことになるとは！！ありがとうございます！！！ 資料作ってるときは、こんな話ぜんぜんおもしろくないのでは、とか、発表時間たりないのでは、とか、なにかと不安でしかたなかったけど、意外とうまくいった。 オブジェクト指向やドメイン駆動設計を使って、ていねいにモデリングすれば、最高のソフトウェアを作れるっていう話をして、共感いただけたようでうれしい。 賞品でSurface 3とかKinectとかもらえるようなので、特定の踊りをするとデプロイが始まるとか、ロールバックの踊りとか、そういうものを作りたい。 instagram.com 発表資料はきのうの日記に貼っています。hitode909.hatenablog.com 今日のTシャツはこれです。めっちゃかわいいと思う。XLな
YAPCでおもしろ発表してきた - hitode909の日記
YAPCでおもしろ発表してきた． はてなブログの開発を振り返って設計の進化と最高の設計を紹介するという話． speakerdeck.com なぜか大人気発表みたいになってて，会場満員で，すみませんこんなところに来ていただいてすみませんというかんじだった． 紹介した本はこちら．予約投稿で仕込んであって，発表終わったら，こちらから買ってくださいとかやろうと思ってたけど，すっかり忘れてた． YAPCの発表で紹介した本 - hitode909の日記 質問たくさんいただいて，よいかんじにおさまったと思う． 「難しくて挫折するという問題がありますよね」「歯を食い縛って実装しろって書いてあった」 #yapcasiaE— そらは (@sora_h) 2015, 8月 21 Q: 「コメントの良い書き方は？」 A: 「オブジェクト指向入門下巻に書いてあります」 ↓ 「買って読みます。」 #yapcasiaE
きれいなコード - hitode909の日記
これまで、きれいなコード書くにはどうしたらいいか考えてたけど、そんなことではいけないと思った。 ソフトウェアとして意味があるためには、誰もこれまでに書いたことがない、すばらしい働きをするコードでないといけない。 めちゃくちゃいい働きをするコードができたら、あとできれいにすればよい。誰にでもきれいにできるような些細なところはほっといて、本質的に難しいところを解決したほうがいい。 どんなにコードがきれいでも、正しく動かなかったり、使用に耐えないくらい性能が低くてはしかたがない。また、普通に動くソフトウェアは世界中に普通にあるから、それを超えるすごい便利さとか、使いやすさとか、他にこんなのはないとか、なんかそういうのがないと、作る価値はないと思う。 ということを思った。最近難しいことをいろいろやってて、夕方にはくたびれてくる。そこそこいいけど、まだめちゃくちゃよくはないから、もう一声という感じ。
Quyo作った - hitode909の日記
開発合宿で作ったQuyoをはてラボでリリースした．捨てた物の思い出を投稿できるサービス． Quyo | つづろう、モノの思い出 リリースの告知はこちら． つづろう、モノの思い出──新サービス「Quyo」をはてラボにリリースしました - Hatelabo Developer Blog メンバーは大承認と同じで，エンジニアをid:shimobayashiさんと2人でやって，デザインをid:ueday，あとリリース時にはドメインの用意をid:y_uukiさんに手伝ってもらった． 前回の開発合宿と同じアーキテクチャで，すばやく作る作戦で，開発合宿は3日間あるのだけど，2日目の午後には社内リリースして，合宿中に社内でワイワイ遊んでもらいながら開発も続ける，という作戦を展開した．プロトタイピングに向いた構成で，層は薄く，テストは書かない，という作戦． 作戦考えた これは開発中に昼休みに睡眠する様子．前
■ - hitode909の日記
今日テストなくてめちゃくちゃに壊れてるアプリケーションのテストを一から書いてて、わりと書けてよかった。午前中セットアップに手間取ってて、午後からテスト書き始めて、小さいアプリケーションだったのでC0 90%くらいまでいけた。3年間くらいテストないせいでびくびくみんな触っててめちゃくちゃに壊れててよくなかった。テストえいって書けば書けるんだから、隙を見て書いていきたい。ずっとテストのあるWebアプリケーション眺めてるのでだんだんコツが分かって気がする。まず最初にCIに載せて、カバレッジ測れるようにする。面倒だけど、これやっておくと後で役立つ。普通にテスト書くと、実行環境までは定められないけど、CIがあれば、そこをベースに議論できる。最初は、アプリケーションのルートのモジュールをuse_okするだけ、くらいでまず通して、カバレッジも取れるようにする。たとえば、MyAppっていうアプリケーション
ページャNight - hitode909の日記
朗報 以下に発表内容を記事にまとめたのでご覧ください． はてなブログ編集画面JSのページャ見どころ紹介 #pagernight - hitode909の日記 ページャNightっていう異常な勉強会でLTするために東京来た。発表したのは、Docker入門じゃなくて、はてなブログの編集画面のJSでページャ作ってるところの見どころ紹介と、jQuery Deferredを使った遅延リストの紹介、という感じ。遅延リストGitHubに上げたからいきなりプロダクションで使ってみてほしい。GitHub - hitode909/jquery-lazylist: Lazy list built on jQuery Deferredまともな人はDocker学びにいってて、雑な感じの人とかインターネットの人が多かった気がする。インターネットの人、普段インターネットで見てるけど、会うと全然違う話するのでおもしろい。
失敗する前提でデプロイする - hitode909の日記
うちのチームでは，デプロイするたびに自動的にgitのtagを切るようにしてる．たとえば，いまデプロイしたら，deploy/2014-02-01-14-48とか． たまに，リリースした直後になんかミスってたことに気付いて，慌ててロールバックすることがある． tagを切ってるので，ひとつ前に戻せばいいのだけど，えっと，どれだっけとかいって探すので慌てるし，普段はタグ指定してデプロイしてないので，どうやって戻すか忘れる． デプロイ終わったときに，今回のデプロイを戻すには，これをしましょう，とか表示するようにした． デプロイ終わったらこんなのが出る．前回のデプロイが昨日だったら昨日くらいのタグが出る． ヒント：戻すときは以下のコマンドを実行しましょう cap -S revision=deploy/2014-01-31-15-17 deploy 実装方法としては，こんな感じに，デプロイ前に最新のタグ
CasperJSで気軽にJSのテストできる - hitode909の日記
ウェブアプリケーションのJSのテストするのにCasperJS使ったら便利だった． CasperJSはPhantomJSにテスト用ユーティリティがついて便利になったやつ． JS，MVCできれいに書いてると，Modelの単体テストとかできるけど，昔ながらの感じだと，ここをクリックしたらこれが表示されること，みたいなテストを書くことになる．けどライブラリとかいろいろあってどれを使えばよいか分からなくて敷居が高い．CasperJSを使ったらこれだけで完結してテスト書ける． PhantomJSは単なるブラウザだけど，CasperJSはテストのフレームワークとか，DOMのテスト関数とかがついてる． 非同期なタスクの実行の仕組みも入ってて，casper.thenっていうのを順番に書いていくと，順番に呼んでくれて，click()して，casper.thenしたら，ページ遷移したら次のページに移動してる．ス
PhantomJSでページに注釈を付けてスクリーンショット撮るやつ - hitode909の日記
WebOverlayっていうツールを作った．指定されたURLのページを開いて，要素を囲んでラベルを載せて，スクリーンショットを保存してくれる便利ツール． GitHub - hitode909/web-overlay: Annotate A Web Page and Take a Screenshot with PhantomJS. ためしにAppleのトップページの画像を囲んだ様子． こういう設定ファイルをWebOverlayに渡して実行するとimgタグが赤い線で囲まれてそれぞれ右下にimageっていうラベルがついたスクリーンショットが出てくる． { "url": "http://apple.com", "overlays": [ { "selector": "img:visible", "label": "image", "type": "all" } ] } 例だから画像を全部囲んでみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
