はじめに こんぬづは、ゲーム用のPCを東京に置いているため、実家に帰ってくるとゲームができなくてしんどい田中です。こういうときに限って、ゲームの実況動画を見てしまったりして余計に心を痛めています。 さて今回は、今年正規表現をサッと確認するのに重宝した Regexper を紹介します。 Regexper こんなサイトです。とてもシンプル。 以下のような特徴があります。 正規表現を図で表示してくれる 表示した図をダウンロードできる 正規表現を図で表示してくれる 入力欄に正規表現を入力して、Displayボタンを押すと、以下の画像のようにその正規表現のパターンを図示してくれます。 どんな範囲でパターンマッチしてくれるのかがとても見やすくなります。 表示した図をダウンロードできる 入力欄の右下にあるDownloadボタンを押せば、表示した図をダウンロードすることができます。 例えば正規表現の仕様を

エンジニアもプレゼン入門！ LT（ライトニングトーク）のテーマ選びから、スライドの作り方まで LT（ライトニングトーク）は、 カンファレンスなどで実施される短時間のプレゼンテーション。エンジニアにも避けて通れないプレゼンの経験を積むには絶好の機会です。LTに挑戦したい若手エンジニアに、気をつけるべきポイントをお伝えします。 エンジニアとして仕事をするときにも避けて通れないのがプレゼンテーション。ディレクターや営業などの他職種のメンバーに対して技術側から説明すべき場面や、提案をしたい場面で必要になるでしょう。技術力を高めるだけでなく、新人のうちにプレゼンテーションにも慣れて苦手意識をなくしたいところ。 しかしながら、業務中に自分からプレゼンテーションの機会を作るのは難しいでしょう。そこで、LT（ライトニングトーク）をうまく活用することをおすすめします。 今回はLTに挑戦する際に気をつけると良

WebデザインとJavaScriptの技術があれば、デスクトップアプリも自在に作れる時代です。ElectronとReactを使って、SoundCloudの音楽を自由に再生できるデスクトップアプリを作ってみました。 本記事はMark Brown、Dan Prince、Bruno Motaが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 GitHubが開発したElectronは、Webデザインのスキルを存分に活用し、クロスプラットホームで軽快に動くデスクトップアプリを作成できます。この記事では、ElectronをReact、ES6、SoundCloud APIと組み合わせて、デスクトップでお気に入りの曲を流せるスタイリッシュな音楽ストリーミングアプリを作る方法を紹介します。また、この音楽ストリーミングアプリをパッケージ

コロンビアの帽子を36選紹介します。レディース・メンズ兼用ものとキッズものを公開！サイズを確認し合うものを選びましょう！コロンビアの帽子は種類が豊富なので、夏の紫外線対策や登山で便利な防水ものもあり様々です。自分の用途に合うものを選ぼう！

ウエストポーチ（ウエストバッグ／ヒップバッグ／ボディバッグ）は、普段使いから旅行、登山といったアウトドアアクティビティまで幅広く使え、ひとつあるととても便利。モンベルやパタゴニア、マムートなど、人気のアウトドアブランドより、レディース・メンズ問わず使えるおすすめのウエストポーチを一挙ご紹介します。撥水素材や軽量モデルから大きめサイズまで、自分にぴったりのデザインがきっと見つかるはず！

月間350万人が訪れる日本最大級の登山メディア『YAMA HACK』の運営＆記事編集担当。山や登山に関する幅広い情報（登山用品、山の情報、山ごはん、登山知識、最新ニュースなど）を専門家や読者の皆さんと協力しながら日々発信しています。 登山者が「安全に」「自分らしく」山や自然を楽しむサポートをするため、登山、トレイルランニング、ボルダリングなどさまざまなアクティビティに挑戦しています。 ...続きを読む YAMA HACK編集部のプロフィール

