2013年7月27日の第14回リクリセミナー「Web制作の未来、あなたの未来」での、角南のライトニングトーク「地図を描けば未来は見える」のスライド。登場するリソースの一覧はこちら（https://gist.github.com/shokuto/6038945）

1. 2013.07.27
第14回 リクリセミナー LT
地図を描けば
未来は見える
角南 北斗（Sunami Hokuto）
photo by pakutaso.com

2. 角南 北斗
Sunami Hokuto
フリーランス

3. 何してる人？

4. Web 学習

5. 外国人介護士の日本語学習を
支援するWebサイトの制作

6. 電子書籍：プレゼン入門

7. 調理師専門学校で
飲食店開業の支援講座
photo by pakutaso.com

8. そんな感じで
いろいろやっています

9. 今日お話しするテーマ

10. Web 学習
学習が専門なので...

11. この先生きのこるための
学びのヒント

12. スライドは後でお渡しします。
リソースは以下にまとめてます。
https://gist.github.com/
shokuto/6038945

14. 年齢や経験を重ねるほど、
どうしても自分の都合で
物事を考えようとしてしまう。
梅原大吾「勝ち続ける意志力」より

15. 心当たり、ありませんか？

16. 毎日忙しい

17. 余裕がない

18. だから、勉強も効率良く...

19. ✴ 理解しやすいもの
✴ 学ぶ必要性が明確なもの
✴ すぐに使えるもの
だけを勉強しがちでは？
ついつい

20. ✴ パッとは理解できないもの
✴ 学ぶ必要性が不明なもの
✴ すぐには使えないもの
を敬遠しがちでは？
言い換えると

21. ✴ パッとは理解できないもの
✴ 学ぶ必要性が不明なもの
✴ すぐには使えないもの
ということが多い
自分にとって新しいものって

22. ✴ パッとは理解できないもの
✴ 学ぶ必要性が不明なもの
✴ すぐには使えないもの
は 学ぶ価値がない？...わけがない
今の自分にとって

23. 効率良く学ぶことは大切。
でもそれは「学ぶべきこと」を
決めてからの話。

24. 何を学ぶか判断するときは
効率だけを考えていると
偏ったものになってしまう

25. 結論：
とにかく学んでみよう！

26. ...とはいえ

27. 毎日忙しい

