フロントエンドエンジニアが伝えたい最近の事情 という内容で発表しました 2018.kphpug.jp スライドはこちらです speakerdeck.com 内容 普段 JavaScript を書いていない PHP エンジニア向けに最近の流れの速いフロントエンドについて全体像をさらっと紹介す…

最近、仕事やプライベートで取るメモに何を使うか考えていて、とりあえずこの方法で1ヶ月くらい運用して問題なかったのでまとめました。 TL;DR Github の private リポジトリで管理すると良さそう メモ機能に求めるもの 自分がメモ機能に求めるものはこんな…

短いですが、開発中に何度もぶつかったのでログとして残しておく。 ReactNative で、react-native run-ios の実行時に No bundle url present というエラーが出た時の解消法 rm -rf ios/build を実行して react-native run ios を再実行

最近は facebook や instagram などを中心に多くのアプリでも見るようになってきた、読み込み時に表示される UIプレースホルダー。（スケルトンデザインとも言うよう） ページ読み込み時のユーザーの体感速度を高めるための一つとして有効な手段です。 そん…

こんな感じで画像の縦横比を変えずに指定したサイズにリサイズする React Component を作りました。 横長画像の場合 縦長画像の場合 画像の長辺を枠に合わせ縦横比を変えずに画像全体が枠内に収まるようにリサイズするものです。 画像の縦横比を保ったままの…

@keyframe を使ってCSSだけで背景画像を作成しました animation と @keyframe を使用するとCSSで簡単にアニメーションが実装できます。 このサイトを作成する際に animation と @keyframe を使用したのでその使い方を紹介します。 Elastic | A collection of…

HTMLとCSSだけで作成したインタラクティブなボタンをまとめたサイトを作成しました。 HTMLとCSSのみで作れるボタン集 | CSS Buttons 個人的に使いやすいと思ったものや面白いものをまとめています。 デザインやアニメーションは全てCSSのみで実装しているも…

CSS3で追加された線形グラデーション linear-gradient と円形グラデーション radial-gradient を使用すれば、さまざまなパターンを表現することが可能です。 これに background-size プロパティを組み合わせれば、CSSだけで背景画像を作成することができます…

warning内容 以下のwarningの消し方に結構詰まったので共有。 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips dev…

webpackとは http://webpack.github.io webpackは依存関係のあるJSやCSSなどを、まとめてくれるビルドツールです。 webpackにはLoaderという仕組みがあり、ソースコードに適用する処理を柔軟に設定することができ、 そのLoaderを使うことで、scssやJSXなどで…

ESLintの導入 まずはnpmからESLintをインストール $ npm install --save-dev eslint eslint-plugin-react 設定ファイルの生成 ESLint の魅力は、ルールを自由に設定出来ることです。 設定ファイルの生成は --init を使って設定ファイルを作成すると簡単です…