Loading...
Flowはいまのところマジ大変。どうやら一番成長の速い時期にぶつかってしまったらしく、わからないことを調べても皆がバラバラなことを言ってたりして困る。サンプルで数行のお試しコードを書いてる分にはハマりどころも少ないんだけど、ちゃんと出来上がってるアプリケーションに適用するとなると数日の試行ぐらいではまだ怪しげ。 // @flow import * as React from 'react'; import { reduxForm, Field } from 'redux-form'; import { Card, MenuItem, FlatButton } from 'material-ui'; import { SelectField, TextField } from 'redux-form-material-ui'; import部分だけ抜き出しましたが、いきなりここからつまずきま
SPAを考える会 (D3勉強会 2016.10.06) by @kitaly (twitter: @kita_ly) 自己紹介 @kitaly Twitter: @kita_ly ソフトウェアエンジニア REST API開発 (Scala/Play) SPA開発 (TypeScript, Angular.js, React.js) ビズリーチ HRMOS プロダクト開発部 採用管理 (2016年6月リリース) 勤怠管理, 評価管理, その他HR系サービス (Coming Soon..) 過去の発表資料 サーバサイドエンジニアが 1年間まじめにSPAやってみた ビズリーチではDBFluteハンズオンやってます はじめに React / Redux / Webpack 前提の話ですが 他のコンポーネント志向FWなどでも、ユースケースやワークフローは応用可能だと思っています 新しいツール
概要 javascriptのObjectのキーについて。 ES2015(ES6)からkeyでの変数展開が扱いやすくなっていたので紹介する。 ES5まで ES5までは他の軽量言語みたいにキーの変数名を入れると展開された変数ではなく、変数名がそのまま入る仕様だった。 だから以下のようにすると多くの場合期待通りでないObjectが返る。 var myValue = "this_is_value"; var myKey = "this_is_key"; var obj = {myKey: myValue}; // => {myKey: "this_is_value"}
Flow typeでReactコンポーネントのchildren属性の型を記載する方法をメモする。 普通の書き方 import * as React from 'react'; type Props = { children?: React.Node, }; function MyComponent(props: Props) { return <div>{props.children}</div>; } ある種類の子コンポーネントのみを許可する 下記はReact.ChildrenArray<React.Element<typeof TabBarIOSItem>>でTabBarIOSItem型のみを設定できる。それ以外のものが内包されたら、flow checkエラーとなる。 import * as React from 'react'; class TabBarIOSItem extends
ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計?なにそれ?おいしいの?」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー
[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではあまりないと思うので、実質この組み合わせは必須のようになってくる気がしている。 それで、Prettierとはなんぞや…JSのコードフォーマッタで、、というPrettierの概要についてはググればめっちゃ出てくるので省略。 この記事は導入したいけどなにをどうすればいいんやという人向け。 と
Arrow Functions in Class Properties Might Not Be As Great As We Think Disclaimer: This article was written in 2017 and may not be representative of the current state of technologies. Since the last year, the Class Properties Proposal simplify our life, especially in React with the internal state , or even with statics ones like propTypes and defaultProps. Furthermore, Class Properties/Property Ini
緊急地震速報について¶ 緊急地震速報は、気象庁から発表される地震動の警報・予報のことで、震源に近い観測点でとらえた地震波(P波、初期微動)から震源要素等(震源・規模・発生時刻)を瞬時に推定し、強い揺れ(S波、主要動)の大きさおよび到達時刻を知らせるものです。 本サービスは、緊急地震速報(予報)を用いて受信地点における震度や到達時間を予測してお知らせするものです。 本データタイプ:"earthquake"は、気象庁が定義する 「一般向け予報」 を提供するサービスです。 「特定向け予報」のサービスが必要なお客様はお問い合わせください。(離島などの1つの観測点の観測データに基づく予報を必要とする場合) 注意事項¶ 本サービスは、地震の発生を予知するものではありません。本サービスの出力は、気象庁が発表する緊急地震速報(予報)に含まれる予報資料(震源の位置・深さ、地震の規模、発生時刻)を用いて、気象
flow-typed とは flowtype で外部ライブラリを使うと欲しくなってくる型定義ファイルを集めたリポジトリになります。TypeScript には DefinitelyTyped という型情報のリポジトリがありますがそれと似たようなものです。 flowtype/flow-typed on GitHub このリポジトリではそれらの型定義ファイルをプロジェクトで使うための便利な CLI ツールも npm 経由で提供しています。本稿は flow-typed をプロジェクトで使っていくまでの設定やセットアップについて短く解説します。 CLI ツールのインストール README.md には準備が整ったら npm に公開するよ、と書かれていますが、すでに公開されていて主要な機能は使えているので npm からインストールします(2016-06-12 時点で 2.0.0-beta.5)。 特にプ
こんにちは、ほそ道です。 今回はFunction.prototype.bind関数を取り上げます。 このbind関数も前回のcall/apply関数同様、開発者の意図が反映される関数かと思います。 目次はこちら bind関数の仕様 bind関数はFunction.prototypeに属し、新たな関数を生成して返します。 下記で仕様を見ていきます。 その1:thisを強制変更する 第一引数は関数内で参照されるthisを置換えます。 // 人間 function Man(name) { this.name = name; this.greet = function() { console.log("Hello, my name is " + this.name); }; } // ネコ function Cat(name) { this.name = name; } // 人間の挨拶 var
どうも、まさとらん(@0310lan)です! 今回は、Webサービスやアプリ開発などにとても便利なJavaScriptライブラリを厳選してご紹介しようと思います! 強力な独自機能を簡単に追加できるものやトレンドに合わせたWebデザインを構築できるもの、そのままWebサービスとして利用できるものまで、ピックアップしてみました。 これからWeb開発を始めようという人はもちろんですが、開発ネタに困っている人も何か良いアイデアが発見できるかもしれないので、ぜひ参考にしてみてください! ■波形表示やプレイヤーも作れる高機能な音楽ライブラリ! 【 wavesurfer.js 】 音声ファイルを読み込むだけでグラフィカルな波形表示が可能で、多彩なオプションを利用することで自在に音声を制御できるJavaScriptライブラリです。 音声の再生・早送り・巻き戻し・ミュートなどの基本機能はもちろん、音声の書き
フロントエンドエキスパートチームの小林(@koba04)です。 2/1にReact.js meetup #5をサイボウズで開催しました。 当日は雪が降っていましたが、会場がいっぱいになるほどたくさんの人に集まって頂きましてありがとうございました。 https://reactjs-meetup.connpass.com/event/76375/ Contributing React! @koba04 最初に、まず私から「Contributing to React!」というタイトルで、Reactにコントリビュートする方法を紹介しました。 Reactにコントリビュートしようと思っても、コードが複雑でどうしていいのかわからないということもあると思います。 そのため、コントリビュートするための第一歩に必要な情報について紹介しました。 Reactでは、good first issueというラベル以外に
LearnCode.academy とは? www.youtube.com LearnCode.academy という YouTube チャンネルがあり,Vue.js や React + Redux などを解説した,無料の学習動画が公開されている.今回受講したのは「Vue Tutorial」で,全9回となっている.合計しても「約1時間程度」なので,スキマ時間を活用して気軽に学ぶこともできる.「Vue.js は気になるけどまだ試したことがない」という人にオススメ! Vue Tutorial #1 - Vue JS Tutorial for Beginners #1 setting up an app Vue Tutorial #2 - Vue.js filters and computed data Vue Tutorial #3 - Vue.js directives and event
「React v16が出たぞやったー」ってなって早速yarn upgradeとかすると、こういうエラーで死にます。 FAIL src/App.test.js ● renders without crashing Enzy […] 「React v16が出たぞやったー」ってなって早速yarn upgradeとかすると、こういうエラーで死にます。 FAIL src/App.test.js ● renders without crashing Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })` before u
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く