プロトタイピング＝試作品の制作を気軽に始めてみよう！

JavaScript学習に役立つお話がありました。

「プロトタイピング」でプログラムを試作する練習について紹介されています。

 

www.webprofessional.jp

 

（前回に引き続き、今回もこのお話から学んでみたいと思います。）

 

jsstudy.hatenablog.com

 

アプリ作成の進め方として、以下の手順が紹介されています。

1. 最初に基本を身に着けよう
2. 計画を立てる
3. コード無しで書いていく
4. 小さな部分に分けて製作する
5. 各パーツを結合する
6. 実験とテスト
7. 外部の助けを求める
8. コードのリファクタリング（再構築）

 

試行錯誤の重要性

現実には、プロジェクトは完璧なコードをガンガン書くことではなく、たくさんの試行錯誤とリファレンスを幾度も参照して少しずつできあがるものなのです。

 

実験とテスト

この段階ですでに、たくさんの実験とテストを繰り返して動作確認をしてきました。

きちんと動作するならば、いろいろ試して不具合がないか確認してください。

たとえば、もしユーザーがここやあそこをクリックしたら？ もし入力値が想定外の値だったら？ もし画面サイズが狭かったら？ もし想定するブラウザーで動作しなかったら？ 各手順でもっと効率良くできるところは？

 

理想と現実

• 理想：最初から完璧なものを作ることは難しいですが、
• 現実：試行錯誤で改良を繰り返して、不具合を取り除いていくことは可能です。

 

プロトタイピングとは？

プロトタイピングとは、プロトタイプ（原型、試作品）を作ることです。

 

プロトタイプ - ASCII.jpデジタル用語辞典

システム開発の初期の段階で、ユーザーの動作確認用として作成する試作品のこと。

 

プロトタイピング - Wikipedia

プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。

その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。

 

ソフトウェアプロトタイピング - Wikipedia

ソフトウェアプロトタイピング（英: Software Prototyping）とは、将来完成する予定のソフトウェアの不完全なモデル（プロトタイプ）を作成することおよびその過程を意味する。

プロトタイプは完成品についてのイメージをユーザーに抱かせ、顧客がそのプログラムを評価することができる。

 

• 動かない試作品　→　モック mock （モックアップ mock-up）
• 動く試作品　→　プロトタイプ prototype

 

ベータ版 - Wikipedia

ベータ版（ベータばん、β版）とは、正式版をリリース（公開）する前にユーザーに試用してもらうためのサンプルのソフトウェアである。ベータバージョン、試用版という場合もある。

ベータ版は多くのユーザーに（主に無料で）試用してもらうことで、使い勝手やデザイン、性能などについての意見を汲み上げ、それをソフトウェアの開発に活かしたり、発見し尽くせなかった不具合を報告してもらい修正したりして、正式版をより良いものに仕上ることを目的としている。

 

プロトタイプやベータ版の段階では、荒削りの部分やバグがあってもOK。

改良を続けることで、徐々に完成度を高めていく手法がプロトタイピングです。

 

０から１を作り出す作業

試作品は、問題を具体化、見える化するために役立ちます。

 

プログラミングでは、「情報」という具体的な形を持たない、曖昧なものを扱っています。

「調理」や「建築」など具体的な形を持ってるものを扱う分野と比べて、プログラミングで扱う情報は抽象的、曖昧で把握しづらいという難点があります。

 

• ビット（抽象的、無形）：　プログラマー → 「情報」
• アトム（具体的、有形）：　建築家 → 「ビル」、調理師 → 「ラーメン」

 

（参考） ビット（情報） VS アトム（物質）

クリス・アンダーソンの新提言「メーカームーヴメント」とは？｜WIRED CONFERENCE2012

これまでの10年間、インターネットによってアイデアがオープン化され、シェアされるようになったことで、誰もがコンテンツを作り、世界中の人々と共有することができるようになった。

ただし、それは主にビット（デジタル情報）の世界に限定されたものだった。

しかし、これからの10年は、そのビットのプラットフォーム（インターネット）を利用して、現実の世界、つまりアトムの領域に変革が起きる。

大量生産に合わないニッチな製品を、無数の個人が安く、素早く製品化し、グローバルに流通できるようになるのだ。

 

MAKERS―21世紀の産業革命が始まる

 

