こんにちは、現在フリーランスのWeb制作者として3年ほど活動しているしょーごと申します。
この記事は私、しょーごがみなさんのYouTubeコメント欄での質問に答えていくコンテンツになります。
質問がある方はYouTubeコメント欄に書き込んでいただければ、もしかしたら次回以降採用されるかもしれません。
それでは、一問一答いきましょう！
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
❶Web制作ロードマップについて
以前Web制作のロードマップを出されていたかと思うのですが、この内容は2021年現在でも通用するものでしょうか。
拝見させていただいたところ、最後のWordPress課題で指定されている教材は公開終了しているようですし、もし最新の内容など出される予定がありましたら、ぜひお願いしたいと思っております。
Web制作ロードマップに関して
以前私はこのような動画を出しておりました。
この動画のロードマップはその後修正を重ねまして、このブログ記事でのものが最新になります↓
内容は常にアップデートをしておりますので、2021年現在でも有効だと自負しております。
最後のWordPress課題の変更
当初はnoteで公開されているデイトラ卒業課題を最後に据えておりましたが、公開終了されてしまったため、
現在は私が出している『【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】』
こちらに差し替えています。
また、2021年最新版の内容は別途YouTubeでも公開予定ですので、もう少々お待ち下さい。
❷JavaScriptの勉強方法について
以前JS-Proやろうとおっしゃってたようですが、どこまでやればいいのかわかりません。
具体的にゴールの目安とか教えていただけないでしょうか？
前提として以前このような記事・動画を出していました。
まずWeb制作とWeb開発どちらかで変わる
Web制作の場合
jQueryをあらかた理解しているという前提でお話します。
以前の記事で紹介したとおり、まず『確かな力が身につくJavaScript「超」入門 第2版』を学習してください。
その後はDOM操作の学習に入ってください。
Web制作での「よくあるパーツの実装」を行うと良いです。
- アコーディオン
- ハンバーガーメニュー
- タブ
- スライド
- ローディング
- モーダル
これらをjQueryやライブラリを用いずJavaScriptで書いてみてください。
その過程で、
- console.logで変数のに何が入っているかを覗く
- Chromeデベロッパーツールのブレークポイント機能で途中で処理をとめつつ、変数の中身を追う
これをやってみてください。
使用教材はドットインストールでもいいですし、私が出している『【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】』でもいいと思います。
また、実際に手を動かすのと平行して以下の本を辞書的に読むのがおすすめです。
あとはあまりWeb制作と関係ない勉強をすると長続きしないので、
基本的に実案件でJavaScriptを実装しつつ、スキルアップを図るのがいいと思います。
Web開発の場合
将来的にフロントエンドエンジニアになりたい、または現在サーバーサイドエンジニアでフロントもできるようになりたい場合は、
上で紹介した本二冊をこなしつつ、Vue,Reactの知識を入れていく必要があります。
まずはTechpitで学習してみればいいかなと思います。
これと並行して、Vue,Nuxtの本なら以下がわかりやすかったので見てみるといいかなと思います。
このようなnoteも出ていますね。
https://note.com/cohki0305/n/nd27dcd7554cd
フロントエンド就職転職はサーバーサイドより難しい
求人の数でもそうですが、サーバーサイドより就職転職は厳しい傾向にあります。
サーバーサイドが書けて、プラスアルファでJavaScriptがかけるエンジニアが求められているため、
RUNTEQなどのスクールも、RailsメインにVueも教えてたりします。
それを踏まえた上で『JavaScriptを学んで自分はどうしたいのか』を明確化しておいたほうがいいかなと思います。
❸開業届・青色申告
私は開業届も青色申告承認申請書も出して利用しています。
これらの利用方法は超簡単なので、以下記事を参考にしてみてください。
開業書類は『開業freee
』で5分で作れますし、正直青色でなく白色であるメリットもないです。
普段の会計も『会計ソフトfreee』使えば簡単なので、構える必要はないです（私は簿記の知識0です笑）
❹案件獲得方法
しょーごさんの動画を拝見し つい先日デイトラを始めたものです。いつもわかりやすい動画参考になります。ありがとうございます。🙇🏻♂️
デイトラ終了後、具体的にどのように案件を獲得すれば良いのか、どのように営業をしていけば良いのか知りたいです。
よろしくお願いいたします。
デイトラ内営業コンテンツ
デイトラはWebスキルを学べるオンラインスクールで、私も以前レビューしております。
デイトラ内の初級編に営業コンテンツがあるはずなので、まずはそこの直営業の手法を試してみてください。
また、営業コンテンツが2021.05に追加されるので、そこも参照してみてください。
このデイトラレビュー記事でも内容更新予定です。
その他の営業方法
他にいくつか候補を上げるとすれば、
- 企業とフリーランスのマッチングサービスの活用
- 制作会社への営業
などがあるかと思います。
いずれも記事を書いていますので、そちらを参照してみてください。
❺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をコンパイルさせているので、注意しましょう。
❻PC選び
現在、マウスコンピュータのx5-r7のメモリ18g.ssd512のものにしようと思っているのですがオーバースペック過ぎますでしょうか？
個人的に欲を出すならば少し頑張って、sad1tの物にできればかなり安心かと思っています。
それでも生協で紹介されているものに比べるとだいぶ高スペックで、将来的にも良いと思っているのですがいかがでしょうか？
よろしくお願いしますm(_ _)m
基本問題なし、プログラミングで何をするのか次第
基本的に問題ないと思います。
機会学習で負荷をかけるのでない限り、一般的なWebプラグラミングでは問題ないかなと。
AMD Ryzen™ 7 4800H プロセッサーはノートPCのCPUとして強力で、 SSD容量も申し分ありません。
メモリが8GBなのが不安かなと思いますが、Webデザインや動画編集、映像制作をメインにしないのであれば、問題ないかなと思います。
価格も10万ほどで購入できるようなので、生協で購入するより全然性能いいと思いますね。
現行モデルはメモリ16GBあるので、この点も問題ないようです。
おわりに
このチャンネルでは定期的に一問一答を行い、みなさんの疑問点を解消していきたいと思います。
本日は以上です。
https://www.youtube.com/channel/UCdMzoB8z-zUwNOS9ZC4FsAQ/videos
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
Progateのあと、Web制作実務まで具体的にどうすればよいかを詳細に解説しているコンテンツになります。