React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか

Source <h1 class="ml1"> <span class="text-wrapper"> <span class="line line1"></span> <span class="letters">THURSDAY</span> <span class="line line2"></span> </span> </h1>

ducksというデザインパターンを使用して簡単なTodoアプリを作成しようと思います。 機能としては以下になります。 タスクを追加できる タスクが終わったかどうかのラベルをつけることができる 環境構築 今回は自分みたいにブログの更新に時間がない方などが手軽にちょちょいと構築できるツールでcreate-react-appを使用します。 以下のコマンドを実行します。 create-react-app ducks_todo ducksについて ducksの公式サイトには以下のようなルールが記載してあります。 reducerはexport deaultをしなければならない action creatorは関数してexportしなければならない actionは定数で定義する などが挙げられます。 早速実際にアプリを作成していきましょう。 まずプロジェクトフォルダに移動してください。 cd ducks_

概要 職場の環境にGitLabが仮設置されたのですが、HTTP接続ではPushのたびに毎回パスワードを聞かれ煩わしいので、SSH接続を利用してパスワード入力なしでpush出来るようにしました。今回、そのための手順をまとめてみた。 環境 Server：GitLab Community Edition 10.7.3 Client：Git Bash(Git for Windows 2.17.1) Client OS：Windows10(1803) 概略としてはSSHキーの鍵ペア（公開鍵と秘密鍵）を作成し、公開鍵をGitLabに登録。秘密鍵を使ってクライアントからGitLabにアクセスするという手順になります。 GitLabにユーザー登録、プロジェクト追加（割愛） Git Bashのインストール（割愛） SSHキーの作成 sshキーファイルを格納するフォルダに移動 $ cd ~/.ssh sshキ

動機 500万回くらい書かれてると思うけどこの間も聞かれたので。 環境 Ubuntu 16.04とWindows10で確認済。 OpenSSLがインストールされている。 手順 SSH keysを作る。 .ssh/configを書く。 1.で作成した公開鍵をgitlabに登録する。 SSHでgit cloneできた！ これだけ。 SSH keysを作る 既に存在している場合はスキップ。 Githubの場合、コメントにはGithub登録ユーザのメールアドレスを入れると書いてある記事をよく見かけますが、gitlabでは特に入れなくても問題ないです。 .ssh/configを書く Git Bash使ってたら〜という記事をたまに見かけるが、普通に.ssh以下にconfigを作成すればよい。最初は存在しないので新しいファイルを作成する。

Webデザイナーにとって、公開されているさまざまなWebサイトのリファレンスを収集することは、スキルアップのため、よりよいデザインを作れるようになるための重要な仕事のうちのひとつです。 また、リファレンスの収集においてはただがむしゃらに集めるだけじゃなく、参考とする案件ごとや、サイトのトンマナ、サイトのタイプなどの種別に分けて管理するのも大事なこと。 僕は以前「Webディレクターがブックマークアプリ・Stacheを使うべき3つの理由。」というエントリで、Webディレクター向けにオススメなブックマークアプリとして「Stache」というツールをご紹介しました。 ところが最近は「どうやらこっちの方が使いやすい……？」と気づき、新たに発見したブックマークアプリ「Raindrop.io」を使うようになりました。Stacheにはない、Webディレクターにとってすごく便利な機能（ブックマーク郡をシェアで

Ducks というデザインパターン Reduxのファイル構成は『Ducks』がオススメ – Qiita The Ducks File Structure for Redux – S.C. Barrus – Medium erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux Redux Way React + Redux で構築する際のディレクトリ構成としてよく知られるのは、redux-way と呼ばれるやつです。Reduxの登場人物であるところの、container, reducer, action(action creator) それぞれについてディレクトリを分けてファイル単位で分割します。ディレクトリ構成はこんな感じになります。 s

