Nuxt.jsアプリのStorybookで画像を読み込む
- 2018.10.01
Nuxt.jsアプリケーションのStorybookで画像を読み込む小ネタを紹介します。 問題 Storybookで静的ファイルを読み込むには、-sオプションを使用します。 Nuxt.jsだとassets配下に静的ファイルを置くと思いますが、以下のようにすると、Storybookでassets配下がホストされるようになります。 { "scripts": { "start […]
フロントエンド
Redux/Vuexでのプルリクエスト粒度の考え方
- 2018.08.31
状態管理のライブラリを使用している場合、基本的にコードの記述量は増えるので、PRを分けたほうが好ましい。今回は普段意識しているPRの分け方を書いてみた。 1.State設計とViewの実装で切り分ける これは最もベーシックな切り方で、以下のような分け方になる。 主なロジックが入るStateの設計でまず1PR 一般的にはStateの写像となるViewで1PR 2.Stateで切り分ける Stateに […]
Three.jsでシェーダお絵かき環境を作ってみた
入社して約2ヶ月になりました、フロントエンジニアの内山です。 リモートワークという働き方は自分に合っているようで、とても快適に過ごしております。 プライベートの時間もだいぶ確保できるようになったので、趣味のプログラミングも捗るようになりました。 今回は、最近取り組んでいる「シェーダーお絵かき」についてご紹介します。 シェーダーお絵かきとは シェーダーお絵かきとは、 3DCGの表示などで使われるシェ […]
Karmaで行なっていたUIテストにStorybookを導入した
- 2017.10.04
今回、SPAにStorybookによるUIドキュメントを導入した。これまではKarmaでUIテストを行っていたが、ドキュメントをつくったことにより、Karmaが担っていたことをいくつか吸収できたかなと思う。今回は、Storybookを導入してよかったことを書いてみようと思う。 KarmaだけのUIテスト まず前提として、コンポーネントごとのUIテストとして、Karmaを使用していた。具体的には以下 […]
ReduxをREST APIと使う時の命名のコツ
- 2017.08.09
概要 今回は、REST APIに対してReduxを使用する場合の命名のコツを書いていきたいと思う。 リソースにあわせてconstantsをつくる 前準備として、リクエストの状態を表すconstantsをつくっておく。 基本的にREST APIを扱う時は、ロジック側はAPIリソースに合わせた命名にしておく。こうすることで、サーバーサイドの世界とコンテキストを切り替えることなく作業できて、混乱を避ける […]
Serverless Framework+Node.jsをつかったLambda関数の開発フロー
- 2017.07.14
今回は、Serverless Framework+Node.jsをつかったLambda関数の具体的な開発フローを書いてみる。動作確認やテスト、CI連携まで一貫して行なったので、参考になればと思う。 つくったもの Webアプリケーション側である変更がはいった際に、複数のRDBとElasticsearchにまたがるデータを合わせて更新する、という、中間的な役割を実装した。S3に更新のデータが5分毎にP […]
Flowのメリットを社内LTした
- 2017.06.22
先週ローカルワークした際に、Flowのメリットを社内LTした。もともといくつかのプロジェクトでいれてはいたのだが、今後新規で開発に参加してくるだろう人や、興味のある人に向けてのものだった。その内容を簡単に書いてみる。 なぜ型があったほうがよいか？ 型エラーの表示 =>コンパイルを通す前にビルドが失敗することがわかるようになるので、無駄な確認時間を省略できる 型情報をツールチップとして表示 = […]
リーダブルコード
- 2017.06.21
- 書評
良いコードというのは、どういうコードなのか。 ということで、今回はリーダブルコードを読んだのでまとめていきたいと思います。 1. 理解しやすいコード コードは理解しやすくなければならない。 コードは他の人が最短期間で理解できるように書かなければならない。 コードは短くしたほうがいい。だけど「理解するまでにかかる時間」を短くするほうが大切 他の人がコードを読んでも、何をしているのか理解できるコードを […]
フロントエンド学習 ECMAScript 第2回
- 2017.05.30
- 書評
前回に引き続きECMAScriptをまとめていきたいと思います。 今回は前回紹介できなかった、関数 組み込みオブジェクト オブジェクト指向構文 についてです。 関数 デフォルト値 従来のJavaScriptでは、引数にデフォルト値を設定することができず、引数が渡せされているかのチェックをし、デフォルト値をセットするといった処理を書かなければなりませんでしたが、ECMAScript6では引数にデフォ […]
フロントエンド学習 ECMAScript 第1回
- 2017.05.19
- 書評
MMMに入社してもうすぐ半年になりました。 フロントエンドの学習は業務になぞっては行えていますが、体系的に学べていないということで、フロントエンド学習を今月から取り組んでいくこととなりました。 どんな内容を学習していくかをブログでまとめていきたいと思います。 第1回となる今回はECMAScriptについて学んでいきました。 実はいうと実務でECMAScript6を扱ったのは初めてでした。 なんとな […]