react-redux でカウンターを作る

  • ARTICLES
React と組み合わせて使う Redux, 特に react-redux の取り扱いがいまいちわからず困ってしまう自体が発生したので基本的な使い方を確認するためにカウンターを作ってみました。 yterajima/react-redux-counter カウンターの動作自体は + ボタンででインクリメント, - ボタンでデクリメントするだけの簡単なものです。 参考 React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで(穴井宏幸 石井直矢 柴田和祈 三宮肇)|翔泳社の本 ReactとReduxを結ぶパッケージ「react-redux」についてconnectの実装パターンを試す - Qiita 何がわからなかったのか ファイルの分割と機能 components ディレクトリと containers ディレクトリに配置するファイルの違い connect まわり mapStateToProps mapDispatchToProps 書籍と Qiita 記事のおかげでどうにか解決しましたが, もう少し使ってみる必要がありそうです。便利な機能がまだまだあるようなのでドキュメントの読み直しも必要です。 サーバサイドからクライアントサイド, フロントエンドへ 私のスキルセットのほとんどはサーバサイドに降って来たため, フロントエンドのキャッチアップが全体的に遅れています。短期間で集中してフロント側のスキルセットやツール, サービス利用方法を身につけていきたいと思っています。 ただし, react + redux + Rails or Go みたいな案件で一緒にコードがかける人が群馬にいないのでかなり問題だ。

CirclCI 2.0 用にカスタムイメージを用意する場合は dockerize 入れといた方がよさそう

  • ARTICLES
自社サービスや受託開発で利用する Docker イメージを見直しています。MySQL 用のイメージや Rails 用イメージを見直したところ, CircleCI 上でテストを実行する際に MySQL に接続できずテストが落ちる現象が発生しました。 テストが落ちた原因 MySQL の ENTRYPOINT の処理を見直した結果, MySQL が起動する前にデータベースへ接続しようとし, 結果接続できず落ちる状態でした。 変更前の ENTRYPOINT では最低限の処理だけ行い, その他の設定処理は起動後に外側から command を使って実行していました。見直しによって ENTRYPOINT 側で対応する処理を増やしたため初期化に時間がかかるようになってしまった模様。 対応 とりあえずの対応として, MySQL の初期化が完了するまでの時間として SLEEP 10 をとりあえず追加しました。(よくない) Dockerize 本来であれば Dockerize を用いるのが良さそうです。 Configuring Databases - CircleCI Database Configuration Examples - CircleCI 複数のコンテナを組み合わせて利用する場合は dockerize をイメージに含めておくと良さそうです。CircleCI が提供しているイメージにはインストールされているらしい。 Using Custom-Built Docker Images のリストにはなかったので見逃していました。一緒に書いておいて欲しかった。 今回に限っては SLEEP 10 でお茶を濁して, 次回以降の見直し時に対応しようと思います。

高崎シェアオフィス情報 2018

  • ARTICLES
昨年頭に書いた 2017年版の高崎市内のシェアオフィス記事 が SEO 的に良い位置におり, 更新されないと都合が悪い人がいそうなので 2018 年版を書いてみます。 あいうえお順, シェアオフィスを公式にうたっている事業者を中心にまとめています。 IPPO URL: https://shimizu-shoji.com/lp/ 所在地: 高崎市問屋町西 高崎問屋町駅から少し歩く距離で国道17号線にも近く, 特に車を使って頻繁に移動される方には嬉しい立地です。お値段的には他のシェアオフィスよりも割高感がありますが, Web サイトを見る限り設備も新しく, 個室, 駐車場, 24 時間いつでも利用できるようです。 9 月に拡張されるようなので気になる方は問い合わせると良さそう。 拡張のお知らせ9月ごろオープン: https://shimizu-shoji.com/news/693/ Somethin’ Else URL: http://somethingelse.jp/ 所在地: 高崎市小八木町 2017 年版では「起業家の森」として紹介させていただきましたが, その後管理運営が Somethin’ Else さんになりました。 ワンデスク, バーチャルオフィス, レンタル会議室, マンスリー契約, さらにコワーキングスペースとして運営されています。昨年は Go 言語の勉強会 Takasaki.go でもお世話になりました。 立地としては最寄の井野駅からはかなり歩きます。代わりに駐車場が充実しているので車を常用する群馬県民にはぴったりかもしれません。オープンスペースを中心に半個室, 会議室と充実しています。 shine URL: https://shine.issha-grow.com/ 所在地: 高崎市本町 数日前に Web サイトができたばかりです。弊社は現在こちらのシェアオフィスに入居しています。高崎中央銀座の外れ, 飲み屋街が途切れた先にあります。立地のわりに個室なのに賃料は格安で, どういうわけか賃料にいろいろな料金が含まれており助かっています。 24 時間土日に限らず好きな時間に利用させていただいています。コンビニや飲食店が近いので便利です。新たにバーチャルオフィスを始められたとのことです。個室も 1 部屋空いているので気になる方は Web サイトからお問い合わせしてみてください。

