Web プログラミング

【もりけん塾50日目】JavaScriptに興味を持つ/模写を選ぶ

LP制作を終えJavaScriptの勉強に戻った、ねこらのん(@nekoranon256)です。

 

先日、知人の個人事業主に雇うかどうかなどの話から急遽、数日間大阪に何故か連れて行かれたので今日から勉強に戻ることとなりました。

 

今日はJSに興味を持つことから始めることが大切だと思ったので、しまぶーさんの動画を見ました。

また、模写をするものを選び、その模写で何が学べるのかをリスト化しました。

 

今日したことをまとめていきます。

JavaScript入門byしまぶーさんの動画

しまぶーさんのJavaScript動画を今日は1〜2を見ていきましたので整理していきます。

JavaScript1の動画

 

今回の動画は、フロントエンド開発でJavaScriptが必要な理由を解説というものです。

 

まずはフロントエンドエンジニア、サーバーサイドエンジニアで使うJavaScriptについて。

 

  • フロントエンドエンジニア
    ・React
    ・Vue
    ・TypeScript
  • サーバーサイドエンジニア
    ・Node.js

 

私はフロントエンドエンジニアを目指しているので、React、Vue、TypeScriptが関係するようです。

 

 

ユーザーが「サイトを見たい」という流れは以下のとおりです。

  1. ユーザーがみたい
  2. ブラウザからサーバーへ「リクエスト(req)」
  3. サーバーからブラウザに「レスポンス(res)」
  4. ブラウザでレンダリング

 

 

JavaScriptの仕事は以下の2つ。

  1. データのやり取り
  2. DOM操作

 

 

JavaScriptが必要な理由は以下があります。

JavaScriptを用いたweb

  • より体験が良いwebサイトが見える
  • レスポンスで返すのはJSON
  • ページを遷移時に最小限レンダリング(必要なところだけレンダリング)
    など他にも多数あり

 

これまでのwebは以下のものがあります。

 

従来のweb(リッチで使いやすいwebを作るためにJavaScriptが必要)

  • JavaScriptがなくてもHPが見れる
  • レスポンスとして返しているのはhtml
  • ページを遷移するたびに、再レンダリングされる(ページ全体がレンダリング)
    →AJAXを用いて外部とデータをやり取りして必要なところだけをDOM操作してレンダリングする

 

 

JavaScript2の動画

次は動画2、JSの役割です。

 

JSの役割は以下の2つがあります。

  1. データのやり取り(パース(解析))
    JSONをHTMLに変換すること
    ※上記だけがパースではない
  2. DOM操作

 

この2つは重要!

 

模写を選ぶ

 

上記のようなリストを作成しました。

 

これらを模写していく予定です。

 

 

ちょうどエンジニアの友人からアドバイスをもらったのでそれも整理していきます。

  1. 友人が送ってくれたコードを写経する
  2. 模写
    ↓挫折
  3. 写経10サイトほど(1日1個、初級→上級)
  4. 模写

効率の良い方法がコレだそうです。

 

特に模写を一度作成し、挫折することが大切だそうです。

 

挫折を経験し、写経を1日1サイトすることが手っ取り早い方法だと聞いたので、こちらをやってみようと思います。

おわりに

JSのロードマップのようなものを作成してから勉強したほうが良いことを学んだので今日は、興味を持つことと計画しました。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada