Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

プログラムコーディングの準備体操

2,969 views

Published on

GTUG Girlsのスタッフ内輪勉強会で使用した資料。実際にプログラムを勉強しても、”作りたいものが作れない”ステップに入ってしまった時に、何をするとよいのか?を解説。

  • Be the first to comment

  • Be the first to like this

プログラムコーディングの準備体操

  1. 1. 2012.04.25 @ichijo3
  2. 2.  始まりにして結論 “プログラム”? 整理する? 『鍵を開けて家に入る』 結論にして始まり 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  3. 3. 重要なんで先に言っておきます2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  4. 4. “ソースを書く”ことは プログラムコーディングの 最後。2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  5. 5. 重要なのはその前にある作りたいものに関する 情報の整理2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  6. 6.  結果となる状況を細かく描き出す 行われることの順序を描き出す 誰が何を使って何を行うのかを描き出す 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  7. 7. その正体を知っていますか?2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  8. 8. この業界で“プログラム”というと2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  9. 9. 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  10. 10. こういうソースコードが 一番にイメージされるものと 思います。2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  11. 11. なので、最初に「ハロワ」を書いて 勉強しますよね? が、プログラムの本質は「プログラム」という言葉が使われる 状況に現れます。 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  12. 12. 例えば、 音楽会の「プログラム」とか。2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  13. 13. 例えば、 運動会の「プログラム」とか。2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  14. 14. 日本語では「式次第」なんて言葉もありますが。 つまり、 何らかのコンテンツ・イベントの 進む順が 全て書かれているものが “プログラム” 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  15. 15. バッチプログラム vsインタラクティブプログラム 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  16. 16. 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  17. 17. 低級言語 vs高級言語2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  18. 18. 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  19. 19. 最近のプログラミング言語を使ってコンテンツの順序を書きだすということは 自分が通常、思考で使っている言語で 状況整理ができるということ。 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  20. 20. 組立て方をまとめるほうが大変2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  21. 21. MVCモデル、 オブジェクトモデル、 デザインパターン。2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  22. 22. 世の中には こうした“モデル”、“パターン”が結構ありますが、これを知ったからといって サクサク、プログラムができるわけでは ありません。 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  23. 23. モデル、パターンは「型」。 その型を理解して、 その型に“ハマるもの”を自分が見つけ出す必要があります。 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  24. 24. 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  25. 25. 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  26. 26. “ハマるもの”かどうかは “ハマめようとするもの”を 自分が理解しなくては。そのために情報整理です。2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  27. 27.  複数視点で状況をイメージ(写実派画家モード) 結果への段取りをイメージ(料理研究家モード) 役割・道具・条件をイメージ(イベント運営者モード) 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  28. 28. 今回提示するシチュ。通常、Webサービス上でよく見かけるものの 置き換えです。 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  29. 29. ズバリ、「ログイン(認証)」処理 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  30. 30. シチュエーションでエクササイズ♪2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  31. 31. というわけで、事前ストレッチを思い出しつつ、 見てみましょう。 とても簡易に作っています。添付のindex2.html 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  32. 32. さて、どんなイメージか アウトプット! 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  33. 33. 明かりあったな。ドアの向こうに人 ドアにはノブで鍵穴とか 鞄に鍵 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  34. 34. さて、どんなイメージか アウトプット! 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  35. 35. 1. ドアの前に行く2. 鍵を鞄から出す3. 鍵穴を確かめる4. 鍵を鍵穴に入れる5. 鍵を鍵穴の奥まで差し込む6. 鍵を右に回す7. 鍵を元の位置に戻す8. ノブをつかむ9. ノブを右に回す10. ノブをつかんでドアを手前に引く11. ドアの中を覗く12. ドアの中に入る13. 中の人に声をかける14. 鍵をしまう15. 靴を脱いで玄関を上がる 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  36. 36. 1. ドアの前に行く2. 鍵を鞄から出す3. 鍵穴を確かめる4. 鍵を鍵穴に入れる やりとり=インタラクティブ5. 鍵を鍵穴の奥まで差し込む6. 鍵を右に回す7. 鍵を元の位置に戻す8. ノブをつかむ9. ノブを右に回す10. ノブをつかんでドアを手前に引く11. ドアの中を覗く12. ドアの中に入る13. 中の人に声をかける14. 鍵をしまう15. 靴を脱いで玄関を上がる 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  37. 37. さて、どんなイメージか アウトプット! 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  38. 38. 役割 声 道具2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  39. 39.  鍵がなければドアを開けられない 鍵があわなければドアを開けられない 鍵は鍵穴に差し込むことができる 鍵は鍵穴から抜き出すことができる 鍵は右に回せば解錠、左にあわせば施錠 解錠している時は解錠できない 鍵穴がなければドアを開けられない 中の人は声かけがなければ、帰ってきたことがわからない ・・・etc. 条件 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  40. 40.  鍵がなければドアを開けられない 重要な 鍵があわなければドアを開けられない 前提条件 鍵は鍵穴に差し込むことができる 鍵は鍵穴から抜き出すことができる 鍵は右に回せば解錠、左にあわせば施錠 解錠している時は解錠できない 鍵穴がなければドアを開けられない 中の人は声かけがなければ、帰ってきたことがわからない ・・・etc. 条件 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  41. 41. あらためて、ソースをみてみましょう! 何が、どういう順で書かれていますか?添付のindex2.html 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  42. 42. URLから2を取ると コメント付きソースが見えます添付のindex.html 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  43. 43. この先は続くのであります2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  44. 44. 重要なのはその前にある作りたいものに関する 情報の整理 ですが。2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  45. 45. より良いプログラムを作るには 言語の特性や稼働環境などをさらに理解していく必要があります。 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  46. 46. 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  47. 47. 正直、こればっかりは勉強+経験が活きてきます。 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  48. 48. なので、情報整理もある程度できたと思ったら Let’ coding! 2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.
  49. 49. Thank you♪2012.04.25 Copyright(c)2012 M.ICHIJO All rights reserved.

×