var Component = React.createClass({ componentDidMount:function(){ this.setState({stateKey1: "value1", stateKey2: "value2"}); }, のようにコンポーネント作成後、任意のタイミングで指定します。 (componentDidMountというファンクションはReact.jsが用意したファンクションで、コンポーネント作成後に実行されるようになっています) stateに値を設定する場合は、setStateを使うようにします。 this.state.stateKey1 = "value1" という書き方は認められていないようです。 値の取得 セットされた値を取得する場合は、単純です。 render:function(){ return ( <div> <span>title:{t

2016年4月7日（木）に待望のメジャーバージョンとなる「React v15」がリリースされました。それに伴いReactの公式サイトのチュートリアルもv15に合わせて若干内容がアップデートされたので、改めてReact v15のチュートリアルの日本語訳をアップしておきます。 2016年10月にReactの公式チュートリアルがリニューアルされました。最新の「React」の公式チュートリアルの翻訳記事は以下となります。 Reactチュートリアル: Intro To React【日本語翻訳】 – maesblog React.js React v15での変更点で特記すべき事項は以下の通りです。内部的な変更がメインとなっています。 Reactの吐き出すコードにidが付与されなくなったReactの吐き出すテキストのブロックにspan要素が含まれなくなったspanやnoscriptとして吐き出されていた

Reactである配列を元にリストを表示させることは多いかと思います。双方向データバインディングのAngularだと、このリストを簡単に絞り込んだりソートしたりすることができますが、Reactでリストを絞り込んだり、並べ替えたりする場合は、どうすればよいのかということを試してみました。自分なりの実装方法をまとめてみたのでご紹介します。 サンプルまずはサンプルをご確認ください。keyとvaluを持ったオブジェクトの配列を、入力フォームに入力したワードで絞り込んだり、さらにkeyとvalueを昇順、降順で並び変えたりすることができます。これをReactで実装しています。 maechabin/filter-by-reactjs: filter & sort by ReactJS – GitHubJavaScriptで配列の絞り込み機能を実装するまずはReactで絞り込み機能を実装する方法を説明する

YAMA HACK（ヤマハック）は、登山に興味のある人のために情報を発信する日本最大級の登山WEBメディアです。「登山をしている人やこれから始めたい人が、それぞれの方法で安全に山を楽しめるようにする」をモットーに、山の知識と楽しみかたを専門家や読者の皆さんと協力して日々発信しています。登山用品、山の情報、山ごはん、安全に登山を楽しむための知識やノウハウや最新のニュースまで、山や登山に関する情報が充実。あなたの知りたいや悩みを解決する情報がきっと見つかるはずです。

山や山道と人間の体の直接的な接点となるのが登山靴です。普段歩くアスファルトで舗装された道ではなく、路面が凸凹していたり石や岩で不規則になっている傾斜がある道を、重い荷物をせおって歩くため、スニーカーのような普段はいている運動靴でも耐久性は十分とは言えません。 登山初心者の方は最初はスニーカーで代用してもよいですが、継続的に登山をする場合は必ず登山靴を購入しましょう。 普通の靴で登山を行うと靴が壊れやすく、靴底も滑りやすく、ソールも固さが十分でないため足の裏が痛くなりやすいです。登山靴の選び方を間違うと、疲労が倍増したり、体のバランスもとりずらくなってしまい、結果的に怪我につながる可能性も高くなります。 初心者の方はしっかり知識を身につけて自分に合う登山靴を探しましょう。

今世界で、ストレスを減らすためのあるプログラムが広がっている。欧米の名だたる大企業が次々に導入。学校でも、そして刑務所のような場所でもこのストレス解消法が使われている。最新の脳科学でも驚くべき効果が実証されたこのプログラムとは？そして、なぜ効果があるのか？一方、宇宙空間では、これとは別のストレス対策が大きな成果を上げている。宇宙飛行士たちが取り組むこの方法とは？ さすがＮＨＫというか、ちゃんと先端の研究紹介になっていて面白かったです。 再放送は 第一回は６月22日（水）の0時10分 第二回は６月25日（土）の0時10分 なのでぜひご自身で見てほしいのですが、自分用に内容まとめておきます。 第一話で、ストレスが脳に与える深刻な影響を紹介しており、 第二話ではその対処法として「コーピング」と「マインドフルネス瞑想法」が紹介されています。 「コーピング」はご存知な人が多いと思うので「マインドフル

マインドフルネスって？ マインドフルネスって最近よく聞きませんか？ 怪しいんじゃないかと思っている人もいるかもしれませんが、ぜんぜん怪しくありません。 社会で広まりつつあります。 先日は、NHKでも放送されています。 www.nhk.or.jp Googleでも社内教育として採用されているようですね。 グーグルのマインドフルネス革命―グーグル社員5万人の「10人に1人」が実践する最先端のプラクティス（付録：マインドフルネス実践ガイドCD） : サンガ編集部 : 本 : Amazon よく聞くけれど、実際のところどうなんだろう？　っていう人は多いと思います。 なので、まずはやってみよう、実践あるのみ！　ということでマインドフルネスを1週間続けてました。 結果として、やってみてよかった！　と感じています。 マインドフルネスの方法 「グーグルのマインドフルネス革命」を参考に行いました。 buzz

こんにちは。昨日は子どもの通院のためお仕事をお休みして過ごしました。 疲れが溜まっていてストレスも感じていたので、「このタイミングでコーピングを試してみよう！」と、思いまして、まずは気晴らしリストを作りました。 前回までの続きはこちら。 ライフイベントストレスチェックで298点だった私は、意識的にストレスを発散させないとすぐにストレスが溜まっていくようなので、自覚を持って気分転換をしていくことにしました。 スポンサーリンク コーピングの方法 番組で紹介されていたコーピングの方法は、以下のような手順になります。 気晴らしの方法をリストアップする ストレスが発生したときにコーピングを試してみて、どの程度効果があるのかそれぞれ点数化する 点数ごとに分類し直す ストレスに見合った解消法をその都度試していく 継続してコーピングする ここ大事。気晴らしの方法を用意するのは「タダ」です。お金はかかりませ

2016年5月11日、米GitHub社から「Electron 1.0」がリリースされました（参照「Electron 1.0 - 公式ブログより」）。合わせて周辺ツールとして、ElectronのAPIが学べるアプリの「Electron API Demos」、デバッガーの拡張機能の「Devtron 1.0（デブトロン）」、テストフレームワークの「Spectron 3.0（スペクトロン）」が同時に公開されています。 今回は周辺ツールの中の1つ、Devtronについて紹介します。Devtronを使うと今までのElectronのデバッガーの[Developer Tool]本体だけでは検証しづらかった部分が可視化されデバッグできるようになりました。具体的には、「不要なコードが混入していないか」「不要なイベントを登録していないか」「バグを引き起こすプロセス間通信はいつ起こったか」「アプリに本当に必要な機

昨日に引き続き、NHK「シリーズ　キラーストレス」を観ていました。 www.nhk.or.jp 本エントリーは 第2回 「ストレスから脳を守れ ～最新科学で迫る対処法～」についてのまとめと、すぐに始められるストレス対策をご紹介します。 前回のまとめはこちら。 目次 今回紹介されたストレス撃退法 心の病「うつ病」の原因とは 「過去の苦しみ、未来の不安」もストレスの原因に 「我慢するストレス」と「頑張るストレス」は身体の不調が異なる ストレスに強い・弱いってあるの？ 宇宙飛行士のストレス対処法「コーピング」 コーピングで前頭葉の活性化が進み、扁桃体をコントロールできるようになる マインドフルネス・ストレス低減法 マインドフルネスの方法 ストレス社会を生き抜くには意識改革が必要 関連ページ 今回紹介されたストレス撃退法 今回紹介されたストレス解消法は主に2通りで、双方うまく活用しながらストレス社

jsonを返すAPIを使用して、チュートリアル+αの画面を実装してみます。 前提知識・単語 実装しながら読んだほうが理解しやすいと思います。 React.jsのadventカレンダー コンポーネント 画面を構成している要素。React.jsは画面をコンポーネントと呼ばれる要素に分けて実装します。 http://qiita.com/koba04/items/4f874e0da8ebd7329701 コンポーネントのライフサイクル propとstate http://qiita.com/koba04/items/bc13d1f42964278ae14e (prop) http://qiita.com/koba04/items/63267bcc918d76ac8767 (state) 1. 画面をコンポーネント分けする reactJSは画面を構成している要素ごとにパーツ分けをし、コンポーネントと

はじめに 初心者による初心者のための記事 React.js公式チュートリアルの和訳風 ES6 さらっと仮想DOM調べてみたよ、ぐらいの人向けです。 JavaScript初心者、ES6初心者、React初心者向けかつ僕がそうです。 なので間違いがあるかもしれません。見つけたら教えて下さい。 公式のチュートリアルはこちらです。 React Tutorial React チュートリアル (和訳) 公式Documentのソース (Markdown) 環境 Mac OSX Node.js v0.12.7 Gulp 3.9.0 React 0.13.3 作るもの 公式のTutorialに沿って、シンプルなコメントボックスをReactで作成します。 次の機能を提供するものです。 すべてのコメントの表示機能 コメント投稿フォーム バックエンドサーバーとの連携 また、次の特徴を持っています。 更新最適化:

ECMAScriptとは ECMAScriptはJavaScriptの中核仕様を抜き出して標準化したもの 開発当初のJavascriptは、ブラウザによる独自の拡張が多く、互換性が低かったため、Ecma Internationalが中心となりECMAScriptが開発された ES2015 (ES6)とは 先日策定された、ECMASCriptの6th Editionのことであり、当初はES6と呼ばれているが、正式名称をECMASCript2015(ES2015と呼ばれる)とし、今後は年単位のリリースを予定しているとのこと [公式サイト]http://www.ecma-international.org/ecma-262/6.0/index.html ES2015で可能となる新たなシンタックス let・constキーワードによる変数宣言 class構文 関数の引数のデフォルトパラメータ（Def

いまさら聞けないElectronとは Electronは、クロスプラットフォーム向けのデスクトップアプリを開発できる、オープンソースソフトウェア（OSS）の開発プラットフォームです。HTML、CSS、JavaScriptといったWebフロントエンド技術を使って開発できるという特徴があり、Node.jsとChroniumで動作する、WindowsやMac（OS X）、Linuxなどのデスクトップ向けアプリを開発できます。 Electronは米GitHubが開発しており、「Atom」「Slack」「Visual Studio Code」などメジャーなデスクトップアプリで使われています。 2016年5月11日、Electronのメジャーバージョン「1.0」が公開されました。また、Electron製アプリの検証やデバッグなどを行うことができる「Devtron」のメジャーバージョン「1.0」、テステ