抽象的なもの、曖昧なものを扱う場合、なるべく具体的な形を与えることで、分かりやすさがアップします。

 

「“具体的”であることだけが本当に良いのか？」――「具体と抽象の往復」で考える (1/2) - ITmedia エグゼクティブ

 

具体的、抽象的とは？意味の違いを分かりやすく解説 | 試行錯誤の向こう側

「具体」と「抽象」の関係

 

「スポーツ」の具体例

 

プログラミングは、

最初ボンヤリしている状態から、

徐々にハッキリさせていき、

最終的に明確な形を与える作業です。

 

システム開発で、どのように試行錯誤を繰り返すのか？見ていきましょう。

 

システム開発の手順

システム開発の典型的な手順は「PMBOK」という本にまとめられています。

 

PMBOK - Wikipedia

PMBOK（Project Management Body of Knowledge、ピンボック）は、「プロジェクトマネジメント知識体系ガイド」の略語である。

 

図解入門 よくわかる最新PMBOKソフトウェア拡張版 (How-nual図解入門Visual Guide Book)

 

 

何かを作るとき、最初に「目的」があって、次に「手段」を選ぶ、という順番になっています。

 

（例）

1. 目的：　ショッピングサイトを作りたい。
2. 手段：　HTMLやJavaScriptを使う。

 

開発サイクル

「目的→手段」の過程は、システム開発で、「要件定義」→「設計」→「実装」→「テスト」→「公開」という開発サイクルになっています。

1. 要件定義
2. 設計
3. 実装　（プログラミング）
4. テスト　（検収）
5. 公開　（デプロイ、運用、保守）

 

アジャイル開発

システム開発は、開発サイクルを実行する回数によって、２種類に分類できます。

• ウォーターフォールモデルでは、開発サイクルを1回だけ回します。
• アジャイル開発では、開発サイクルを複数回回します。

 

（参考）ウォーターフォール（waterfall 滝）

開発プロセスモデル | Think IT（シンクイット）

 

（参考）アジャイル（agile 機敏な）

迅速なソフトウェア開発を実現するアジャイル開発｜コベルコシステム

 

プロジェクト管理

アジャイル開発で、開発サイクルの繰り返し方／進め方には、

• PDCAサイクル
• OODAループ

などの方法があります。

 

PDCAは、Plan（計画）→Do（実行）→Check（評価）→Act（改善）を繰り返して、改善を促す戦略です。

OODAは、戦闘機の空中戦から生まれた戦略で、良く言えば「臨機応変」、悪く言えば「行き当たりばったり」ですｗ

 

（参考）OODA（Observe-Orient-Decide-Act 観察-判断-決定-行動）

OODA：PDCAでは生き残れない – アイ＆カンパニー :戦略コンサルティング

 

米軍式　人を動かすマネジメント ― 「先の見えない戦い」を勝ち抜くＤ-ＯＯＤＡ経営

 

クリエイターズ・コード 並外れた起業家たちに共通する6つのエッセンシャル・スキル

 

• PDCA → 急激な変化が少ない環境（安定）に向いている戦略
• OODA → 急激な変化が多い環境（不安定）に向いている戦略

という違いがあります。

 

ハッカーウェイ

プロトタイピングのような考え方は、「ハッカーウェイ」（ハッカー精神）などと言われています。

 

business.nikkeibp.co.jp

 

マーク・ザッカーバーグは、「速く動いて改良を重ねながら良いものを作ること」「オープンであること」といった文化などをハッカーウェイとして紹介している。

 

Facebook、IPO申請書類に添付されたザッカーバーグの手紙全文 : TECH SE7EN

ハッカーウェイ／The Hacker Way

強い企業を作るための一部として、我々はFacebookを多くの人が世界で大きな影響を受け、他の多くの人々から学ぶのに最も良い場所にするべくがんばっています。我々は独特の文化と経営アプローチを創り出し、それをハッカーウェイと呼びます。

「ハッカー」という言葉はメディアの表現からはコンピューターに侵入する人というような不当にネガティブな意味合いがあります。しかし現実には、ハッキングとは何かを素早く作り出したり、あることができる境界をテストすることを意味します。ほとんどのことと同じで、それは良い意味にも悪い意味にも使われますが、私が遭遇したハッカーの多くは世界に前向きなインパクトを与えたいと思っている理想主義者であることがほとんどです。

