JS初心者だけど3ヶ月でこんだけ書けるようになりました

ノンプログラマー・UXUI デザイナーな
JS 初心者だけど
3ヶ月でこんだけ書けるようになりました
Miki Yokouchi | twitter@kswmch
01@kswmch

03@kswmch
twitter@kswmch
前職は某 R 者で社でアプリデザインを主にやってました
弁護士ドットコムで
UXUI デザイナーやってます
WEB デザイナー歴 1.5 年
HTML と CSS 書き始めて 1.5 年

このあいだこんな記事でバズりました
04@kswmch

3 ヶ月 JS を勉強して ...
本題に入りますが
05@kswmch

こんな問題も解けなかった私が ...
次の画像のようなポップアップダイアログに
「Hello JavaScript」と出力しなさい。
06@kswmch

こんなメモ帳アプリをつくれるようになりました
（追加・保存・削除・マーカー・フラグがつけれらる）
07@kswmch

実際勉強したこと
08@kswmch

var/if 文 /for/function/dom 操作 /jQuery って何？ /
戻り値 / 引数 / 配列 /localStorage
JS の基礎を勉強しただけ！
09@kswmch

実際に勉強した時間
10@kswmch

週 1(5h)×8 回＋
学校
土日にぼちぼち
家での復習とか
11@kswmch

一般的な社会人が
土日で勉強できるレベル
12@kswmch

作っていたときの苦労話２点
初心者だから覚えてる
13@kswmch

関数が全然理解できなかった
ひとつめ
14@kswmch

こうやって教えてもらって
理解できました
15@kswmch

関数を呼ぶっていうのは、キャバ嬢を指名するものでね
※イメージです
16@kswmch

引数と返した結果を例えるなら .... キャバ嬢にプレゼントを渡すとき ...
ありがとうという言葉だけ ...
GODIVA のチョコを渡す
体で返してくれた！
マンションをあげる
※イメージです
17@kswmch

わかるようになった
意味がわからんから詳しく！って方は懇親会で話しかけてください w
18@kswmch

ふたつめ
マーカーの機能をつけるとき
どうすればいいのか悩んだ ...
19@kswmch

つけたり外したりする機能をつけたい
20@kswmch

textarea で span タグを書いて
JS をゴリゴリかいて実装する？
21@kswmch

既存のライブラリー使ってみる？
22@kswmch

時間もないし
今回はサクッとつくりたい！！
23@kswmch

こんなのありました ...
指定した iframe をテキストエディタみたいに編集できる機能です！
※iframe 以外でもつかえるみたいです
24@kswmch

デザインモードをオンにして ...
25@kswmch

onclick に処理を書くだけ
26@kswmch

とりあえず b タグをつけはずしはできた
27@kswmch

CSS が当たらない
でも iframe だから
28@kswmch

JS で無理やり iframe 内に
link タグを突っ込みました
29@kswmch

JS を勉強してみて思ったこと
最後になりますが
31@kswmch

わかりやすいゴールがあったから
モチベーションが続いた！
メモ帳アプリをつくるという
32@kswmch

用語だけだとよくわからなくって
モチーベーション下がっちゃうけど
わかりやすい例え話があることで
楽しく理解できるようになった！
33@kswmch

わかりやすいって大事！
あらためて ...
34@kswmch

「第三引数に入れて」とか「普通にやってくれればいいよ」とか
デザイナーにいってませんか？
35@kswmch

そんなわかりずらいこと言っても
やる気なくすだけですからー！
36@kswmch

私の JS 道は続く ...
37@kswmch

twitter でも気軽に絡んでくださいね
@kswmch
ご静聴ありがとうございました
38@kswmch

Recommended