【2020年最新】web制作のjQuery,JavaScriptの勉強方法まとめ【一年半思考錯誤した】
Summary
TLDRこの動画は、2020年の最新web制作において、jQueryとJavaScriptの学び方を紹介しています。プログラマーが効率的にスキルを身につけるためのロードマップを作成し、様々な学習サービスをチェックして紹介しています。jQueryの価値とJavaScriptの重要性についても話されており、初心者から実務レベルまで引け上げられるような良質な参考資料やサービスを紹介しています。
Takeaways
- 🌟 自己紹介:2018年からプログラミングを始めて、現在はHTML, CSS, JavaScript, WordPressをメインに仕事をしています。
- 📚 jQueryの学習法:Web制作で頻繁に使用されるため、最初にjQueryを学ぶことが重要です。
- 🚀 プロゲートの理解:JavaScriptの基礎的な考え方と主要なメソッドを学ぶことで、効率的にWeb制作スキルを向上させます。
- 🎨 jQuery標準デザイン講座:Webサイトに品質のUI機能を実装し、jQueryの基礎を学ぶことができます。
- 🔌 プラグインの実践:実際に使ってみることで、jQueryの柔軟性とカスタマイズの可能性を理解できます。
- 🔥 JavaScriptの学習:Web制作において生のJavaScriptを使用することも必要であり、より高度なスキルを身につけるために重要なステップです。
- 📖 JavaScript超入門書籍:この書籍を活用することで、JavaScriptの基礎から応用まで網羅的に学ぶことができます。
- 🌐 js.do(JavaScriptの学習サービス):オンラインのハンズオン形式の学習で、より実践的なスキルを身につけることができます。
- 🛠️ ドットインストールのWebアプリ作成コース:実際のWebアプリケーションを作成することで、デバッグスキルを向上させることができます。
- 🔍 デバッグの重要性:プログラムの動きを確認し、問題を解決するスキルは、プログラマとして不可欠です。
- 🚀 継続的な学習と実践:自分でプロジェクトを行い、デバッグや実装を繰り返すことで、技術を磨くことができます。
Q & A
脚本中提到的学习JavaScript的首要原因是什么?
-脚本中提到,学习JavaScript的首要原因是因为Web制作中经常会使用到JavaScript,而且在Web制作领域,JavaScript仍然是主流技术。
为什么脚本中建议初学者首先学习jQuery?
-脚本中建议初学者首先学习jQuery,因为在Web制作中,jQuery几乎每次都会用到。尽管有人认为jQuery已经过时,但在Web制作现场,jQuery仍然是主流技术,且有很多项目在使用。
脚本中提到的JavaScript超入门书籍有哪些特点?
-脚本中提到的JavaScript超入门书籍是基于最新文法ES2015编写的,内容涵盖从基础文法到Web API和JavaScript对象等概念,适合作为学习JavaScript的入门教材。
脚本中提到的js.doit.im是怎样的一个学习平台?
-js.doit.im是一个专注于JavaScript学习的在线平台,提供汉兹オン形式的教学和教科書形式的教材,适合与JavaScript超入门书籍并行学习,帮助学习者全面掌握JavaScript知识。
脚本中为什么推荐使用ドットインストール进行JavaScript学习?
-ドットインストール提供了实际的Web应用创建课程,通过动手实践可以加深对JavaScript知识的理解。同时,这些课程也有助于学习者进行有效的デバッグ练习,提高解决问题的能力。
脚本中提到的学习JavaScript的顺序是怎样的?
-脚本中推荐的JavaScript学习顺序是:首先是掌握jQuery,然后学习JavaScript基础知识,接着通过js.doit.im和JavaScript超入门书籍深入学习,最后通过ドットインストール进行实践操作和デバッグ练习。
脚本中提到的JavaScript学习中,初学者常犯的错误是什么?
-脚本中提到,初学者常犯的错误是试图重新发明轮子,即不必要地从零开始编写代码,而应该利用现有的插件和框架来提高效率。
脚本中提到的JavaScript学习效率低的原因可能是什么?
-脚本中提到,JavaScript学习效率低的原因可能是没有找到合适的教材和学习方法,或者是没有结合实际项目进行实践操作。
脚本中提到的Web制作中常用的JavaScript框架有哪些?
-脚本中提到,Web制作中常用的JavaScript框架包括jQuery、Vue.js、React等,这些框架可以帮助开发者更高效地构建Web应用。
脚本中提到的JavaScript学习资源有哪些?
-脚本中提到的JavaScript学习资源包括JavaScript超入门书籍、js.doit.im学习平台、ドットインストール的Web应用创建课程等。
Outlines
🚀 プログラマーとしての自己紹介と勉強方法の共有
この段落では、プログラマーが自分自身の経歴と専門性を紹介し、プログラミングを始めてからの経過や現在の業務内容について語ています。彼は2018年3月からプログラミングを始め、フリーランスとしてウェブサイトの制作を行っており、HTML、CSS、JavaScript、WordPressを主力としています。また、彼は効率的なJavaScriptの勉強法を模索し、高額なプログラミングスクールを除き、様々なサービスを再度確認した結果、学習効率が良いJavaScript学習のロードマップを作成しました。この動画では、その方法を紹介し、視聴者に効率的な学習教材の選択を助けることが目的とされています。
📚 jQueryとJavaScriptの効果的な学習法
この段落では、jQueryとJavaScriptの効果的な学習法について説明しています。jQueryはWeb制作で非常に有用であり、主流的地位を維持しています。初心者でも実務レベルまで引き上げられる良質な参考書や学習サービスが現れています。この動画では、プログラミングの基礎的な考え方や主要なメソッドを学ぶことが重要であり、jQueryの標準デザイン講座やプラグインを使った開発の方法についても触れています。また、JavaScriptの学習も重要であり、Web制作で生のJavaScriptを使うことが多いため、jQueryの次にJavaScriptの学習を進めることが推奨されています。
🛠️ JavaScriptの学習とデバッグの重要性
最後の段落では、JavaScriptの学習方法とデバッグの重要性について語ています。JavaScriptは現在非常に注目されており、フロントエンドだけでなくサーバーサイドでも必須の知識となっています。この動画では、確かな力が身につくJavaScriptの超入門という書籍や、jsプロというサービスを紹介し、ハンズオン形式で学ぶことを推奨しています。また、ドットインストールのWebアプリ作成コースも紹介されており、デバッグの練習を通じてJavaScriptの知識を深めることが重要であると強調されています。
Mindmap
Keywords
💡プログラミング
💡HTML
💡CSS
💡JavaScript
💡jQuery
💡WordPress
💡フレームワーク
💡プラグイン
💡デバッグ
💡オンライン学習
💡Web制作
Highlights
自己紹介:2018年3月からプログラミングを始めて、現在はHTML, CSS, JavaScript, WordPressをメインに仕事をしています。
日本における効率の良いJavaScriptの勉強法について考えていたこと。
最近、初心者でも実務レベルまで引き上げられる良質な参考書や学習サービスが出ているとのこと。
JavaScript学習のロードマップを作成し、効率的な学習方法を紹介する予定。
プログラミングの勉強方法は目的によって変わってくることの重要性。
Web制作に特化した効率の良いjQueryの勉強法について話す。
jQueryはWeb制作でほぼ毎回使うため、最初に取得しておく価値が高い。
プロゲットを行って、プログラミングの基礎的な考え方と主要なメソッドを学ぶ。
jQuery標準デザイン講座を通じて、Webサイトに品質のUI機能を手動で実装し、jQueryの基礎を学ぶ。
プラグインを使った開発で初心者でも高度な動きをつけることができる。
JavaScriptを学ぶ理由:Web制作で生のJavaScriptを使うことが多くなり、また将来的には他のフレームワークやライブラリの知識が必要。
確かな力が身につくJavaScript超入門という書籍を紹介。
jsプロというJavaScript学習サービスを利用し、ハンズオン形式で学ぶ。
ドットインストールのWebアプリ作成コースを通じて、デバッグの練習を行う。
jQueryとJavaScriptの勉強を通じて、Web制作におけるJavaScriptの知識を必要充分に身につけること。
Web制作において、JavaScriptのバンドラーの学習やReact, Vue.jsなどのフレームワークの学びにも進むべき。
この動画はコメント欄から着想を得たもので、視聴者からの質問や問題を深堀りする予定。
チャンネル登録やいいね!を促し、視聴者がコメントしてくれた問題を採用する可能性が高いと述べている。
Transcripts
はい小5です今回は2020年最新 web 制作の jquery
javascript の勉強方法まとめというタイトルでお話をしていきますまず
軽く僕の自己紹介なんですけれども2018年3月からプログラミングしはじめまして
8月よりフリーランス web サイトを制作する仕事を行っており現在は html
css javascript
wordpress をメインにお仕事をしております web サイトやサービスを
開発制裁に必ずと言っていいほど使うのがジェイクエリア javascript な
んですけれども皆さんどうやって勉強されてますかね
おそらくこれでいいのかなぁって日本に思いつつ
悩みながら勉強されてるんじゃねーかなと思います
私自身もつい最近まで公
効率の良い javascript の勉強法を模索しておりました
特に web 制作に特化した方法というのは本当に存在しないんですね
ただ最近は初心者でも実務レベルまで引き上げられる
良質な参考書や学習サービスというのが出てきています今回動画を作りに当たりまして
高額プログラミングスクールを除く
各種サービスを
を再度確認した後に
もっとも学習効率が良いチェックより javascript 学習のロードマップを
作成しましたので紹介させていただこうかなと思います
ここで紹介する方法をご覧いただければ明日から学習し教材をまあ自分で吟味して選定
する必要はありませんし
javascript がプションコツもお伝えしますので是非最後までご覧ください
ここで紹介し
させて頂いた教材やサービスは概要欄のブログの url より確認していただけます
またこのチャンネルでは皆が疑問を持つの稲荷へに開設されてこなかった
問題をより深堀りしていく予定なのでチャンネル登録といいねの方よろしくお願いし
ます
また是非これをやってくれというものがあればコメント欄に書いていただければそっち
を採用する可能性が非常に高いですので是非お書き込みいただければと思っております
ちなみに今回の動画もコメント欄から着想を得たものになります効率の良い勉強方法を
紹介する前にまずはプログラミングの勉強方法は目的によって変わってくるということ
をお伝えしておきます
今回紹介する方法は web 制作にと
お菓子ておりますので web 制作で使える jquery の取得を最優先とし
ましてその後 web 制作でもサービス開発でも生きる javascript の
効率の良い勉強法てのお伝えしていきます
最初から web サービスアプリケーションをつけられたい方はそもそも j クリ
を学習する必要はないので
動画後半の javascript から学習していただくのがいいかなーって思い
ます
私も今から紹介する方法を得て最近 bjs の勉強を再開したんですけれども
以前より圧倒的に頭に入ってくるようになりましたので
ビューやリアクトといったイケてる
フレームワークに興味のある方にも参考になるはずですまず jquery の勉強法
からですね
なぜ最初に jquery かというと web 制作でほぼ毎回使うからなんですよ
ね jquery は最中にオワコンなどと言われているんですけれども
web 制作の現場ではまだまだ主流ですし
jquery の実相脳波をかなりネット上に溢れています
ので今でも普通にプロジェクトに使われますしつか意外とだいぶ苦労することになるか
なって思います
回収案件でも動きの処理は jquery で書かれていることが多いですし
またプラグインを使った開発で初心者でも高度な動きをつけることが可能ですので
web 制作でお仕事をする場合は最初に取得しておく価値というのは非常に高いです
で
まずはプロゲットを一蹴ですね
まずは鉄板のプロゲートを行いましょうおそらくこの動画をご覧の方はほとんどを
すでに話しているかもしれないんですけれども
プロゲートのジェイク入れて重要な部分っていうのはプログラミングのキス基礎的な
考えと主要なメソッドを伝え方を区域だけでも把握することなんですねえ例えば
ぷろげー
との jquery 上級編にはスライド操作
ホーム階の入力チェックページ内のリンク移動があります
別にこれらの実装っていうのは実際はプラグインを使うかコピペで終わってしまうので
一から書く必要なんてないんですよね
それこそ車輪の再発明になるんですけれども
しかし仕組みを知るには格好の教材なんですよね
仕組みを知らないとまぁこの後説明するんですがプラグインを使っても細かな
カスタマイズを行うとなるといとも簡単に積んで見積もりコースが余裕で3倍になっ
たりするのでまぁとても重要になります
プロゲートを行う際は実際に作る完成物よりもプログラミングの基礎的な考えや主要な
メソッドを使い方を方
に入れておくといいかなと思います次にへ jquery 標準デザイン講座ですね
こちらの教材のいいところは実際に web サイトに品質の ui 機能を手を
動かし実装していけるという部分と難易度的にプロゲートから行くとちょうどいいって
いうことですね他のプログラミング今日勢に見えるんですけれども基本的には今日勢は
2種類に分かれてまして網羅的にしようが抱えている教科書形式
が実際にモノを作るハンズオン形式か教科書形式は中級者以上にとなって細かな仕様を
調べたりさえ重宝するんですけれども
初心者の状態で見てしまってもホンダのフ安いになることが目に見えていますので実際
にモノを作る hanzo 景色が初学者に重要ということになります
jquery 標準デザイン
口座の場合は30分ものパーツ作成を通してガッツリ jquery の基礎を学ぶ
ことができますし
難易度的にもモチベ高く取り組みいるのでオススメです
また全てをこなす必要はなく都度中身を見つつ有用だと思うのパッドを学習していけば
いいと思いますがここでも重要なのは完成物ではなく考え方や行動
というところですね例えばこの本の30のパーツの中にも明らかに使わなそうな物って
のまあ含まれてはいるのですが
そのパーツ作成の途中に使うメソッドなんかが重要だったりするのでぜひそこに着目し
て取り組んでいただけるといいのかなって思います
3番目がプラグインを実際に使って作ってみるって言うところですねまぁここまで
jquery を勉強してきたんですが実務だとプラグインで汚れの実装する事っての
も多いんですよね
そし
てプラグインに関しては教材でもな部のではなくて自分でググって実装するのが一番の
近道となります
ちなみに私の場合は自分のポートフォリオサイト作りつつ初めて jquery の
プラグインを使ってまぁ色々カスタマイズなどを行いました
例えば画像をクリックして拡大させたいなら
り tjs スライダーなら slick
ホームバリデーション7チェック襟バリデーションぷラリーなどが挙げられます
せっかくジェイクに勉強しのプラグインで間に合いそうじゃんってまあ
思われるかもしれないんですが実はプラグインはパンマン使えるものでもないんですよ
ね
読み込めば読み込むほどサイトの表示速度が下がっていくという特性がありますので
プラグインは基本的に実装が面倒
西複雑なもの限定にするべきでしてそうでないハンバーガーメニューだったり
トップに戻るボタンだったりアコーディオン見てまあそういった簡単なものは自分で
書いて実装するて皆最低がセオリーになります
また単純に自分が実現したい今回はクリップ狩りタッチしてくれるプラグインがない
ことも多いのでその場で自作する必要がありますから
いくらプラグインが便利だからといってジェイクいる事態の勉強から逃げる理由には
残念ながら並べるんですよね
ここまでて jquery の勉強法はあるいったおります
はいここからは javascript の勉強になり
ます jquery の次に javascript を学ぶ理由は web 制作で
は生のジャバリ
スクリプトまあ書くことは多くはないとはいえ案件や会社によって重くなりやすい
ジェック入りそのものの使用禁止だったり
今後はジェイク役から生の javascript や体育タイプスクリプトなどの
おりと js
また別のフレームワークに移っていく流れ
が確実にあると web api やをライブラリの使用で javascript の
オブジェクトなどの知識が必要不可欠になるからですね
また java スクリプト自体が現在かなり盛り上がってまして
フロントだけでなくサーバーサイドでも必須の知識になっていてもはやプログラマーの
教養とかしているところから
今後を考えるとぜひが
復習しておくことに越したことはないということになりますはい
ここから javascript の不停的な学習手段について解説していきます
まず一つ目が確かな力が身につく javascript 超入門というこれは書籍
ですね
まあ私が特に苦労したのが javascript の学習書籍探しだったんですけど
も本当に方で難易度的に程よくかつハンズオン形式の教材って全然なくてようやく
見つけたこちらの書籍が正
あああ唯一と言っていいことだと思いますさらにこちらの教材は javascript
最新文法の es 2015に基づいているのもをとても良いポイントですね網羅しれ
ないようもう基礎文法用いた動画操作から最後に web api や a ジャック
さん概念暖房でできますので一番最初のとっかかりとしては別な教材かなと確信して
おります
次に利用するのが js プロですねまあ次にというかその最初に今紹介したその確か
な力が身につく javascript の本と同時並行で進めていただきたいんです
けれども
こちらは最近スタートした javascript という js の学習サービスな
んですが
明示的には javascript に特化したプロゲートという意味
ページですねハンズオン形式で教科書的でもあり教材なんですが
前日の超乳もっと併用していただくことで必要な知識が網羅的に身につきます
現在はリリースしたばかりということで月額500円で利用することができますが5月
31日おい穴がつく1980円になるようなので
早めに登録して学習を進めておくといいかもですね
とにかく教材のクオリティとわかりやすさがピカイチなので全員にお勧めした教材に
なりますって
3つ目がドットインストールですね
ここで.にストローが入ってくるんですがまぁなぜこのタイミングって思われるかも
しれないんですけども
実はドットインストールにはハンズオンで実際に web apple 作るコースな
対応に存在するんですよねまあ大量といってもならこうなんですけども
おみくじストポッチータイピングゲーム3択クイズスライドショーフロット
ファッション
数字等レントマーチ不十分ですよね
まあこれらをひたすら話していきますここでまぁドットインストールを入れた理由と
いうのは2つあるんですけどまず一つ目
レベル的に少し難しいと感じる程度不可能ではないということですねドット
インストールの演習てアイド的に普通に難しくて
まあ解説の最低限なので何の前知識もない状態で挑むとまぁ普通に挫折すると
思いますただ皆さんここまでで javascript の既存に付けられているます
ますので
レベル的に頑張れば理解できるんですよねで少し難しい程度が学習のゾーンに入りやす
いって言われてますのでこのタイミングで行うがちょうどいいということになりますで
2点目
デバッグの練習になるということですねおそらく javascript の既存
あっても初見では理解できない部分あるかと思うんですがあそこでまぁ
ぜひこのタイミングでですねデバッグの練習をしていただきたいなって思ってます
デバッグっていうのは確定的にはコンソールログで値を確認するっていうことですね
プログラミングでは動きを確認するために変数やオブジェクトの中身を確認するための
関数
javascript の混ストールログだったり php のバーダンプなどがある
のですがこれらを使ってプログラムの動きを逐一チェックしていく必要があるんですね
これらをドッドインストールの web アプリ作成でぜひ習慣付けてほしいなと思い
ます
はからね処理が出てきたら都度コンソールログで一つ一つ中身を確認していくっていう
行程ですね
まあこれは詳しい説明省きますが気になる方はブレークポイントなどの言葉で打って
いただけるとより理解が深まるかなーって思います
はい狛江かなり重めな内容となってしまったんですがここまでできれば web 制作
における javascript の
知識は必要充分ですのであとは自分で案件で javascript 触りながら
デバッグしつつ実装して成長できると思います
また付随する技術として最近は web 制作でも使われている
web パックといった javascript のバンドラーの学習を進めてもいい
かなぁと思います
またフロントエンド方面に進みたい方でもビュー js へリアクトと一択
ゲームアップを勉強するのに必要な java スクリプト基礎力はここまでで十分に
ついている状態なのでそちらに進んで自分で web アプリケーションを作ってみて
もいいと思いますというわけでここまで jquery javascript の
javascript の勉強とまとめ撮りたい撮りでお話をしてきました
ご視聴いただきありがとうございましたそれでは良い javascript ライフ
をバイバイ
Voir Plus de Vidéos Connexes
5.0 / 5 (0 votes)