ハッカーウェイは継続的な改善と反復を含む建設へのアプローチです。ハッカーは何事も常により良くなり、最初から完全なものは何もないと信じています。彼はただそれを改善しなければならないだけです。－それは不可能だと言ったり、現状に満足している人々を前にして。

ハッカーはすぐに全てを良くしようとするよりはむしろ素早くリリースしたり、より小さな反復から学ぶことによって長期的に最高のサービスを作ろうとします。このことをサポートするために、我々は与えられた時間で何千というバージョンのFacebookを試すことのできる構造を作り出しました。我々は社内の壁に「完璧を目指すよりまず終わらせろ - Done is better than perfect -」と書いて仕事に取り組んでいます。

 

 

Facebookのハッカー精神は、プロトタイピングによる改良です。

 

プロトタイピングと関連して、「構築主義」「ティンカリング」という考え方も取り上げてみます。

 

構築主義

シーモア・パパート - Wikipedia

シーモア・パパート（Seymour Papert、1928年3月1日 - 2016年7月31日）は、南アフリカ出身のアメリカの数学者、計算機科学者、発達心理学者。

心理学者のジャン・ピアジェと交流があり、プログラミング言語のLOGOを開発した。

 

業績

ジャン・ピアジェの構成主義の研究をもとにした、構築主義という独創的な学習法の考案者。

パパートは、子どもが学習できる言語やプログラムは、熟練者に機能的に劣る事はない、と主張している。

また子どものプログラミング教育をためらう教師には「バグの体験こそコンピュータリテラシーには必要」と説いた。

PCの父アラン・ケイとそのダイナブック構想に影響を与えた。

レゴと共同で、LOGOプログラミングで動くロボットおもちゃマインドストームを開発した。

 

マインドストーム―子供、コンピューター、そして強力なアイデア

 

（参考）パパートの学習法（構築主義）の紹介

構築主義的学習 ― Logo とmindstorms from Kohei Sugiyama

 

 

構築主義（パパート）

学習とは…

・与えられた「環境」で、ものを構築する中で知識を理解・吸収すること

・構成主義を継承しつつ、「ものを作る」行為に重点を置いた

  

「プログラミング的」学習

・プログラムのポイントは

　「間違いがないか」より

　「バグを修正可能か」

 

・優れたプログラマーとは

　　△間違いを起こさない

　　○バグを発見し、それを取り除くことができる

 

・「プログラミング的」学習

　　「正解か不正解か」よりも

　　「間違いを修正する」 ことに重点を置く（デバッグ）

　　　→ 失敗を恐れずに挑戦できるようになる

 

ポリヤの理論

　「問題解決の為の一般的な方法を教えよ」

　　問題にあたったら、いくつかの質問を考える

　　・もっと小さな問題に分けられるか？

　　・既に解き方を知っている問題に関連づけられるか？

 

いかにして問題をとくか

 

プロトタイピングは、構築主義と共通していることが分かります。

＝最初から完璧なものを作る（間違えない）よりも、間違いを修正できる方が重要。

 

プロトタイピングは、「丁寧に作るよりも、雑な方が良い」という意見もありました。

 

medium.com

 

そこそこ方針が決まったら、雑でもいいからすぐに作り始めたほうが効果的なのです。

そのことを「構築主義（コンストラクショニズム）」と呼びます。

実際に手を動かしながら何かを作ることで、答えが浮かび上がってくるのです。

 

「雑であること」のほうが重要で、たとえば「まだ完成品でないことが相手に伝わる」「未練なく捨てられる」「厳しいフィードバックを受けても心理的に平気（だってまだ雑なやつだから）」あたりがメリットかなあと思います。

なので、むしろ「丁寧に作ってはいけない」わけです（もちろん異論はいろいろあると思います）。

 

ティンカリング

ティンカリング（tinkering）は、「遊び心」「いじくり回す」という意味があるそうです。

いろんなものを作っては壊し作っては壊し…と繰り返すうちに、だんだん手先が器用になって、もの作りの腕が上達していきます。

"Scrap and Build" ～「創造」と「破壊」を繰り返す遊びが「ティンカリング」です。

 

ティンカリングをはじめよう ―アート、サイエンス、テクノロジーの交差点で作って遊ぶ (Make:Japan Books)

 