マークアップエンジニアとしてウェブ制作会社に入社してから１０年になりました。若いね～と言われなくなってからも随分たちました。いろんな意味でひとつの節目に来たのかなと感じます。そこで、わたしがごく個人的に大事にしている、仕事とエンジニアリングについての価値観をまとめました。 意味もなく、これからの若手エンジニアに語りかけるようなまとめ方をしています。 基礎をかためること フレームワークやライブラリを用いれば、やりたいことはすぐに実現できるかもしれません。AI が台頭してくれば、これまでの制作フローがひっくり返るかもしれません。それでも、基礎をないがしろにしてはいけません。知識や経験は基礎の上に積みあがるからです。基礎こそ重要だと思います。 基礎を学ぶためのアプローチはいくつか考えられます。わたしのおすすめは、資格をとることと、普段の業務のどこか一部を低水準のやりかたでやってみることです。 資

GitLabがビルトインしているGitLabCIを使うと、.gitlab-ci.yml というファイルの設置だけで、とても簡単にデプロイの自動化を実現できます。 Git環境での作業効率化／自動化の、誰でも取り組めるTipsです。 GitLabとは GitLabは、ポストGitHubなGitのリポジトリをホスティングをするアプリケーションです。 サーバーを用意してインストールすることもできるのですが、今回は便利で気軽にブラウザ上で利用出来る GitLab.com を前提とします。 GitLabは無料で利用できることが充実していて、非公開のプライベートプロジェクトを作れますし、今回紹介するCI/CDも上限はありますが無料です。 １分でやりたい簡単なデプロイの自動化 要件は、 マスターブランチにコミット リモートにプッシュ サーバーにアップロード ということです。 .gitlab-ci.ymlを

このブログにも書いてきた通り昨年からちょいちょいルアーを作るようになりまして、今度はフラットサイドクランクを作ってみました！いくつか完成したので改めて素人の自分なりの作り方などを紹介したいと思います。 フラットサイドも作ってみよう 昨年の夏から作り始めたクランクベイト。 何個か作って行くうちに他の形も色々作ってみたくなってきました。 丸っこいラウンドクランク、薄っぺらいフラットサイド。 自分は既成のフラットサイドクランクをほとんど持っていないのと、「板貼って角を丸めただけの手抜きじゃね？」とか思っちゃってましてw でも物は試しに作ってみることにしました。 ちなみに、入念にテストして良いものを作るというより、作ること自体を楽しんでいるだけです！ バルサ材を整形 前回より意識して写真を撮ったつもりなので順を追って書いていきます！ 設計図 まずは適当な設計図。 全長65mmと55mmの2タイプを

React: Material-UI 4.0のコンポーネントへのCSS設定はwithStyles()からmakeStyles()にJavaScriptReactmaterial-uicss-in-js Material-UIは、Googleの提唱するマテリアルデザインを実装したReactコンポーネントです。また、CSSのスタイルシートをJavaScriptコードに書き込むCSS-in-JSを採用しました。そして、そのスタイルシートをコンポーネントに提供する関数がmakeStyles()です。本稿では、この関数を使って、Reactの簡単なアプリケーションの関数コンポーネントにスタイルシートを定めてみます。 これまでスタイルの定めには、コンポーネントをラップするwithStyles()関数が用いられました(「React: Material-UIのwithStyles()でCSSをJavaScr

Vidact compiles your React source codes to VanillaJS code with No Virtual DOM ™️. It is similar to Svelte, but unlike Svelte, Vidact does not introduce a new syntax. It takes in pure React-compatible JavaScript (JSX) and outputs plain JavaScript. Vidact currently is in alpha phase and has known limitations. It does not fully comply with React's behaviour in some edge cases, and probably never will

React Routerの使い方を学んでいく。 先月にv4がリリースされたので、それに準拠した内容を学んでいく。 ここで述べていることは正確な仕様とは異なる可能性が十分にあるので、正確なことを知りたい場合は公式のドキュメントを読みましょう。 React Router: Declarative Routing for React.js 何のためにReact Routerを使うのか 具体的な使い方に入る前に、そもそも何のためにReact Routerを使うのかを少し書いてみる。 聞きかじったり自分で考えたりしたものなので、これもまた、間違っている可能性が大いにあります。 SPAとは、ページ遷移を行わず単一ページでコンテンツの切り替えを行うウェブアプリケーションのこと。 ページの読み込みは最初の1回だけで、後はそのページのなかで、JavaScriptによって描画やAPIへのアクセスを行う。 この