はてなブックマーク

JSXの事始め Reactを勉強し始めに 「JSXとはなんぞや」 というのを理解するとき 「なんとなくHtml風に書けるJavaScriptの拡張構文」 と理解している人が多いと思う。 ただ 「JSXはJavaScriptに変換される」 というのをどこかで勉強しないと途中でつまづくので、JSXについての理解をもう少し深める必要がある。 JSXはJavaScriptに変換される babelの変換結果を見れば一発なのだけど、JSXを書いているとき、babelでは次のように変換しているのだということを理解しておく必要があるんだけど、これについて解説しているものがあまりない。 例えば次のコード

やりたいこと CSSのプロパティを自動ソート（reorder）したい reorderするメリット 順番を気にせず書いて楽できる スタイルの無駄な重複を防げる 読みやすくなる gzipサイズが減りやすい 使用ツール stylelint を使って自動修正する。 大昔は CSScomb を使っていて、少し前は stylefmt を使っていた。 今は stylelint に --fix オプションがついて stylefmt が不要になったので、 stylelint --fix をそのまま使う。 なお prettier では reorder を実装するつもりがないので出来ない。 理由についてはこちら。 https://github.com/prettier/prettier/issues/1963 stylelintのorderモジュール選定 stylelint 自体は order plugin が

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

自己紹介 渡辺 貴明 EngFrontend follow me! アジアクエスト株式会社 フロントエンドエンジニア 今日の話 React未経験者が、 Reduxのプロジェクトにスムーズに参加するため 何をしたか？ 想定する状況 ソースはreact-redux-universal-hot-example を元に複雑にした感じ 大事 アーキテクチャはこんな感じ これから物量をこなす段階 新しく人を追加する ES5のjsはできるがReact触ったことない 必要なこと Reactを覚える必要がある Reduxも覚える必要がある BFFでのAPIの叩き方も覚える必要がある ES2015も覚える必要がある 問題 Reactだけ覚えても仕事に入れない 丁寧に覚える時間はない しかし、覚えないと渡せる仕事がない やったこと 専用のチュートリアル的なものを作成 最小構成のサンプルを作って真似して書いてもら

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactのアニメーションを攻略する 仕事でReactのアニメーションをするにあたり、 やりたいことを満たすために旅立った冒険記。 やりたいこと 要件 要素の追加・削除時にアニメーション リストではない複数要素を別々に動かす きもち カジュアルに使いたい 要件満たすために余計な記述はしたくない。可能な限りシンプルに保ちたい。 DOMに依存したくない Universalにしたいので、style弄りはVirtualDOM経由が原則。 ロジックで制御したい 複雑化への対応や保守性を考えると、絶対JSで全てコントロールできた方がよい。 汎用性の

皆さんもうES2015は大丈夫でしょうか？（私はいまだに理解が怪しいものがあります） 今回はES2015にもES2016にもES2017にもまだない、 だけどよく見る構文を3つ紹介したいと思います。 Rest/Spread Properties (stage-3) spread operatorのオブジェクト版（初見殺しと言いつつ、1つめは大したことなかった）。 配列や関数の引数に対する（...）はES2015で追加されたんですが、 オブジェクトに対する（...）はまだ正式な仕様になっていません。 （...）をオブジェクトに対して使うと、以下のようなコードが書けるようになります。 // Rest Properties let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x; // 1 y; // 2 z; // { a: 3, b: 4 } /

作りました。 https://github.com/nabepon/puredux npmにも公開しました。 https://www.npmjs.com/package/puredux 追記 最初6kbだったのが、replaceChildren実装して7kbになりました。 概要 Reactライク、7kb、ReduxのためのView。 Reduxを使うには「stateが更新されたら、viewを更新する」この仕組みがあれば十分です。 より純粋に、ES5でもReduxプロジェクトを始めることができる。 Pureduxは、この達成のために作りました。 JSXやVirtualDOM、複雑なコンパイラ、巨大なランタイムは不要です。 ピュアなJSと、ピュアなReduxで、ピュアなfluxを始めることができます。 背景 Reduxを使うにはReactやVue、RiotなどのViewが必要になります。 しか

今回は、いかにReduxがフレームワークではなくライブラリであるか、 というのを感じてもらう内容になっています。 Reduxは大変？ 皆さんReduxに興味はありますか？ Reduxの記事を読んでみたり、実際に試したことがある人は 「たくさん覚えるものがある」 「結構難しい」 「React使わないといけないし使い方が限定される」 そんな印象を受けたんじゃないでしょうか。 私は仕事でReact+Reduxを使っているんですが、なかなか難しいなぁと感じています。 ES2015、React、Webpack、Babel、そのほかのReduxをサポートする様々なライブラリ・・・ 多くのものが合わさった結果、「Reduxは大変だ」という印象を抱くに至りました。 Reduxはすごく小さい 余計なものが多くあるせいで複雑に感じるRedux。 ですが、Reduxだけでコードを書くと、こんな風になります。 b

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は フロントエンドエンジニア Advent Calendar 2016 の10日目の記事です。 最近はずっとReact、Redux、CSS Modulesで開発していて、コンポーネントについて考えることが多かったので頭の中の考えをアウトプットしてみます。 それぞれのモジュール化 みなさん、次のようにモジュール化を行っていると思います。 HTML Reactなどのコンポーネント化のライブラリを使う 何かのテンプレートエンジンでパーシャルにする CSS パーツ毎にclassを作る SASSのmixinにする JavaScript 関

CSSを扱いし者たちに課せられた永遠の呪縛。 「CSS簡単でしょ」と思ってる人のコードが混じる恐ろしさ。。。 2016年、全てのCSSの戦友たちに言っておきたいことがある。 今回、それらを３つのポイントに分けてお届けします。 この記事は CSS Advent Calendar 2016 の10日目の記事です。 １．本当に怖いぞ - グローバルCSS 時は200X かつてCSSは様々なファイルに分かれておりました。 Common.css、Layout.css、Top.css、Info.css、Shop.css・・・ ページやモジュールごとにcssを分割し、必要に応じて読み込んでいた時代です。 この時代はCSSがいくらユルユルな仕様とはいえ、まだ平和でした。 つまり、読み込んだCSSファイル同士の関係さえ知っていればよいのでした。 201X 前期　(2010〜2013年ぐらい) CSSを1ファ

GitHubはこちら 概要 MOCSS（モックス）は、CSS Modules、BEM、SMACSSに影響を受けて作られた、コンポーネント志向のCSS設計です。コンポーネントが持つ保護と再利用という2つの性質を分けることで、強固さと柔軟さを兼ね備えました。 背景 BEMやSMACSSなどでCSSに秩序がもたらされたものの、ウマく対応しきれない部分もあって結構不満も感じてました。BEMは命名が冗長だったり、SMACSSはあまり強固でなかったりなどなど。それに対し、CSS Modulesは結構よかったです。CSSの問題をよく分かってる感があります。ただWebpackとJSXを前提としているので、自分の範囲だと採用できるプロジェクトが限られてしまっています。 以前自分が設計した方法だと、CSS Modulesのようなコンポーネント志向でCSSを書くことができ、それは結構うまくいっていて、しかも他で