正規表現の「先読み（lookahead）」「後読み（lookbehind）」について紹介します。 正規表現の「位置へのマッチ」 正規表現は、文字列のパターンマッチに使われます。たとえば [0-9]{4} は数字4つが並ぶ文字列にマッチする表現です。 多くの正規表現は「文字列」にマッチしますが、「文字列」ではなく「位置」にマッチする表現があります。これは、アンカーと呼ばれます。また、長さ0の文字列にマッチすると考えて、ゼロ幅アサーションとも呼ばれます。 アンカーの例として、^（先頭）$（末尾）\b（単語の境界）などがあります。 この例では、cat にはマッチします。一方、category や concat は cat を含みますが前後が単語の境界になっていないためマッチしません。 先読み 先読み（lookahead）は、位置にマッチする記法の一種です。位置の指定に正規表現を使います。(?=
DnD は考えることが多い。大抵のライブラリは特定のユースケースにべったりで、毎回自分で書く羽目になる。 とくに、木構造の DnD をどう表現するかが難しい。特にWeb上でファイラーのようなUIを実装する頻度が高く、その求められる実装が毎回違うので、自分が考えていることを一般化してみる。 この記事はコードをコピペしたら使えるものではなく、あくまで考え方をコードに落としたもの、ということに注意。 今回は前提として、こういうものを作っていた。 DnD の要件 DOM ベースの sortable ライブラリはいっぱいあるが、DOMをマスターデータとして扱うタイプが多く、現代のフレームワークと噛み合わない。可能な限りデータを元に表現して、最後に変更したデータを render するだけとする。 フレームワーク非依存な処理を切り出して、UIを通さずにテストを書いたり、ポータブルに扱えるようにしたい。
Building a sidenav component Stay organized with collections Save and categorize content based on your preferences. In this post I want to share with you how I prototyped a Sidenav component for the web that is responsive, stateful, supports keyboard navigation, works with and without JavaScript, and works across browsers. Try the demo. If you prefer video, here's a YouTube version of this post: O
過去にWordPressを題材にしていろいろな脆弱性のケーススタディを取り上げました。 Webアプリケーションの脆弱性ケーススタディ（WordPress編） Webアプリケーションの脆弱性ケーススタディ（WordPress編その２） 今回は、ReDoS（Regular Expressions DoS）について取り上げてみたいと思います。ReDoSとはOWASPによると以下のように記載されています。 The Regular expression Denial of Service (ReDoS) is a Denial of Service attack, that exploits the fact that most Regular Expression implementations may reach extreme situations that cause them to wor
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
先日、私はBrightonで開かれたJavaScriptのカンファレンスFFConfで「(ここにライブラリやフレームワークの名前を入れる)を使おう。これこそ最強中の最強中の最強だ！」と題して話をしました。 ここに、そのプレゼンテーションの内容を書き起こします。もっと注目されるべき、最近のモバイルデバイスのフレームワークにかかるコストに関して、議論を広げる一助となればと思います。 2015年11月16日更新 – テーブルに1行、プロダクション環境下のReactについての行を追加しました。良いニュースをお伝えしますと、これはvanillaよりも3倍遅いですが、TodoMVCに関して言えば速いと言えます！PolymerのTodoMVCサンプルも最新バージョン1.2.2にアップデートされ、同様により速くなりました。 読むよりも見たい方へ、講演のビデオはこちらです。（必要なら、 スライドも入手できま
Node.js Advent Calendar 2015の7日目の記事です。遅刻してごめんなさいごめんなさい。 sinopiaをs3対応して記事を書こうと思ったのですが、思ったより手こずってしまい、ESLintの2系のalpha版が出たので、そちらについて調べました。 ESLint v2.0.0-alpha-1 released 新しいルール 下記のルールが新しく追加される。 array-callback-return Arrayのfilterやreduceなど、callback内で値を返す必要があるのに返してない場合にエラーを出す。 no-implicit-globals 暗黙的にグローバルに定義されている変数がある場合にエラーを出す no-restricted-imports 任意のパッケージのimportを禁止する prefer-rest-params ES6のRest Parame
このような表を作ることで、例えば以下のことがわかります。 経路002は流入数の割に獲得効率や翌日継続率も悪い。ここを改善するサービスをグロスできるかも。 経路003は獲得効率と翌日定着率が良い。何が良いのかをさらに分析すれば、他の流入経路の改善に生かせる。 Action2は翌日継続率に良い結果を与えている可能性がある。もう少し詳しく調べてみたい。 このようにユーザーの活性化は流入経路別に分析をすることで、問題点やチャンスを浮き彫りにすることができます。 今回はこの表を作るためにログ分析を行います。 ここまでで分析のスタート地点とゴール地点がわかりました。 あとはその間の道をつなぐためにプログラムを書くだけです。 次の章では、MongoDBでの分析を行うための準備段階を紹介します。 分析（準備編） ここでは分析の準備編として、サーバーログをダウンロードしてきて、整形して、MongoDBに登録
![[MongoDB] フロントエンドエンジニアにもできるMongoDBを使ったログ分析 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/b26f45930fdedd4f83a397a5ca31bdc522aa697b/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.yoheim.net%2Fimage%2F348.jpg)
正規表現は様々なプログラミング言語やツールで利用できる、文字列の検索や置換に不可欠の存在といっても過言ではないかもしれません。 「Regulex」はその正規表現を可視化して分かりやすくグラフとして表示してくれるサービスです。 文字列で正規表現を入力すると対応したグラフが表示されるので、複雑な正規表現も直感的に理解できます(?)。 例1 例えば「(a|b\d+)*c」をビジュアライズすると以下のようなグラフが作られます。 グループがあってその中でaまたはbと数字の繰り返しがきて、最後にcがくる…というような正規表現が、グラフ化されました。 例2 もう少し簡単な例「abc\d+」を考えると次のようになります。 abcがきて、最後に数字の繰り返しが1回以上くる…。ということが直感的に理解できます。 まとめ 作成した正規表現グラフはイメージとして出力したり、サイトに埋め込んだりもできます(Java
こんにちは。給料日だ！ きたけーです。 巷で噂のReact.jsに触れるために必要最低限なものを用意してみました。 とりあえずはじめる ライブラリをCDNから取得するかんじで、こんな具合です。 JSXTransformerを読み込んでいるのでJSXからJSへの変換を勝手にやってくれます。 内容はカウントするだけの単純なもの。 HTML <!DOCTYPE html> <html> <head> <title>React sandbox</title> </head> <body> <div id="main"></div> <script src="http://fb.me/react-0.12.0.js"></script> <script src="http://fb.me/JSXTransformer-0.12.0.js"></script> <script type="text/j
クロージャはわかりづらい。 なんでかと言うと、以下の２つです。 名前 定義がよくわからない Wikipediaさんなんかで調べると。 クロージャ（クロージャー、英: closure）、関数閉包はプログラミング言語における関数オブジェクトの一種。いくつかの言語ではラムダ式や無名関数で実現している。 関数閉包!! 関数閉包、意味不明すぎる。なんかこの字面が意味分からなくしようとしているような気配すら感じる。（とはいえ、じゃあどんな名前が良いかと言えば、わかりませんし。それに一般的には「クロージャ」で通っていますから、別にいいのですが。） 関数ヘイホウってなに？初めてクロージャを学ぶような僕は、もう、むしろ笑えます。ちなみに、その先の**「関数オブジェクトの一種」とか「ラムダ式」**なんかも知りません。 けど、JavaScriptのクロージャの事例は、とても分かりやすい。 関数の中に関数がありま
JavaScript (Node.js) で開発する上で避けては通れない 非同期処理、コールバックについて考えてみたい。 自分なりのお勧めの方式を書いてみた。 いろいろなものを試した結果である。 ※この記事でのお勧めの方法は ES2015 (ES6) で実装された generators (yield) の技術を使用しています。 実はまだ Babel(6to5) 等を利用するか Node.js v4～v8 でしか 実質的に使用できない技術だと思います。悪しからず。 (早く全てのブラウザに広く普及する事を祈っています) まだブラウザでは独自ライブラリか Promise (Deferred) 等を使っています。 ※2015/10/15: 記事の内容を npm aa (async-await) に対応させました。 ※2015/04/19: 記事の内容を npm co@4 に対応させました。 ※20
![[JavaScript] 非同期処理のコールバック地獄から抜け出す方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f663d25f2912af4849a690fcc94d049628ce353c/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTYxMjglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODE3Nzg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjAwMGE5MTAzMzIyMDk0M2M3ZjQ3NjQ3OTEyM2VmNjM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D675f62b48b0f92263d3cf310a1ce071a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOSU5RCU5RSVFNSU5MCU4QyVFNiU5QyU5RiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBRSVFMyU4MiVCMyVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVBRiVFNSU5QyVCMCVFNyU4RCU4NCVFMyU4MSU4QiVFMyU4MiU4OSVFNiU4QSU5QyVFMyU4MSU5MSVFNSU4NyVCQSVFMyU4MSU5OSVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTg5MjM0YTRkYmUwOWZlMGEyNDhlODIwNjkwNTRkNjgy%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBMaWdodFNwZWVkQyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWFjN2FmMTI0YjNkN2I4NWFjZjAxZjNmODNkMDJiZTE1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D3ec0d914b8688b86a6dc14b0b44b43ae)
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
Rは統計解析のブッシュナイフだ 実践！ Rで学ぶ統計解析の基礎（1） オープンソースの統計処理言語・環境の「R」を使って実践的な統計解析のテクニックとリテラシーを習得しよう！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