28. 余裕がな(ry

29. 最初はやる気があっても
暗中模索が長く続くのでは
モチベーションが低下...

30. そこで

31. 新しいことを学ぶ際に
参考になるかも...なコツを
自分の体験から３つ紹介

32. 1技術は、関連する技術と
いっしょに理解する

33. Sassをやりはじめた時のこと

34. Sassは情報が入手しやすい。
少し検索すれば、基本概念、
環境作り、記法も把握できる。

35. ＝ 速くCSSを書く方法
...だと理解したものの

36. ?毎日コードをバリバリ書くような
仕事って僕はしてないし...
でも、がんばってマスターすべき？

37. モヤッとしたので
こんなことをやってみた

38. Sassに関連する技術を
たとえ浅くでもいいから
手当たり次第に勉強してみた

39. 他の CSS Preprocessor

40. HTMLのPreprocessor

41. CSS Frameworkにも採用

42. 0:00.12 /usr/sbin/distnoted daemon
0:02.46 /System/Library/Frameworks/CoreServices.framework/Versi
0:00.76 /System/Library/CoreServices/powerd.bundle/powerd
0:00.80 /usr/sbin/securityd -i
0:02.96 /System/Library/CoreServices/coreservicesd
0:00.33 /usr/sbin/ntpd -c /private/etc/ntp-restrict.conf -n -g
0:00.03 /sbin/SystemStarter
0:00.03 /usr/libexec/stackshot -t
0:00.09 /System/Library/PrivateFrameworks/GenerationalStorage.f
0:00.14 /usr/sbin/netbiosd
0:18.21 /System/Library/Frameworks/CoreServices.framework/Frame
0:00.89 /usr/sbin/mDNSResponder -launchd
0:03.01 /System/Library/CoreServices/loginwindow.app/Contents/M
0:00.03 /usr/sbin/KernelEventAgent
0:40.95 /usr/libexec/hidd
0:00.02 /sbin/dynamic_pager -F /private/var/vm/swapfile
0:00.03 autofsd
0:01.45 /System/Library/PrivateFrameworks/ApplePushService.fram
その過程で黒い画面も少し..

43. 便利なツール群もあるらしい

44. そうやって
アレコレやってるうちに...

45. あ、これって...

46. コンポーネント！
ライブラリ！！
プロトタイピング！！！
霧が晴れる瞬間があった

47. ＝ 速くCSSを書く方法
プロトタイピングに
不可欠な技術の１つ

48. いまの自分に必要なのは...

49. いまの自分の判断基準で
安易に評価を固めてしまわない！
角南 北斗「あの時の俺に言いたいこと」

50. 2技術の背景にある
歴史や思想に目を向ける

52. <button class="btn btn-primary">
このclass名、カッコ悪いよ
...と思っていた時期が私にもありました

53. モヤッとしたので
こんなことをやってみた

54. クラスの付け方＝CSSの設計。
昔から第一線で考えてそうな
先人の語りを読んでみた。

55. OOCSSとSass - Takazudolog

56. ちゃんとCSSを書くために
- CSS/Sass設計の話 by 谷拓樹

57. CodeGrid（メールマガジン）

58. SMACSS (ePub/日本語版もあり)

59. あ、これって...

60. 安全！
安心！！
見通し良好！！！
霧が晴れる瞬間があった

61. ＝ 何それカッコ悪い...
大規模で複雑なサイトを
管理する設計のサンプル
.btn

62. 世間が評価しているものには
それなりの理由があると思え！
角南 北斗「あの時の俺に言いたいこと」

63. 1. 関連技術をまとめて学ぶ
2. 歴史や思想も学ぶ

64. 地図を描けば未来は見える

65. 地図を描けば未来は見える
どんな技術がどう絡み合っているか
俯瞰して整理し理解できれば

66. 地図を描けば未来は見える
将来、業界がどう変化するか
想像もしやすくなる

67. 地図を描くように学べば
未来は想像できる！

68. そのことがわかったら、
あとは新しいことを学ぶだけ！

69. じゃ、いつやるのか?!

70. ...今じゃなきゃダメなの？

71. だって...

72. コツとか言いながら
やることを増やしてるし...

73. 自分の力で地図を描くのって
どう考えても楽じゃないし...

74. しばらく待てば、エライ人が
地図を示してくれるだろうし...

75. というか、毎日忙し(ry

76. それでも、やった方がいいと
「僕が」考えている理由

77. Web 学習
僕は活動領域が広い

78. アレコレやっているぶん、
専門を深堀りしている人には
純粋な技術勝負では勝てない

79. だから、戦い方に工夫がいる

80. 古のいわゆる善く戦う者は、
勝ち易きに勝つ者なり
孫子「形篇」
いにしえ

81. たいした努力を
しなくても勝てる場所で、
努力をしなさい
林 修「いつやるか？今でしょ！」

82. 不得意な分野・不利な領域で戦わず、
自分が得意な分野・有利な領域で、
しっかりと努力をしよう

83. それならば...

84. 世界を少しでも早く見て回って、
戦えそうな領域を見つけたい。
少しでも有利な状況で戦いたい。

85. だから、たとえ苦労してでも
自分が先に地図を描いて
不完全でも未来を予想したい

86. それに、変化にも未来にも
前向きにアプローチしたほうが
毎日は楽しくなるはず

87. 地図を描けば 未来は見える
まず自分から
自分なりの

88. 3Web以外の本も読み
自分の未来と関連づける

89. 自分の世界に影響を与えるのは
Webの技術の変化だけではない。

90. たとえば、クライアントの変化。
たとえば、ユーザーの変化。
たとえば、社会そのものの変化。

91. だから、クライアントを知る。
だから、ユーザーを知る。
だから、社会そのものを知る。

92. そのために、本を読む。
本を読んで未来を思い描く。

93. たとえば、ゲームの業界

94. ゲームから学ぶデザイン思考術
（schoo / 長谷川恭久さんの講義）

95. ゲームからデザインを学べる本の例
（ブログにまとめています）

96. Webが何でも先端とは限らない。
Webで最近騒がれだしたことが、
他の業界では常識、ということも。

97. 未来の地図を描くための材料は
Webの外にも転がっている。
そう思って意識的に目を向けよ。
角南 北斗「あの時の俺に言いたいこと」

98. 1. 関連技術をまとめて学ぶ
2. 歴史や思想も学ぶ
3. Web以外からも学ぶ

99. みなさん、よい学びを！

100. @shokuto
ありがとうございました
withcomputer.jp