はてなブックマーク

※ 本記事は useState, useEffect, useContext 等の Built-in Hooks については理解していることを前提としています。 React v16.8 でリリースされる予定(元はv16.7だったが延期)の Hooks 機能ですが、その醍醐味は Custom Hooks にあると思います。 しかし慣れない内は Custom Hooks を作るのは難しいと思いサンプルを集めました。眺めることで Custom Hooks の勘所のようなものが掴めればいいなと。 TL;DR サンプル集のセクションを参照 Custom Hooksとは Custom Hooksとは特定の Hooks API のことではなく、それらを組み合わせて作る独自のHooksです。 簡単な例をあげてみます。 メールアドレスとパスワードがある入力フォームの場合、 Built-in Hooks だけ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

No OSS, No Life. これはOSS紹介 Advent Calendar 2017 の24日目の記事です。 2017/12月中旬にFacebookがリリースしたドキュメント管理ツールDocusaurusを試してみて、なかなかよかったので紹介記事を書きます。 DocusaurusはGitBookと同種のツールですが、（素の状態では）GitBookよりちょっと高機能という印象です。 こんな感じのドキュメントが手軽に作られます。 公式ドキュメント: https://docusaurus.io/ （これ自体もDocusaurusで作られています） リポジトリ: https://github.com/facebook/docusaurus 特徴とか機能とか マークダウンで書ける レイアウトをReactで書ける 検索機能 i18nにも対応 バージョニング対応 GitHub Pagesに簡単に

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

↑のGitHubのContributions Graph(GCG)のようなヒートマップカレンダーを出力するReactコンポーネントのnpmモジュールを作ってみました。 使い方なんかはREADMEを見ていただければいいんですが、この記事ではコアのロジック部分を解説してみます。特にReactは関係ないので、他言語や他ライブラリでも実装できると思います。 ちなみにGCGは svg を使っていますが、react-heat-calendarは table タグを使っています。 きっかけ （この節はポエムなのでスキップ推奨です） 2017年1月初旬にJSer.infoのダッシュボードが公開されました。興味深く見ていたのですが、ビジュアル的にちょっと寂しいなーと思い、ヒートマップカレンダーを表示するようにコントリビュートしようと思いつきました。 で最初はダッシュボードのレポジトリ内に実装していたのですが

GetWild Advent Calendar 2016 の 4日目に ！！！！げっ！げっえんたー！！！！げっ！げっげっ！！！！げっげっげっ！ ！！！！げっげっげっえんたー！！！！げっ！わいーげっ！！！！げっ！えんたー！！！！！げっ！げっ！ ！！！！！わいーげっえんたー！！！！！えんたーわいー！！！！！！えんた ーわいーげっ という記事が投稿されていた。 このタイトルおよび本文は任意の文字列を ！ , げっ , わいー , えんたー に置き換えたものだけど、面白そうだったのでrubyで復号してみた。 と言っても単純で、逆のことをするだけ。 input = "！えんたー！！げっげっ！えんたー！えんたー！！げっわいーえんたーわいーわいー！わいーわいー！げっわいー！げっ！えんたーわいーわいー！わいーえんたー！えんたー！！げっわいーえんたーえんたー" binaries = input.gsub("

一月程前にフロントエンド関連ツールの状況についてインターネットでアンケートが実施されました。このアンケートは去年も行われており、今年は4,715人の回答が得られたようです。 集計結果が公開されたので、ざっくりまとめてみようと思います。というか半分は感想です。 主観が入り恣意的になる部分もあるかと思います、ご注意ください。また原文も大変興味深いと思いますので、ご興味・お時間のある方はぜひ。 Q1. フロントエンド全般について経験年数 1-2年が約20%、2-10年の中堅が約60%、10年以上が約20% CSS Q2. CSSのレベル 中上級者が90%。 経験年数とレベルがある程度比例するとして、大体1年以上で（少なくとも自分では）中級と思うということか。 Q3. CSSプロセッサの利用状況 sassの一強。しかし、2015年との比較では全て若干減少している。 まだ少数派だがPostCSSが延

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Electronでシンプルな動画プレイヤーを作ってみたので、その機能記事と技術記事を書こうと思います。本記事はその技術編です。 使用した主な技術要素などは以下です。 Electron 説明するのも野暮だと思うので概要だけ。 Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。 Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。 開発元はGitHub社です

mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す 以前からmermaid.jsを使ってたけど、ブラウザ上でしか使えず不便だなと思ってました。 そんなおり、上記の投稿を見ました。しかし残念ながらAtom editorのパッケージは紹介されておらず、探してもAtom用は無さそうでした。 そこで自分で作ってみました。 パッケージレジストリにも登録しているので、Atomから[Preferences -> install]で"mermaid"と検索すると、ヒットします。 正直なところ、現状はまだかろうじてプレビューが表示されるという状態で、図が小さくて見にくかったり、まだまだ改善点があります。 もし使っていただけて何かあればGithubにissueを立ててくださると嬉しいです。 ちなみにGithubでは無理して適当英語を使ってますが、issueは日本語でも大丈夫です！

Atomのバージョン1.0でパッケージを作った時のメモ ひな形を作るには、コマンドパレットから Package Generator: Generate Package を実行 開発ツールは cmd + option + i で開く。(あとはGoogle Chromeと同じ感じ) package.json に dependencies 等を追加したあとは、コマンドパレットから Update Package Dependencies: Update を実行。(node_modules配下に格納されるので、ブレイクポイントの設定等も可能) リロードは、コマンドパレットから Window: Reload を実行。（[View -> Developer -> Open In Dev mode...]で開けばいいよ、という記事も見たけど自分の環境だと怪しかったので、毎回リロードするようにした。。。）