こんにちは、@yoheiMuneです。 React.jsでイベントバブリングを抑止する方法を、ブログに書きたいと思います。 目次 何が問題か イベントバブリングを抑止しないと、クリックされた要素の親の要素のClickイベントまで発火してしまいます。 例えば、ul -> liの親子関係のあるDOMがあるとします。 class Greeting extends React.Component { onClickUl(e) { console.log('<ul> was clicked.') } onClickLi(e) { console.log('<li> was clicked.') } render() { return ( <ul onClick={this.onClickUl}> <li onClick={this.onClickLi}>Good morning.</li> <li

こんにちは、最近Python三昧の@yoheiMuneです。 今日はFlaskアプリケーションにおいて、チェックボックスなど同じname属性で複数存在するものの扱いについて、ブログを書きたいと思います。 目次 今回扱いたいこと 以下のようなフォームとHTMLがある場合に、同じname属性の値をすべて取得する方法をFlaskで実装します。 <form action="/regist" method="POST"> <label><input type="checkbox" name="fav" value="1">ラーメン</label> <label><input type="checkbox" name="fav" value="2">うな丼</label> <label><input type="checkbox" name="fav" value="3">メロン</label> </

こんにちは、@yoheiMuneです。 今日は前回のPython入門に引き続き、リスト内包表記というPythonの素敵な書き方をブログに書きたいと思います。この書き方を本で見て、Pythonを使えるようになりたいと僕は思いました（ミーハーですねw）。リスト内包表記が書けるようになると、後述の通り色々とメリットがあるのでぜひ学んでみてください。 https://flic.kr/p/24JYSq 1行で書くリスト処理 さっそくリスト内包記述（list comprehension）を扱いたいと思います。今回は以下の配列データを扱うこととします。 data = [1, 2, 3, 4, 5] この配列について、各要素の値を2倍にする処理を通常のfor文で記述すると、以下のようになります。 # data配列の中身を2倍にする newData = [] for d in data: newData.a

こんにちは、@yoheiMuneです。 JavaScriptで日付を扱う際に、数行コードを書けば、任意の日付を取得できます。今日はその実装方法をブログに書きたいと思います。 目次 解決したいこと JavaScriptを用いて、今日、明日、昨日、月末、月初、などの任意日付を取得したいけど実装方法が分からない、という悩みを解決したいと思います。LP制作やアプリ制作で日付を扱いたいこともしばしば。そんな時に役立てたらと思います。 本日を取得する JavaScriptで日付を扱う場合、Dateクラスを利用します。Dateクラスのインスタンスを作成すると、現在日時を取得できます。そこから、本日を取得します。 // Dateクラスのインスタンスを作成. var now = new Date(); // 本日を取得する. var todayString = now.getFullYear() + '年'

こんにちは、@yoheiMuneです。 Pythonのjsonモジュールを使うといい感じにjsonが扱えますが、dateやdatetimeなどのJSONに定義されていない型は、はうまく文字列に変換できません。今日はその対応Tipsをブログに書きたいと思います。 目次 json.dumpで、dateやdatetimeはエラーになる こんな感じにエラーになってしまいます。 import json from datetime import datetime # datetime型を含むdict item = { "dt" : datetime.now() } # JSON文字列にしようとするとエラー jsonstr = json.dumps(item) """ Traceback (most recent call last): File "<stdin>", line 2, in <modul

こんにちは、@yoheiMuneです。 Pythonのお仕事では必ずと言っていいほどお世話になるrequestsモジュールについて、使い方をブログに書きたいと思います。 目次 requestsモジュールとは requestsモジュールは、HTTP(s)通信を行うためのライブラリで、標準であるurllibよりもかなり使い勝手良く、HTTPリクエストを発行することができます。かなり便利なので、僕はPythonの案件ではよく利用しています。 インストール インストールは、pipコマンドからインストールすることができます。 $ pip install requests requestsモジュールの基本的な使い方 例えばGet通信を行う場合には、以下のように使うことができます。 # requestsモジュールの読み込み import requests # Basic認証（user/pass）でGET

こんにちは、@yoheiMuneです。 Reactのお仕事をやっていて、日々試行錯誤してます。JSX内で条件分岐を表現する方法についてブログに書きたいと思います。 目次 何がしたいのか HTMLを出力するrenderメソッドで、この条件ならこのUI、別の条件なら別のUIを出したい、ということは良くあると思います。それをReact.jsではどのように表現するのかについて、ブログにまとめておきたいと思います。 JSX内で条件分岐を表現する5つの方法 よく使われる手法として、5つあります。状況に応じて必要なものを使えたら良いと思います。 方法1：即時関数を使う JSX内で即時関数を書き、その中で条件分岐を表現できます。 class Hello extends React.Component { render() { let isMorning = true return ( <div> {(()

こんにちは、@yoheiMuneです。 本日はライトなネタですが、Pythonで数値を3桁カンマ区切りにする方法をブログに書きたいと思います。 方法は簡単で、format関数を使うことで数値の3桁カンマ区切りを実現することができます。 # 3桁カンマ区切り >>> "{:,}".format(12345678) '12,345,678' # 小数ありもできる >>> "{:,}".format(1234.5678) '1,234.5678' # 少数部分は丸めるのもできる >>> "{:,.2f}".format(1234.5678) '1,234.57' と、こんな感じで実現できます。その他にもlocaleを使う方法や正規表現を使う方法、自作関数を使う方法など、以下の参照リンク先には載っていますので気になったら見てみてください（個人的には上記のformat関数を使う方法で十分♪）。 参照

[Selenium2] Seleniumでスマホの自動テスト！！Chromeを起動する、スマホテスト用にユーザーエージェントや画面サイズを変更する こんにちは、@yoheiMuneです。 ブラウザでのテストを自動化できるSeleniumというツール。 今回はそのツールで、Chromeを起動したり、ユーザーエージェントを上書きしたりする方法をブログに書きたいと思います。 Seleniumとは Seleniumとは、ブラウザの描画テストや動作テストを自動化できる便利なツールです。 Javaなどでテストコードを記述することで、ブラウザ起動、ページ遷移、ボタンクリック、などを自動で行うことが出来ます。 Seleniumにについてブログを記載しておりますので、詳細はそちらが参考になれば幸いです。 - [Selenium2] Webテストを自動化に挑戦！！基本編 - [Selenium2] 自動テスト