「何かのビームが出そうだよ」シュールさんLINEスタンプ

チャットで質問をもらいました(JavaScriptを使えるようになるにはどのような学習をすればよいですか)

チャットで質問をもらいました(JavaScriptを使えるようになるにはどのような学習をすればよいですか)

「何かのビームが出そうだよ」シュールさんLINEスタンプ
「何かのビームが出そうだよ」シュールさんLINEスタンプ

質問

JavaScriptを独学で勉強している者です。しかし全く身になっている気がせず悩んでいます。
現在の状況としましては
①progateを3周②ドットインストールのJavaScriptの所を2周やりました。
しかしいざ自分で何か作ろうと思っても全くコードが書けません。どのような学習をすればよいですか?

ゆーても僕も勉強中の身ですがというのを大前提で、

自分の場合学習方法は「それでも作る」でした。

多分急にリッチなものは作れないので

何か簡単なものをつくってみてはどうでしょうか。リアルな実装でもよくやります。

「クリックしたらどこかの要素の色が変わる」
「Topへ戻るボタン」
「urlのパラメータが変わると表示内容も変わる」

など
小さい部品、動きからつくるようにして、
自分に合ったものを作るのがいいかと思います。

その中でわからないところが出てくるかと思いますが
ノートにとって説明できるぐらい調べる
僕がやっているのは
たとえばeventオブジェクトがわからなくなったら
「eventオブジェクトについては目黒区で一番詳しい男になる」
みたいに決めて色々な記事あさってまとめます

仕様はもちろんですがそのほかの方が言っていることがすっと頭に入ってくることがあります

日本語記事だとどれも同じことしか言っていない、別の角度から説明をしてもらいたい時
英語記事を漁ったりします

「JavaScript eventObject what 」 (全くわからない時)
「JavaScript event bubbling and capturing 」(違いを知りたい時)
「JavaScript eventObject usecase 」(ユースケース。つかいどころ。使い方がでてきます)
「JavaScript eventObject bestpratics 」(ベストな使い方、デザイン的な観点での使い方を教えてくれます。)
「JavaScript eventObject understand 」(もっと理解したい時)

英語自体が、最初に答えを言う表現だからか、
意外と日本語記事よりスッと入ってきます

など
徐々に部品だけはつくれるようになったら大きなものをつくるようにします

「カルーセルスライダー」
「タブ切り替えできるコンテンツ」
「サーバーにリクエスト投げてレスポンスを表示する」

例えばわたしは最近こんなものつくりました

(これはReactですけど)

自分がJavaScriptが好きになったきっかけがあって。
当時ECサイトのマークアップエンジニアだったのですが、

毎回同じコードをコピペしてて、
ちょっとしか違わないテキスト文と画像の名前を
liとして積んでいくのが嫌になって
どうにかしたいと思い配列で回した時でした。

思いの外できて楽しくなりのめり込みました。

もし作るものがなくて悩んでいたら
宿題として

 

htmlの中の<ul>直下で
このデータ

[{name: "kenji", age: "19", src: "kenji.jpg"}, {name: "morita", age: "20", src: "morita.jpg"}]

を使って
<li><img src="./src/img/[src]" alt="[name]" />これは[age]歳の[name]です</li>
を配列のオブジェクトの分数だけ繰り返して

出力されるhtmlは

<ul>
<li><img src="./src/img/kenji.jpg" alt="kenjiの顔写真です" /><span>これは19歳のkenjiです</span></li>
<li><img src="./src/img/morita.jpg" alt="moritaの顔写真です" /><span>これは20歳のmoritaです</span></li>
</ul>
となるようにしてみてください

 

これは当時自分が初めて書いてその後JavaScriptにのめり込んむきっかけになったコードを易しくしたものです。
JQeuryが流行っていたのですが、簡単だし、便利なのですが、
そもそもJQueryがJSで書かれているのでJavaScriptの知識は必要だなと確信して
それでしか書かないと決めて、
わざわざJSで書いてました。

そういう一大決心みたいなのは勉強の速度をあげるのには大切な気がしていて、
その後ひたすら勉強しました

徐々に慣れてきたらもっと細かいこと、わからないことをリストアップするようになり、
JavaScript練習問題
自分に対してつくるようになりました。
試験前にカードめくりながら答えを言って当てるみたないことしたくて書いたやつです(久しぶりに見たらスター増えているな。。。メンテしなきゃな)

「とにかくJSをかけるようになる!!」っていう強い思いは学習の種類を選ばないかもしれません


「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

株式会社TerraceTechについて
最近起業しました。
株式会社TerraceTech

SNS
しずかなインターネット kenjimorita
インド旅 instagram
適当な日常写真 instagram
シュールさーん instagram
シュールさーん LINEスタンプ
もりたけんじTwitter
ネタ帳Twitter
note

FaceBook -kennji.morita-

わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。

※業務連絡やお久しぶり連絡もチャットからお願いします。