はてなブックマーク

こんにちは！雨の日はReact。Mizutani(@sirycity)です。 今日はreact(というかJSX)にCSSを適用する時に使うstyleについてです。styleは無駄にいろんな書き方があるので順番に色々見ていきましょうね 概要 一番簡単な書き方はこう。 <div style={{ color: 'red' }}>りんご</div> style={{ CSSのプロパティ: 'CSSの値' }} みたいな感じ。簡単だね。2つあるブレース{{}}はこんな感じに理解するといいと思う↓ 外側のブレースは「この中にJavaScriptを書く」って意味 内側のブレースはJavaScriptのオブジェクトを表す って感じ。 初級編 styleに書くのは基本的にはcssと一緒。だけどいくつか注意点があります。 まずひとつ目。CSSの値はクォートで囲もう。囲まないとCSSの変数扱いになるからね。こ

こんにちは！エンジニアになったきっかけはブラッディ・マンデイでした。Mizutani(@sirycity)です。 今回はJavaScriptでmapとfilterを両方使いたくなった時について、4通りの書き方を比較しながら見ていきましょう。 結論 flatMapが使える環境ならflatMap一択 まとめて書きたいならreduce 見やすさ重視ならmapしてからfilter 速度重視ならfilterしてからmap はじめに 今回比較する書き方4通りはこちら。 filterしてからmapする mapしてからfilterする flatMapだけを使う reduceだけを使う 検証 mapとfilter両方使いたいケースって言われてもピンとこない？そうだよね。 例として今回は「都道府県一覧から県以外を除外し、かつ語尾に「知事」を付けて出力」みたいな処理にします。つまりこんな感じ。 const pr

こんにちは！npmはGitHub、そのGitHubはMicrosoftってことでフロントエンド周りをMSが制覇しつつある今日この頃を感じるMizutani(@sirycity)です。あとVSCodeとTypeScriptもMicrosoftだね！ 今日はそんなMS帝国の一角、npmとそのライバル yarnについてです。僕は最初npmを使っていて、yarnが出たタイミングで乗り換えたけどまたnpmに戻ってきました。そんな話。 npmとyarnについて npmとyarnについてざっくり説明します。 npmはJavaScriptの公式パッケージマネージャーです。結構昔からあるやつ。yarnはJavaScriptの非公式パッケージマネージャーです。後から出てきたやつで、npmの弱点を補うようなやつです。ソフトウェアあるあるだね。 yarnの方が良い所 機能としてはyarnの方が優秀と言って良いと思

こんにちは！React、Vue、Angularの説明をする時にゼニガメ、フシギダネ、ヒトカゲに例えるとウケが良いことに気づきました。Mizutani(@sirycity)です。 今日はReactとvueそのものの比較ではなく、そいつらを使ったフレームワークとかライブラリの比較です。沢山あるから自分の確認含めてざっくり書いてきますわ。項表題をクリックすると公式に飛べるで。 初心者向け reactとかvueを初めて触る人によく勧められるフレームワーク？です。機能はそんなにないけど分かりやすいやつ。 create-react-app react初心者にぴったり。まずはここから始めよう！ってやつ。僕もフロントエンドエンジニア2年目でこれやった。 逆に言えば、これは完全に学習用にした方がいいです。ルーティングやSSR等、本番運用しようとすると欲しいものがないです。ここでreactの基本を理解したらg

2020-6-5追記: Reactでも同じ記事書いたよ！ こんにちは!今日はVueの動的クラス(:class)の書き方3通りについて紹介します。 静的なclass(通常のclass) 通常のclassを用いる方法は通常のhtml、cssと全く同じよ。こんな感じ <div class="red">りんご</div> .red { color: red; } 動的なclass(v-bind:class) 動的なclass(dataによって値が変わるclass)を用いるにはv-bind:classを用います。こんな感じ <div v-bind:class='"red"'>りんご</div> .red { color: red; } vueでは v-bind: を省略して : のみにできるのでこんな風に書けます。実際はこの書き方の方が多いっすねー <div :class='"red"'></div

2019/09/17 Vue JavaScript Others WordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編 こんにちは！今日は先日書いたブログをNuxt.jsとContentfulベースから Hugoベースに移行した理由について書きます。 まずはWordpressじゃ駄目だった理由 ブログと始めるにあたってまず思いついたのがwordpressです。 シェアも多分WPが圧倒的です。…が、WP使う気はなかったです。 個人的な理由は…↓ DB周り詳しくない WPはMySQL使います。といってもそんな難しくないんだけど、 SQLとかRDBMSにそこまで詳しくない人が触ってるとなんかのエラーが起きたときに対応できない気がするんだよなー 遅そう(MPA) MPAだとやっぱ再描画とかに時間かかりそう(多分) WPは特にDBを基に動的にレン