「ティンカリング」とは、家財道具を修理してまわった流しの修理屋（ティンカー）を語源に持つ言葉で、さまざまな素材や道具、機械を「いじくりまわす」こと。

デザインセンスや問題解決の力を高めることができる手法として近年注目されています。

 

TINKERING（ティンカリング）という概念。何事もまずいじくり倒すべし！ | MIYALOG

大人になるほど「こわす」ということを恐れる

この「プロトタイプをつくることが大切」だと言われる現代に必要とされる能力の一つが「つくったものをこわす能力」です。子どもの頃に、毎日砂場にお城をつくっては蹴り飛ばして帰っていたあの頃。

砂のお城にしてもレゴブロックにしても、つくってはこわしてのサイクルを繰り返す中で遊び方や作り方をマスターし、レベルアップしていきましたよね。

これが大人になると、一度作ったものを大切にしようとします。そこにかけるお金や時間が違うというのもありますが、企業のコンテンツだって子どもの頃につくったお城と同じ。

つくってこわしてを繰り返すことで次のステージに進むことができるというわけです。「TINKERING（ティンカリング）」、いじくりまわして、つくってはこわして。イノベーションが必要とされる今の世の中では、いちはやく触れて、実際にやってみて、遊び尽くす。というスタンスが重要なようです。

 

• 子どもの頃は、変化を恐れない。今あるものを壊して、新しいものを作れる。
• 大人になると、変化を恐れる。今あるものを壊せず、新しいものが作れない。

 

プロトタイプを「雑に作る」のは、「ティンカリング」の考え方が背景にあるようです。

 

作ることで学ぶ ―Makerを育てる新しい教育のメソッド (Make:Japan Books)

 

(p.36)　メイキング、ティンカリング、エンジニアリング

・ティンカリング

直接経験、実験、そして発見を通して問題に近付き、解決を図っていく、遊び心にあふれた心構えです。

 

(p.42)　ティンカリング ― 学習のためのマインドセット

「ブリコルール」［bricoleur：フランス語でティンカリングをする人のこと］とは、「画家に似て、一描きと次の一描きの間にキャンバスから離れて眺め、しばしの熟考を経てから、次に何をすべきかを決める」ような人です（タークル＆パパート、1991）。

 

身のまわりの材料を使いこなしたときに、たくさんのすばらしい経験が訪れます。
身のまわりのものを使ってティンカリングを行い、プロトタイプを作り、フィードバックをもらう。
そして、それを繰り返して改造していき、新しいアイデアを生み出すのです。
何度も何度も、目の前の状況、次に起こる新しい状況に適応していくのです。

 

(p.44)　遊びとしてのティンカリング

ティンカリングとは、あなたが好奇心、空想、奇想に導かれて、やり方のわからない事柄に挑戦することです。

ティンカリングに説明書はありません。

正しいやり方や間違ったやり方はなく、失敗もありません。

それは物の仕組みを理解することと手を加えて作り直すことに関係しています。

複数の機械、珍しい仕掛け、不揃いな物体が調和しながら機能することがティンカリングの真髄であり、その基本は遊びと調べごとを結びつけるプロセスといえます。

 

ティンカリングを通じて、プログラミングの仕組みを理解し、プロトタイプの作り直し（修正）がうまくなっていきます。

プロトタイピングによって、遊び（ティンカリング）と調べごと（学習）が、同時に行えます。

 

• 構築主義：　プロトタイピングは、間違えないことよりも、直せることが重要
• 雑に作る：　試作品は、雑に作ることが大切　（いつでも取り替えられる）
• ティンカリング：　プロトタイピングは、遊び（ティンカリング）と調べごと（学習）が合わさったもの　（楽しければ勝手に上達する）

 

雑に作ってOK、間違えても直せればOK

→ プロトタイピングは気軽に始めてOK

 

まとめ

JavaScript学習は、リラックスして適当にやりましょう！（笑）

１回で完璧なプログラムを作ろうと意気込むのではなく、何度も部品（コード断片）や試作品を作って、改良できるようになりたいです。

 

（参考）このアスキーアートを印刷して貼っておくと捗るかも★

こまけぇこたぁいいんだよ！！/ 同人用語の基礎知識

[日々之戯言] AA｜こまけぇこたぁいいんだよ！！ -スグラボ-

 

 

 

 

プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

 

インテルの製品開発を支えるSFプロトタイピング (プロフェッショナル&イノベーション)