プログラミング/仕事

【質問回答】JavaScriptはどこまで勉強すれば? Gulpの中身教えて?青色申告ですか?ロードマップ古い?おすすめPCは?

JavaScriptはどこまで勉強すればいいの?

こんにちは、現在フリーランスのWeb制作者として3年ほど活動しているしょーごと申します。

この記事は私、しょーごがみなさんのYouTubeコメント欄での質問に答えていくコンテンツになります。

質問がある方はYouTubeコメント欄に書き込んでいただければ、もしかしたら次回以降採用されるかもしれません。

それでは、一問一答いきましょう!

しょーごログ YouTube

❶Web制作ロードマップについて

質問者さん
質問者さん
いつも動画の投稿ありがとうございます。大変参考になっております。

以前Web制作のロードマップを出されていたかと思うのですが、この内容は2021年現在でも通用するものでしょうか。

拝見させていただいたところ、最後のWordPress課題で指定されている教材は公開終了しているようですし、もし最新の内容など出される予定がありましたら、ぜひお願いしたいと思っております。

Web制作ロードマップに関して

web制作完全独学ロードマップ

以前私はこのような動画を出しておりました。

Progateのあと、Web制作実務まで具体的にどうすればよいかを詳細に解説しているコンテンツになります。

この動画のロードマップはその後修正を重ねまして、このブログ記事でのものが最新になります↓

内容は常にアップデートをしておりますので、2021年現在でも有効だと自負しております。

最後のWordPress課題の変更

当初はnoteで公開されているデイトラ卒業課題を最後に据えておりましたが、公開終了されてしまったため、

現在は私が出している『【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】

こちらに差し替えています。

また、2021年最新版の内容は別途YouTubeでも公開予定ですので、もう少々お待ち下さい。

❷JavaScriptの勉強方法について

質問者さん
質問者さん
JavaScriptをどこまで勉強すればいいのかわかりません。

以前JS-Proやろうとおっしゃってたようですが、どこまでやればいいのかわかりません。

具体的にゴールの目安とか教えていただけないでしょうか?

前提として以前このような記事・動画を出していました。

まずWeb制作とWeb開発どちらかで変わる

Web制作の場合

jQueryをあらかた理解しているという前提でお話します。

以前の記事で紹介したとおり、まず『確かな力が身につくJavaScript「超」入門 第2版』を学習してください。

その後はDOM操作の学習に入ってください。

Web制作での「よくあるパーツの実装」を行うと良いです。

  • アコーディオン
  • ハンバーガーメニュー
  • タブ
  • スライド
  • ローディング
  • モーダル

これらをjQueryやライブラリを用いずJavaScriptで書いてみてください。

その過程で、

  • console.logで変数のに何が入っているかを覗く
  • Chromeデベロッパーツールのブレークポイント機能で途中で処理をとめつつ、変数の中身を追う

これをやってみてください。

使用教材はドットインストールでもいいですし、私が出している『【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】』でもいいと思います。

JSのデバッグ方法について

https://ics.media/entry/190517/

また、実際に手を動かすのと平行して以下の本を辞書的に読むのがおすすめです。

注意点として、これらを全部理解するのは不可能なので気になった部分だけかいつまんで読んでいく形になります。

あとはあまりWeb制作と関係ない勉強をすると長続きしないので、

基本的に実案件でJavaScriptを実装しつつ、スキルアップを図るのがいいと思います。

Web開発の場合

将来的にフロントエンドエンジニアになりたい、または現在サーバーサイドエンジニアでフロントもできるようになりたい場合は、

上で紹介した本二冊をこなしつつ、Vue,Reactの知識を入れていく必要があります。

まずはTechpitで学習してみればいいかなと思います。

https://www.techpit.jp/

しょーご
しょーご
Techpitは実際に物を作りながら学べるサービスになります。

これと並行して、Vue,Nuxtの本なら以下がわかりやすかったので見てみるといいかなと思います。

このようなnoteも出ていますね。

https://note.com/cohki0305/n/nd27dcd7554cd

参考書をずっとみていても理解できないので、どれだけ手を動かせたかが重要です。本は平行して使用しましょう。

