Web プログラミング

【もりけん塾11日目】課題『JavaScript本格入門』とコード模写

もりけん塾生になって11日目のねこらのん(@nekoranon256)です。

 

今日のタスクはコレ。

 

進捗や学習内容を記事にしていきます^^!

 

Webエンジニアになるためのロードマップを書き直す

再度Xmindで整理。

 

まず他にもたくさんあるけど、これで状況把握。

先を見据えた考えが強いかな。

 

JavaScriptについて知らないことが多いと感じたので調べて整理。

JavaScriptでこんなにたくさんできるんだな〜

 

そして求人から必要なスキル。

 

これからHTML&CSSは一通りProgateをした程度のレベルなので模写をすることに。

模写については後述します。

 

フォトショイラレは3年前に田舎フリーランス養成講座でほんの少しつついた程度なので完全未経験。

 

ココナラでWeb制作ランキングトップの方のできることを調べました。

  • デザイン
  • 文章作成
  • コーディング
  • SEO対策
  • 素材収集
  • PC、タブレット、スマホ対応
  • https化
  • 文章画像の変更マニュアル
  • ドメイン&サーバー設定&アップ
  • WordPress化、導入
  • メールフォーム
  • 予約、カート、決算などシステム埋め込み

う〜んこの中でできないことの方が多い…

この人と同じココナラでってなっても難しいから差別化図る事も大切。

だけどできることを増やすことも大切かな!

 

とすると昨日作成したロードマップは非常にレベルが高すぎるような期間のかけかたなので目標設定しなおす。

 

調べていたらsamuraiというHPで自分にあう言語診断?のようなものがあったのでやってみました。

引用:Samurai

 

これを参考にロードマップを作ろうかなと。

期間 すること
~7/15 スキル基礎学習
・HTML&CSS
★CSS
・flex, or gridで横並びができるようになる
・position absolteとrelativeの違いを理解できて、2つのwidthが違う要素で中央配置ができるようになる
・擬似属性とボーダーだけでアイコンを作ることができる
・media queryでスマホ対応できる
・display blockとinline-block, inlineの違い、できることを理解

・JavaScript
JS
Arrayのメソッド
for文
Stringのメソットに重点をおく
・PHP(お問い合わせフォーム)

★guthub
・変更をpushすることができ、github上でぷるりくをmergeできること
・リモートブランチからpullで変更を取り込むことができること

Bootstrap
・UNIXコマンド
・フォトショとイラレ

・本
・環境構築
・ネット検索しつつ理解
7/16~8/15 HPを模写
LP作成
ポートフォリオ作成3件
WordPress・LP案件取得
・ココナラ
・ランサーズ
・知人から
・わかりやすいサイトから模写
①HTML&CSS
【レベル別】模写コーディングにおすすめのサイトまとめ9選
WordPressのテーマ「write」を模写
②JavaScript含む
エアビー
デイトラの途中にあるLP制作でする
・ポートフォリオ3件作成
①HTML&CSSからできるHPー2件
②JavaScript含めたHPー1件
・WordPress案件とLP制作案件を中心に取得
8/16~9/15 【実績を積む】
HPを模写
WordPress・LP案件取得
・ココナラ
・ランサーズ
・知人から★8月〜9月で知人からのLPを完了する
WordPress案件とLP制作案件を中心に取得

一旦9月15日までのロードマップを作成しておきます。

 

前のロードマップよりも現実性があるかな?

もっと細分化できたり抜けている点はあると思うのでそのあたりは変更していきます。

 

HP模写する

模写していたら、途中で「アレ?」これで会ってるのかな?

 

と疑問に思ったので、途中で一旦辞めて調べることにしました。

 

【実録】HTML/CSSコーディング模写で挫折したけどリベンジ成功した方法

 

こちらの記事を参考にしました。

 

私が挫折した模写コーディングの手順

  • とりあえず上から順番に作ろう(手順がわからない)
  • ヘッダーのmarginはこれくらい?(目測に頼ってしまう)
  • divが入れ子すぎるけど大丈夫?(標準的な構造がわからない)
  • マージンが効かないけどなんで?(タグの規則がわからない)
  • 不安になってきた
  • 何が書いてあるかさっぱりわからない
  • この通りに書けるようにならなきゃいけないの????
  • 無事挫折

引用:【実録】HTML/CSSコーディング模写で挫折したけどリベンジ成功した方法

 

手順が分からないなぁと。

 

となり一度Progateの模写やサイトで確認しようと思います!

HTML&CSS

Progateで学んだことのおさらいの部分だったので割愛。

JavaScript

JavaScriptについてネットで調べていると、演算子、ループ、条件あたりが重要だと記載があったので昨日した部分を見直しました。

演算子中にオペレーターとオペラントがあります。

 

オペレーターは

  • +
  • -
  • *
  • /
  • %
  • ++(前置加算、後置加算)
  • --(前置減算、後置減算)

上記のものがあります。

 

オペラントは数字的な部分の場所。

 

引用:山田 祥寛. 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (Japanese Edition) (Kindle の位置No.1114). Kindle 版.

 

この2つが本中に結構登場してきたので、ここも覚えるべき場所かなと思い再度記載。

 

以下がループ関係のものです。

引用:山田 祥寛. 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (Japanese Edition) (Kindle の位置No.1114). Kindle 版.

 

無限ループ。

 

引用:山田 祥寛. 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (Japanese Edition) (Kindle の位置No.1114). Kindle 版.

この無限ループをわざと生み出すこともあるそうですが脱出ルートを作る必要があるようです。

 

その方法がbreak。

 

breakはループを中断するという意味があるようです。

おわりに

今日は改めてロードマップを作成したので、明日はそれにより近いような行動をしていこうと思います。

目標と現実が親しいとやる気になる…!

 

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada