思考法「SCAMPER」のwebアプリを作ったよー

Webアプリはこちら

https://t-morisawa.github.io/scamper-ja/

SCAMPERとは

今あるサービスやアイデアを、7つの切り口から半ば強制的に発展させていく発想法。

ブレインストーミングを生み出したAlex Faickney Osbornが、同じく発明したOsborn'schecklistの項目を並び替えたものです。

詳しくはこちらのハンバーガーの例えが分かりやすいので参照ください↓↓↓

ブレインストーミングと何が違うのか

ブレインストーミングはゼロからアイデアを出すのに役に立つ発想法であるのに対して、

SCAMPERは自他問わず今あるアイデアを改善して新しいアイデアを生み出すのに役に立ちます。

ブレインストーミングで出た使えそうなアイデアを発展させるのにも使えます。

そもそも使えそうなアイデアを抽出するための「KJ法」と言うメソッドもあるようです。

作ろうと思ったきっかけ

仕事で使っているReact+Reduxの理解が浅かったので、0からアプリを組んでみることにしました。

少なくとも僕が使うものを作りたいと思いました。

ブレインストーミングマインドマップやSCAMPERはプレゼンとか作る時にたまに使います。

ブレーンストーミングマインドマップのwebアプリは多数見かりましたが、SCAMPERのwebアプリは見当たりませんでした。

ということで、世界初のSCAMPERアプリを作ろうという目論見で始めました。

製作期間

期間は2ヶ月、時間は延べ7日くらいです。

とりあえず繋げる(3日) => React, Redux, Webpackのドキュメントを精読(1日) => リファクタリング・機能追加など(3日)

使用技術

React+Redux
Webpack
Semantic UI React

雑感

フォームで悪戦苦闘

redux-formパッケージを使おうとしたものの上手く行かず、結局ReduxのTodoリストのサンプルコードをほぼそのまま流用しました。

Reactを使う意味はあったか?

少なくともSPAにした意味はあったと思います(状態遷移が高速、入力情報をstateに保持しておくことができる)。

フォーカス

マウスでボタンやフォームをクリックしなくてもいいように、フォーカスを当てるようにしました。

refsを用いてDOM操作に近いことをする必要がありました。

componentDidMount() { this.refs.startbutton.focus(); }

CSSフレームワークを使うべきだったか?

今回はSemantic UI Reactを使いました。

これによりDOMContentLoadedに1秒近く掛かるようになってしまいました。

この程度のアプリにcssフレームワークを使うのが正解だったのかはよくわかりません。

でも導入すれば開発は楽でした。

フレームワークを使わない場合Reactに生のCSSを当てるベストプラクティスが分からなかったので、どなたか教えて頂けると嬉しいです。。

Slack Botでやる方が便利なのでは?

いつでもどこでも誰でも使えるようにしたかったため。

チャットツール風のUIにするのは検討しました。

 

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

 
アイデア・バイブル

アイデア・バイブル