フロントエンド就職転職はサーバーサイドより難しい

求人の数でもそうですが、サーバーサイドより就職転職は厳しい傾向にあります。

サーバーサイドが書けて、プラスアルファでJavaScriptがかけるエンジニアが求められているため、

RUNTEQなどのスクールも、RailsメインにVueも教えてたりします。

それを踏まえた上で『JavaScriptを学んで自分はどうしたいのか』を明確化しておいたほうがいいかなと思います。

❸開業届・青色申告

質問者さん
質問者さん
しょーごさんは開業届を出していますか?青色申告でしょうか。

私は開業届も青色申告承認申請書も出して利用しています。

これらの利用方法は超簡単なので、以下記事を参考にしてみてください。

開業書類は『開業freee』で5分で作れますし、正直青色でなく白色であるメリットもないです。

普段の会計も『会計ソフトfreee』使えば簡単なので、構える必要はないです(私は簿記の知識0です笑)

❹案件獲得方法

質問者さん
質問者さん
はじめまして。コメント失礼いたします。

しょーごさんの動画を拝見し つい先日デイトラを始めたものです。いつもわかりやすい動画参考になります。ありがとうございます。🙇🏻‍♂️

デイトラ終了後、具体的にどのように案件を獲得すれば良いのか、どのように営業をしていけば良いのか知りたいです。

よろしくお願いいたします。

デイトラ内営業コンテンツ

デイトラはWebスキルを学べるオンラインスクールで、私も以前レビューしております。

デイトラ内の初級編に営業コンテンツがあるはずなので、まずはそこの直営業の手法を試してみてください。

また、営業コンテンツが2021.05に追加されるので、そこも参照してみてください。

このデイトラレビュー記事でも内容更新予定です。

その他の営業方法

他にいくつか候補を上げるとすれば、

  • 企業とフリーランスのマッチングサービスの活用
  • 制作会社への営業

などがあるかと思います。

いずれも記事を書いていますので、そちらを参照してみてください。

❺Gulp

質問者さん
質問者さん
gulpに何を入れてますか?

gulpfileを見たいです。

Dart Sassに移行中…

すみません、私も現在Dart Sassに移行中になります笑

Node SassからDart Sassへの書き方の違いや構築方法は以下の記事に譲ります。

https://haniwaman.com/dart-sass/

https://tips-web.net/gulp4-windows/

今から構築される方は、基本的にDart Sassで構築されることをおすすめします。

ネット上の多くの情報はNode SassでSassをコンパイルさせているので、注意しましょう。

しょーご
しょーご
わしの@importを返して…

❻PC選び

質問者さん
質問者さん
大学のpcとプログラミング学習のためにbto方式のものを購入しようと思っています。

現在、マウスコンピュータのx5-r7のメモリ18g.ssd512のものにしようと思っているのですがオーバースペック過ぎますでしょうか?

個人的に欲を出すならば少し頑張って、sad1tの物にできればかなり安心かと思っています。

それでも生協で紹介されているものに比べるとだいぶ高スペックで、将来的にも良いと思っているのですがいかがでしょうか?

よろしくお願いしますm(_ _)m

基本問題なし、プログラミングで何をするのか次第

基本的に問題ないと思います。

機会学習で負荷をかけるのでない限り、一般的なWebプラグラミングでは問題ないかなと。

AMD Ryzen™ 7 4800H プロセッサーはノートPCのCPUとして強力で、 SSD容量も申し分ありません。

メモリが8GBなのが不安かなと思いますが、Webデザインや動画編集、映像制作をメインにしないのであれば、問題ないかなと思います。

価格も10万ほどで購入できるようなので、生協で購入するより全然性能いいと思いますね。

現行モデルはメモリ16GBあるので、この点も問題ないようです。

おわりに

しょーごログ YouTube

このチャンネルでは定期的に一問一答を行い、みなさんの疑問点を解消していきたいと思います。

本日は以上です。

https://www.youtube.com/channel/UCdMzoB8z-zUwNOS9ZC4FsAQ/videos

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. XD,PSDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

さらに、まとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

あなたに是非読んでほしい記事です!