開発環境を Vagrant から docker-compose に移行する

  • ARTICLES
長らく開発環境は Vagrant + VirtualBox でした。このところ CircleCI 2.0 への移行 をきっかけに開発環境も docker 化(docker-compose 化) をすすめています。 Vagrant 利用時の問題点 開発環境を維持していくためにプロビジョニングの整備が必要でした。流行り廃りの中で Chef, Itamae, 最終的に Ansible と使用するツールを変えてきました。 プロビジョニング実行時には, 運用ポリシーにもよりますが, 適用前後の状態変化をチェックするコードを用意しなければならない場合がありました。例えば Go のバージョンのみ変更したい場合, インストール済みの Go のバージョンをチェックし新たにインストールしたいバージョンと差異があるか確認, 必要があればインストールを実行といった具合です。 また, ミドルウェアのバージョンアップにあわせて各自のローカル環境でプロビジョニングを実行する必要がありました。それぞれのマシンで実行するため総時間としてはそれなりの時間が必要です。 docker-compose に移行した結果 メリット docker イメージの作成のみ考えればよく, 既存の状態チェックを意識せずに済む イメージにして Docker Hub 等に置けば各ローカル環境でプロビジョニング作業は不要 Vagrant + VirtualBox よりもメモリの消費が少ない CI 環境を含めて考えれば環境構築の手間が浮く プロダクションのサーバ環境まで面倒みれると最高っぽい デメリット docker-compose の操作を覚える必要がある 複数のコンテナを管理する必要があり煩雑 DB やアプリサービスごとに bash で入って状態をチェックする場合がある 通常のサーバ環境を念頭において作業するとわかりづらい 迷ったこと 特定のプロジェクトにおいて, MySQL のユーザ追加等をイメージ側で管理するか否か 汎用性を重視し, $ docker-compose up をラップした Rake タスクでユーザ追加で対応中 実際に開発環境に採用してみて もっとも助かっているのはメモリ使用量が減ったことです。

ES2015 で LazySearch のサイト内検索ライブラリを開発した

  • ARTICLES
サイト内検索サービス LazySearch の課題のとして使い始めるまでに JS で処理を書く必要があり煩雑という問題があります。サイト登録まで到達した後に, さらに JSON/JSONP で Search API に問い合わせる処理を JS で書かなければなりませんでした。 JS で処理を書く, といっても検索結果のデザインやページネーションまで含めればサクッと書けるものでもありません。 そこで JSライブラリを置けばサイト内検索機能が使える を目標に JS ライブラリ lz.js を開発しています。 リポジトリ: https://github.com/fillin-inc/lazysearch-js 目標仕様 モダンブラウザ + Edge + IE10-11 をサポート JS ライブラリを配置し, form タグの hidden に指定されたパラメータを指定する 検索結果はモーダル表示 PC, タブレット, スマホでそれぞれレスポンシブに対応 開発環境 webpack + Babel css-loader + style-loader を使った CSS ロード html-loader を使った HTML テンプレートの読み込み Pure JS をベースに必要最低限のライブラリで実装 なぜ ES2015 で作ってみてどうだったか 世代的に JS を始めた頃には便利な jQuery がすでにありました。しかし, ES2015 ではより表現しやすい構文が用意され, モダンブラウザではブラウザ間の差異を(そこまで)気にする必要がなかったので苦労はありませんでした。