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

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

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

何してる人？

Web 学習

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

電子書籍：プレゼン入門

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

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

今日お話しするテーマ

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

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

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

• https://gist.github.com/

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

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

毎日忙しい

余裕がない

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

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

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

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

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

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

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

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

...とはいえ

毎日忙しい

余裕がな(ry

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

そこで

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

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

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

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

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

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

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

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

他の CSS Preprocessor

HTML の Preprocessor

CSS Framework にも採用

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

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

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

あ、これって...

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

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

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

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

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

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

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

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

OOCSSとSass - Takazudolog

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

CodeGrid（メールマガジン）

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

あ、これって...

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

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

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

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

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

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

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

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

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

じゃ、いつやるのか?!

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

だって...

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

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

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

というか、毎日忙し(ry

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

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

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

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

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

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

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

それならば...

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

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

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

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

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

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

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

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

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

たとえば、ゲームの業界

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

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

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

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

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

みなさん、よい学びを！

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