react-redux でカウンターを作る - IssueOverflow を TypeScript 版を作成してみた。 yuya-matsushima/react-redux-counter-ts 作ってみてどうだったか vim は外部ライブラリの types (型) 情報が厳しいので素直に Visual Studio Code を使った @types で追加されている型情報はある程度頭に入れないと手間取る 慣れるまで大変そう

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

React を使うにあたり, というか最近の JS の開発を行う場合 WebPack + Babel の環境を用意して, さらに JS フレームワークを追加し設定を書いて…といった煩雑な手続きが必要です。 React の場合 create-react-app という便利コマンドでサクッと開発環境を作ることができます。ただし, create-react-app でプロジェクトを始めた場合, 余計なファイルを同時に作ってしまい練習用にはお節介がすぎる感があります。 そこで create-react-app で採用されている react-scripts を使って必要なところだけ楽をする。をしてみました。 手順 初期化を適当に実行。 $ npm init npm で必要なパッケージを追加します。 $ npm i -D react-scripts $ npm i react react-dom npm に必要なコマンド定義を追加します。 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "eject": "react-scripts eject", "test": "react-scripts test" }, react-scripts には特定のディレクトリやファイルが必要らしいので最低限作ります。 $ mkdir -p public src $ touch public/index.html $ touch src/index.js package.json に追加した start を実行すると public/index.html を index として開発サーバが起動されます。このファイルを編集します。 ...

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

長らく hugo-zen というテーマを使ってきましたが, もう少し見た目を華やかにしていこうということでテーマを変更しました。 変更後のテーマは Robust です。 投稿ごとの画像設定が可能で, 尚且つ AMP 対応もしている!! あたりが選定理由です。 テーマを上書きしたところ Hugo のテーマはファイルを上書きする機能をもっています。WordPress でいうところの子テーマみたいなものでしょうか? テーマ変更にあたっていくつか変更が必要だったので調整しました。 検索フォーム追加 LazySearch の JS ファイル読み込み追加 CSS を少し調整 基本的にはベースのままで追加機能分を調整した形です。あらかじめ空のパーシャルが用意されている箇所があって変更も簡単でした。 これから もう少し頑張って更新していく。

昨年頭に書いた 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 サイトからお問い合わせしてみてください。 SOHO ガーデン高崎 URL: http://www.takasaki-urbanhotel.com/contents/soho/ 所在地: 高崎市八島町 高崎駅西口にひっそりと存在するシェアオフィスです。高崎アーバンホテルの中にあります。4 月までお世話になっていました。 ...

長らく開発環境は 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 タスクでユーザ追加で対応中 実際に開発環境に採用してみて もっとも助かっているのはメモリ使用量が減ったことです。 使い始めた当初は通常のサーバと異なり, 各サービスごとに作ったコンテナに入って作業する必要があり混乱しました。しかし慣れてしまえば大した問題ではなく, CI 環境との兼ね合いを考えれば大したコストではありませんでした。 一点問題として, デザイナーさんが関わる案件の場合, 現実的に運用できるか疑問が残っています。docker-compose のコマンド体系をある程度把握してもらう必要がでてくるためです。Git/GitHub や Gulp, WebPack が必要な環境において, そういったコマンドの習得コストをどのように考えるべきか悩ましいです。 ...

自分の会社のサイトは創立以来 Middleman で管理運用しています。これまでは CircleCI 1.0 の機能を利用して AWS S3 にデプロイし CloudFront のキャッシュをクリアする構成になっていました。 CircleCI 1.0 が 2018 年 8 月末日で利用できなくなるため 2.0 に変更する必要がありました。 CircleCI 1.0 End of Life on August 31, 2018 CircleCI 2.0 対応にやったこと CircleCI 2.0 のドキュメントの確認 Middleman がビルドできる Docker イメージ作成 circle.yml を .circleci/config.yml に変更 CircleCI 2.0 を利用するには Docker イメージが必要です。CircleCI が用意しているイメージを利用する方法もあります。 Pre-Built CircleCI Docker Images - CircleCI 今回は Docker の学習も兼ねて自分で Docker イメージを用意することにしました。 Docker イメージの作り方 できたもの: Docker Hub: yuya-matsushima/middleman GitHub yuya-matsushima/docker-middleman 依存イメージ: yuya-matsushima/docker-ruby 今回は Ubuntu 16.04 をベースに Ruby, NodeJS + Yarn が動作するイメージを作成しました。自分でイメージを作成する場合は必須となるパッケージがあるので注意が必要です。Ubuntu 16.04 の場合は例えば ca-certificates は必須です。 ...

サイト内検索サービス 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 ではより表現しやすい構文が用意され, モダンブラウザではブラウザ間の差異を(そこまで)気にする必要がなかったので苦労はありませんでした。 IE10, 11 で時々使えないメソッドがあったので相変わらず… という気持ちにはなりました。 ...

この記事を書くにあたり手元の Mac Book Air の年代を調べたら 2013 年で流石に古くて驚きました。 タイトルのとおり Mac Book Air のバッテリー交換をしたので書いておきます。早く買い換えたい。早く 32GB の MacBook Pro が出てほしい。 なぜ交換したか? 電池の寿命です。これまで 1 度も交換せずに使ってきたので仕方ないですね。 本来であれば買い換えを検討したいところなのですが, このタイミングで新しい MacBook Pro を買うのは悔しいので電池を交換してお茶を濁す計画です。お仕事的には Mac Book Air は打ち合わせや簡単な資料作成程度に利用するだけなので問題ありませんでした。 バッテリーの調達 適当にググって Mac Book Air の型番を調べ, amazon でサッと購入しました。 いくつか購入候補はありましたが, レビューを見ると純正でない場合新品同様に長時間モバイル駆動は難しいらしいです。2-3時間とりあえず動いてくれれば問題ないのでそれなりのお値段の商品を選択しました。 ...