【JavaScript入門 #9】これまで講座で学習した知識をフル活用しよう【ヤフー出身エンジニアの入門プログラミング講座】
Вставка
- Опубліковано 8 лип 2024
- 今回のJavaScript講座はこれまでの集大成です。
JSの仕事は「データのやり取り」「DOM操作」ですが、今回で実感できるかと思います。
今まで勉強して学んだJavaScriptの知識をフル活用しましょう。
今後もJavaScriptプログラミング講座は続けていきますが
新しい分野に突入します。そちらもお楽しみに♪
🐙 GitHub（使用したコード）
github.com/lightsound/javascr...
📙 もくじ
0:00 今回つくるものを紹介
1:27 コードを書く準備
2:46 JavaScriptでIDがついているタグを変数に格納
3:43 ボタンにクリックイベントを追加する
4:45 ユーザーを取得するWeb APIを叩く
6:41 ボタンを押してli要素が追加されるようにする
9:48 APIで取得したユーザーをli要素として追加する
12:37 名前以外にもli要素として追加することができる
13:40 forEach以外の書き方も紹介
15:13 if文で条件も追加してみる
17:20 ページを読み込んだときにユーザーをli要素に追加する
18:43 リファクタリング① 同じ記述を共通化する
20:46 リファクタリング② 処理を分解する
23:35 リファクタリング③ 順序を整理する
24:01 リファクタリング④ コメントを追加する
24:38 リファクタリングの重要性を解説
25:59 今回の講座は今までの講座の集大成です
27:19 クロージング（高評価とコメントお願いします）
🔥基礎から学ぶ JavaScript 入門
【第1回】フロントエンド開発でJavaScriptが必要な理由を解説
• 【基礎から学ぶ JavaScript 入門 ...
【第2回】Twitterを例にJavaScriptがどんな働きをするのか理解しよう
• 【基礎から学ぶ JavaScript 入門 ...
【第3回】オブジェクト・プロパティ・メソッドについて理解しよう
• 【JavaScript入門 #3】オブジェク...
【第4回】オブジェクトを実際にコードで書いてみよう
• 【JavaScript入門 #4】オブジェク...
【第5回】変数を理解しよう！var, let, constの使い分け！
• 【JavaScript入門 #5】変数を理解...
【第6回】初心者がつまづきがちな「関数」を分かりやすく解説
• 【JavaScript入門 #6】初心者がつ...
【第7回】匿名関数、高階関数、コールバック関数を攻略せよ！
• 【JavaScript入門 #7】匿名関数、...
【第8回】WebAPIを叩いてみよう！
• 【JavaScript入門 #8】WebAP...
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#JavaScript #フロントエンド #プログラミング講座 - Навчання та стиль
講座で使用したコードは概要欄に貼ってありますのでご確認ください🙇
今回でJavaScriptの基礎的な講座は終了になります。次回から新章に突入しますよー！🚀
アプリ開発の現場で使われる実践的なスキルにより近づいていきます！この調子でたくさん学んでいきましょう！
楽しくみています。ありがとうございます。🏟️
とても分かりやすい内容でした！
コードを作成する過程を見ることで理解が深まりました！
ありがとうございます！
見ていてワクワクして楽しかったです。
感動的なくらいわかりやすいです！React編期待しちゃいます☺️
1-9まで有意義な動画でした。
初心者がひっかかるところとかをちゃんと拾って解説してくれてわかりやすいです。
今後も期待しています
この講座全体を通して説明などを用いる際にたとえを分かりやすくしている工夫があって非常に助かります。リファクタリング以降から難しくて理解が追いつかず脳内がてんやわんやでした。
とてもわかり易い動画の配信、ありがとうございます🙇♂️ この基礎編、2回見ましたが、まだまだまだ理解出来てない事が多いので、何度でも見させて頂きます😎
実際にコードを書いての実践的な内容✨
すごくためになりました‼️ついていくのに必死でしたが、何回も繰り返し動画をみて感覚を掴んでいきます‼️
次回のJavaScript新章も楽しみにしてます‼️✨
いつもわかりやすい動画ありがとうございます！
Progateもドットインストールもやりましたけど、ここまでわかりやすく、かつ実践的なやり方は学べなかったので本当にありがたいです！
リファクタリングの方法とか、単に見落としてる可能性もあるけれど、流れの中で一緒に教えてくれているのですごく覚えやすいです。
まだプログラミングを初めて三週間ほどですが、この講座を通してJavaScriptをもっと知りたいと思えました！！！聞きやすく分かりやすくまだまだ理解とは程遠いですが繰り返し動画見させてもらいます😁
本当に総集編という感じで分かりやすかったです！
勉強になります！js苦手なので本当に助かります！！
最初にJavaScriptの概念、特にDOMについての説明があったのが大きかったです。点が線につながってきました。
ありがとうございました。
いつも、わかりやすくてタメになる講座をありがとうございます。今回の「データのやり取り」と「DOM操作」に分けて、段階を追っての説明は本当によくわかりました。一段階づつconsoleに表示していただき、プログラミングが徐々に複雑になっていく過程が示され、初心者にとって凄くよく理解できました。これからもよろしくお願いします。
わかりやすかったです、ありがとうございます！
javascript講座とても勉強になりましたっ
あざざっす
upお疲れ様です！
これからもよろしくお願いします！
労いのお言葉ありがとうございますー！！実はこの講座はつくるのがめちゃくちゃ大変で、時間がかかりました。そもそも教えたいことを詰め込みすぎて長くなってしまったのを反省(^O^;)
今回でとりあえずJavaScriptでモノを作っていく感じを伝えられたので、次回からはより実践的な講座をつくっていきます。概念理解が重要で、かなり難しい部分に入るので、より丁寧に分かりやすく作らねば・・・！
ありがとうございます！2日に分けて全部拝見しました。本だと最初から文法なので、どうしても、つまづきがちだったんですが、概要から説明してくれて、こういうものが作れますと例を出してくれたので、わかりやすかったです。自分の頭では、全て100％理解したとは言い難いのですが、最後までやり切ることができました。
とてもわかりやすかったです！！！
ありがとうございます！新章も期待していてください😁
少しずつ理解できてきました！
いつも有益な動画をありがとうございます。
少しずつでも進歩を感じているようで良かったです👍
これから更に難しくなっていきますが、一度で理解できないのは当然なので（私もそうでした）少しずつ、でも確実に学びを深めていってくださいね😌
めちゃ×２分かりやすい！
ありがとうございます。
もう少し、もう少しで理解できそうです。
もう一度見てみます。
定期的に復習しに訪れます。
毎回新たな理解があり、濃い内容だと改めて思います。
うおーーーそう言ってくださるのは嬉しい限りですーーー！
過去の講座をつくった自分を褒めてやりたいです笑
JavaScript講座をすべて見終わりました。私はJavaScriptは初学者で、本の模写をしながらReactでアプリを３つ作ってから最後の3講座を一気見しましたが、本では分かりにくかった部分や足りなかった部分などの理解を深めることができました。ありがとうございます！！モダンJavaScriptの講座も楽しく進められています！今後ともよろしくお願いいたします！！
講義の順番が本当によく考えられていて初心者でも納得しながら勉強できます。
リファクタリングの部分はとても参考になりました。因数分解のように共通項で括っていく感覚を自習で養っていこうと思います。
そのような評価をいただけて嬉しい限りです😋
はい、ぜひぜひリファクタリングを実際にやってみてスキルを高めていってください！
しっっっっぬほどわかりやすかったです。本当にありがとうございました
元自衛官のパソコン未経験で職業訓練でWeb基礎を学んで
今月から制作会社でWebデザイナーとして仕事をしている者です。
ずっとしまぶーさんの動画を見て勉強しておりますが
本当に理解しやすく苦手だったJSに少し自信がつきました。
本当にありがとうございます。
これからも沢山の動画楽しみにしてます!
UA-camでコメントをする日が来るとは思いませんでした。
私は全く初心者の状態からSlerにSoEとして新卒で入社したものの、途中から鬱っぽくなり、勉強しようと思っても情報が頭に入ってこなかったりして、1年で仕事を辞めてしまいました。
それから1年数か月たちましたが、改めて少しづつHTML,CSS,JS＋何かバックエンドで使用する言語１つくらいを自分で勉強しようと思っていたところにしまぶーさんのJS講座に出会いました。
JSに関しては本講座を通して当時分からなかったものが理解できるようになりました。
ありがとうございます。
これからも動画楽しみにしています！
おおおーーーー初コメントを私にしてくださってありがとうございます😂
講座も9章まで見てくださって、しかも少しでもお役に立てたようで、それも嬉しいです😭
私の親しい人にもSIer業界経験者がいるんですが、だいぶ心を病んでいたようで、私としても本当にオススメできないですね（もちろん会社による幅はあるかと思いますが）。自社開発系の企業では見たことがないので、私の動画を見てくださっている方はそういう企業にいけるようにプログラミングを学んでほしいなーと思っております。
今後もたくさん講座を出していこうと思っているので、ぜひぜひ役に立ちそうだと思った動画を見てくださいね✌✨
本だけでは理解しがたい部分も、非常に分かり易かったです！
ありがとうございます！そう言ってくださってめちゃくちゃ嬉しいです！😊
実際にコードを書いていく過程をお伝えできるのは、本にない利点ですね✨
JS入門編を終えました！ありがとうございました！
実践的で楽しく勉強できます🇯🇵🎌🇯🇵🎌
やったー！そう言ってくださって嬉しいです！😋
実践的で楽しい = 無敵ですね(^O^)
丁寧に説明があってすんなり1〜9までの講座が理解できました！
ありがとうございます！
ちなみに引数の説明がもうちょい欲しかったので、
1〜9まで終わった後にプロゲートで勉強し直してみたら、これまたすんなりと理解していけたので、かなり効果は、実感できています！
4月からJava Scriptを始めた者ですが、めちゃくちゃ勉強になりました！点と点を線に出来そうな気がします！貴重な学習動画を本当にありがとうございます！
点と点が線を意識して講座を作っていたので良かったですー😂
4月から始めたのはタイムリーですね。これからもJavaScript講座はたくさん出していくので、めちゃくちゃ学んでいきましょう！
JS入門編（#1～#9）お疲れ様でした。まさに点と点が線になった感覚です。また、これまでの独学でやってきた木を見て森を見ずの勉強方法と比べて、理解するスピードが全然違うことにも気づきました。そして最後のリファクタリングの説明もとても有意義でした。リファクタリングまで説明してくれた講座は初めて感動ですT_T 今後のJS講座も楽しみにしています！！^^
３０分はきつかったですが、勉強になりました。ありがとうございます。
わかりやすい動画いつもありがとうございます！！
動画の最後に、視聴者が挑戦するちょっとした課題があっても面白いかもしれませんね〜！
・・・！たしかに！！
毎回用意するのは難しいかも知れませんが、たまにやりたい・・・。今回でいうと、リストをDOM操作で削除するみたいなのは課題として出しても良かったかも知れませんね。有益なアドバイスをありがとうございます😂
とてもわかりやすく、プログラミングしてて楽しかったです！あと、Visual Studio Codeのショートカットも学べたので良かったです。
うおープログラミングが楽しい評価は最高です！楽しめたら学びも早いですもんね👍
VS Codeに関しては計画中の講座もあるので楽しみにしててください😁
こんばんは！私は今年ウェブデザイナー2年目になったのですが、１ヶ月前からプロゲートなど用いてjsの勉強をはじめました。しまぶーさんのjs講座がすごくわかりやすくて、本当に感謝しています；；もっとjsの動画を出していただけましたら幸いです！今回のようなチュートリアルなどでも嬉しいですので、お時間がありましたらぜひお願い致します…！
先ほど出来ないとコメントした者ですが、その後諦めずやってみたらできました。やはり諦めず検索したり、いろいろ試行錯誤し続けることは大切ですね。
構文を習うだけではわからなかったJavaScriptとは何なのか、少しですがようやく見えた気がします。ありがとうございました！
いつもありがとうございます！
新章はreactで何か作って欲しいです！
ブログとか
VSCODEでli*3とかできるなんて知らなかった！
Shift+Alt を押しながら下にドラッグで同時入力が補助できるなんて・・
動画もわかりやすいから心地よく学習できる・・・！
実用的でとても面白い講座です。
他のjavascript動画と一味違う特別な味を出してます。
リファクタリング以降の下りがとても勉強になりました。
コールバック関数の使い方を分かりやすくイメージできる動画は他に無かったので教材として使わせていただきます。
嬉しすぎます😂😂😂
結構難しいかな...とも思いましたが、そう言っていただけて嬉しいです！
これから先にReactとかTypeScriptも扱いますが、そのときもリファクタリングとか、より実践的なところも入れていきますね。今後の講座も絶対に役立つものを作っていきます！やる気出ます！！🔥
リファクタリングとか全く分からなかったので助かりました！ C#とか他の言語でも役立ちそうです。
リファクタリングはどの言語でもだいたい考え方は一緒なので役に立ちますよね！😆
非同期処理については全く？？？でしたが、しまぶーさんのおかげでどういうものかが理解できました。
非常に楽しく学べる動画いつもありがとうございます！！
休日の楽しみが「しまぶーさんの動画」になっており、特にHTML、CSS、JavaScriptの動画は十数回は見ています!(^^)!
というか、暇さえあれば見ている。。。笑
新しい動画がでるのをいつも心待ちにしているのですが、今後「React」の動画とか出されるご予定はありませんでしょうか？
しまぶーさんから学べると非常に楽しいだろうな～と思った次第です。
お忙しいと思いますが、これからも頑張ってください！応援しています！
async と await やっぱり難しい。。。
もう一回 前回の動画をみて復習します！
最初には難しいポイントですよね😫
何度もやっていくうちに、また自分で書いているうちに、「分かってきたぞ」という感じになるかと思います！プログラミングは最初で完璧理解は不可能ですし、私自身完璧理解できてない部分もあったりします！なので、まずは雰囲気を掴むのを目指してください✌️✨
JavaScriptの動画は本当に勉強になりました。出来ればvue.jsの動画とか見たいですー
JavaScriptが終わった感じですがJavaScript自体は終わっていないです！！(^O^;)新章ではまずは初学者が１番苦しんでいるであろうnpm, webpack, babel周りの知識を扱う予定です。
Vue.jsはReactの次あたりを予定していますー！作るにしてもver3.0.0で大きく変わるので（現時点で2.6.x）それが正式リリースされてからですね！
確かに外部と繋げて動かせると、楽しさ倍増。
リファクタリングができるにはそれだけ綺麗なコードを知っていないとということですよね…先長い…
#1 からすべてを一気に観て#9 に挑みました！特に#7 、#8 を何度も観て、#9 でしまぶーさんが話している内容を文字起こしし、コードと照らし合わせてみました。オブジェクト、プロパティ、メソッドのつながりや関わりを視覚的に捉えたくて。これを身体に染み込ませれば、あとは数あるメソッドなどの知識を増やしつつ、よく使われそうなもので応用を利かせられればと考えてます。javascriptにハマってますw。今後も動画楽しみにしてます^^
うおお、一気に見るのはすごすぎる！
結構な分量なんでかなり頭をフル回転させたのでは・・・
しかも文字起こしまで・・・努力家すぎる😭
実際にコードも書いちゃってバンバン学んでいってくださいね！
今後のJavaScript講座も楽しみにしててください👍👍👍
明日からしまぶーさんのJavaScript一気見しますよ〜笑
一気見！？！？それはすごい量ですよ・・・😳
もし疑問点とか出たら遠慮なく質問してくださいね👍
毎回、わかりやすい説明のおかげで勉強になっている、40代からプログラミング始めてみた者です。データーの取得は動画通りできました。ありがとうございます。しかしボタンをもうひとつ作り(city )、一連のコードをコピーして名前、住所を選択取得できるようにしてみようとしましたが、出来ませんでした。このような場合でのやり方も動画でご教示いただければ幸いです。これからもご活躍を陰ながら応援しております。
40代の初心者ですがとても分かりやすかったです。ただ自分でコードを書くとどうもうまく動かない…。反復練習あるのみですね！ありがとうございます。
実践的で勉強になります。次回が楽しみです。＾O＾
現場で使われているフロントエンドにはまだ遠いですが、一歩一歩、着実に力になるような形で講座を作っていきたいと思っています。コメントありがとうございます！とっても嬉しいです😆
勉強になります、、、本当にわかりやすいです！
自分はまだ知識をつけたばかりの初心者なのですが、簡単なものであってもいざ実践するとなると本当に難しく、今いろいろ試行錯誤試しているところです。。
もしよろしければ、今実際にjavascriptを使って簡単なto do listを作成したいと考えていて、to do list の作成解説動画で参考にできるわかりやすいものがなかなか見つからないため、動画にして教えていただけないでしょうか、、、？
できればよろしくお願いしたいです！
素晴らしいです。説明がすごく分かりやすいです。Yahooのトップページでも使われてるReactの動画もお願いいたします🙏
実はYahooトップページのReactをメインで担当していた先輩から私はReactを教わっていたのです😏
その方からたくさん教わりましたし一緒にペアプロとかもしましたよ！React動画も扱う予定なのでお任せください！🙌
しまぶーのIT大学
ペアプロという言葉は初めて聞きました😅
貴重なお話ありがとうございます。動画でもチーム開発を意識した話もされてましたよね。起業に関する動画も出されているし、経営者視点だなって思いました。
React動画楽しみにしてます‼️
2人で一緒にやるのがペアプログラミングですね。3人以上でやることをモブプログラミングと呼んだりするのでそちらも覚えておいてください！😊
はい、ぜひぜひ期待していてくださいね👍
めっちゃ分かりやすいですね！
もしよかったらmedia wiki api から取得するような動画よかったらあげて欲しいです😭
一流の現場の手練手管が垣間見ることが出来て幸せです(*´▽｀*)
一緒にコード書いてて楽しかったです(*´▽｀*)
フロントエンジニアとして、web制作を仕事としていきたいのですが、JavaScriptで躓いてます。
Web制作をするためだけのJavaScript講座などあれば作ってほしいです！
初心者です！すごくわかりやすいです。しかし私の頭では理解が追いつかず何度も止めて考えてた進んでようやくという状態です。先が思いやられますね。
ありがとうございます〜！
最初はみんなそうですね😂
@@shimabu_it ご返答ありがとうございます！JavaScript編が終わったので次はモダンJS編を学習したいと思います！建設的な動画をいつもありがとうございます！
面白い動画ありがとうございます！
セレクターとる時、僕はシングルクォーテーションを使うんですが現場でダブルクォーテーションとの使い分けはどのようにしている事が多いのでしょうか？
質問ありがとうございます！
結論ダブルクオーテーションなんですが、実はこういう書き方の問題は結論が出ていて、フロントエンドエンジニアはほぼ皆Prettierというツールを使って解決しています。Prettierを使うと自動で整形してくれます。
Prettierの動画は過去に出しているので、よければそちらもご覧ください！きっと有益な情報になるかと思います！
ua-cam.com/video/zoaIv5ifoPI/v-deo.html
勉強してると、HTML側のinput[button]のonclic属性などに呼び出し関数を書いてたりしますが、jsでaddEventListenerで追加した方が良いものなのでしょうか。それとも、これもただの「違う書き方」なだけなのでしょうか？
しまぶーさん
いつも有益な情報を有り難うございます。お世話になっています。
私は未経験からの転職を目指して勉強中なのですが、
いくらググっても解決できない疑問がひとつありまして、もし可能でしたらしまぶーさんの見解を聞かせていただけないでしょうか。
未経験からIT業界への転職を目指す
とき、
巷のプログラミングスクールなどは、とりあえずHTML/CSS、Ruby、Rails等を学んでWebのバックエンドエンジニア？になるみたいな路線が多いと思うのですが、
HTML/CSS、JSなどを学んでフロントエンドへの転職を目指すとか、プラスでPhotoshopなどを学んでデザイナーを目指すみたいな人が少ない？のはなぜなのでしょうか。
別に問題ないですよね？
また、未経験から勉強して転職する入り口として、フロントエンド、バックエンド、デザイナーなどの選択肢がいくつかあったとして、難易度の順位をつけるとしたらどのようになるでしょうか？
すみません、質問させてください。
12:11あたりの、11行目あたりのコールバック関数の処理中で
const list = document.createElement("li") を記述しているかと思うのですが、
以前の動画で、constは再定義と再代入ができないとおっしゃっていたかと思うのですが、
fotEachのループ分再定義が発生しないのでしょうか？？
お答えいただけたら幸いです。
いつも有益な動画ありがとうございます。
今回の動画のリファクタリングの説明は特に勉強になりました。
僕自身、勉強する中で綺麗にコードを書くことはかなり難しいなと感じています。
そこでなんですが、
しまぶーさんがコードを書く中で気をつけてることやテクニック、また、yahooで培ってきたノウハウなどをまとめた「コードを綺麗に書くコツ」みたいな動画を作って欲しいです。...スケジュールに余裕があればお願いします。^_^
綺麗なコードを書くことは難しいですよね、私も常にスキルアップ中です✨
私自身、体系的にリファクタリングの知識をまとめていないので講座にするのが難しそうというのはありつつ、逆に自分が見返す用としても面白そうだな〜と思いました。一考の余地ありですね。動画化検討リストに入れました。超有益なリクエストをありがとうございます！🙏
foreachの引数にaddList関数をした際、addlist関数の引数にはforeachする配列が入ってくるという解釈でよろしいのでしょうか？ 今までは理屈がわかったんですが、そこだけわからなかったです。
◎JavaScript第9回
・"もっと"を押すと10行データが追加される
2022/4/27時点で#1 350,000再生、#9 55,000再生
ということで再生数=視聴者数と単純に考えて完走率16%
この手の講座でこの数字はめちゃスゴいのでは？
NotionやVSCODEの動画を以前拝見して、とても分かりやすいのでJavaScript講座も9回目まで拝見させてもらいました。
動画内でもasync、awaitは初心者には理解はすぐにはできないとおっしゃっていたのですが、1点お聞きします。getUsersでUsersを取得してからでないとlistUsersは表示できないので、listUsersにもasyncをつけておくとおっしゃっていましたが、やはりすぐには理解むずかしいですね。。非同期というものがまだうまく理解できてないですが、何かデータを取得して返ってくるまで待たないといけないときはasyncをつける、でも一旦getUsersでデータを受け取ってしまえば、リストを表示させるaddListのような関数はasyncにする必要がない、という解釈で合ってますかね？
次はモダンJavaScriptの動画を見ようと思っています。asyncについてはそちらでもしかしら解説してるのかもしれませんが、聞いてしまいました。。
どうもありがとうございます。
今までJavascriptについての動画を全部見ました。説明がとても詳しくてわかりやすかったです。
でも、Javascriptについての他の質問をしたいんですが…
setIntervalを用いて一定時間ごとにAJAXリクエストをサーバに送信する方法以外に、あるユーザーのオンライン状態を判断するもっと良い方法はありませんか？
ありがとうございます！とても嬉しい評価です！😊
質もですが、ユーザーのオンライン・オフラインの状態をどのタイミングで判定したいでしょうか。
サーバー側で判定するのであれば、例えばWebSocketなどを使うか、または仰るように一定間隔で処理（ポーリングといいます）されるのがよくある選択肢です。こちらはコメント欄で説明できるレベルではないので、少しむずかしいかも知れませんがググって解決して頂けると幸いです。
クライアント側で判断するのであれば、navigatorのonLineメソッドを使われると判定できるかと思います。詳しくはリファレンスをチェックしてみてください！
developer.mozilla.org/ja/docs/Web/API/NavigatorOnLine/onLine
という感じですね。解答になっていれば幸いです 🙏
質問です。function addList(user){•••} を呼び出すときに、宣言では引数があるけど呼出では引数がなくても動くのはなぜでしょうか、
いつもわかりやすい動画ありがとうございます🙇♂️
いつもとても有益な情報ありがとうございます╰(*´︶`*)╯参考になります！
嬉しいですー！やる気アップ！😆
今後も分かりやすい講座を心がけますね😎💪
いつも有益な動画を有難うございます！毎回楽しく視聴してます。
今回の動画で質問があります。
変数constは再代入不可だと思うのですが、const usersが２つの関数内で宣言できるのは何故でしょうか？
お手すきの際に教えていただけると嬉しいです。
スコープという概念があります。分かりやすく説明すると {} で囲まれている範囲内での話になります（本当は関数スコープ、ブロックスコープなどスコープにも種類があって細かい違いはありますが、ややこしくなるのでいったん置いておきます）。
// OK
{
const users = "foo";
}
{
const users = "foo";
}
// NG
{
const users = "foo";
const users = "foo";
}
分かりやすく言うと上記で、 {} 内部の話かどうかが重要です。今回は関数ですが、if文やfor文でもほぼ同じような制限が適用されます。
ちょっと説明漏れでしたね。ごめんなさい🙏理解の助けになれれば幸いです。
new Studentでインスタンス化したりconstructorなどの記述はいつ使うのでしょうか？
プログラミングの知識がまったくない初心者です。AI、人工視能に興味を持ちpythonを勉強したいと考えているのですが、いきなりpythonを勉強してもいいのでしょうか？何か他の言語をベースにしてからしたほうがいいですか？
javaScriptを勉強するのにおすすめの書籍があれば、レベル別などで紹介してもらいたいです！いつもありがとうございます。
実は私はプログラミング学習時に一切書籍を使ってこなかったので、オススメできるものが1つも無いのです😥
仮に使っていたとしても私のプログラミング初学段階は5年ぐらい前で、5年前のJavaScriptは今とかなり違うので情報が古くてオススメもできません。
お力になれず残念です...😭
AWESOME
急に外国人に！？！？(゜o゜;
@@shimabu_it もともと外国人ですよ！韓国人だけに
そうだったんですね！
いつものコメントの感じだと分かりませんでした笑
最近いろんな出身の方からコメントをいただくので国際色豊かになってきました😆
@@shimabu_it だんだん登録者ふえてますからね!!私もしまぶさんみたいに日本就職のために頑張りたいと思います( •̀ ω •́ )✧
@@1ncursio ありがたいことに見てくださる方が増えていって動画制作のモチベーションも上がってます。
日本就職ができるよう少しでも力になる動画を出していきますね✌️
初めまして。
今までSwiftを中心に勉強してきていた実務未経験のものです。今回入社する受託開発会社で、初めての実務としてReactやnuxt.jsに触れる予定です。そういった理由でJavaScriptの基礎を1から勉強しています。
その状況を踏まえて質問させていただきたいのですが、どこまでJavaScriptを学習してフレームワークに移ればよろしいでしょうか？
明確な基準はもちろんないと思いますが、スピード感を持っていち早く開発に携わり戦力になりたい思いがあります。
例えばJavaScriptでこういった機能を実装できればフレームワークに移ってOK。みたいな技術レベル的な基準があれば教えていただきたいです！！
よろしくお願いします！
いつも動画ありがとうございます！しまぶーさんはいつ頃からプログラミング学び始めましたか？？掛かった時間教えて下さい！
大学4年になったぐらいに学び始めて、ヤフー内定が決まるまでに1000時間ぐらい（1年近く）勉強しました！もし良かったらこちらの動画も参考にしてみてください！そこらへんの話をしています😆
ua-cam.com/video/e7VXwUDl2cY/v-deo.html
しまぶーのIT大学 返信頂きありがとうございます！！凄い努力されたんですね！本当に尊敬します。僕も頑張ります！！！リンクまでわざわざありがとうございます！！
今回もわかりやすい講座ありがとうございます。
一つ気になったんですが、"innerText"の代わりに"textContent"は使えますか？
どちらでもよろしいのでしょうか？
textContentは私があまり使ったことがなく、違いが分からなかったので調べましたが結構違いがありますね。パッと調べた感じで、分かりやすく説明すると下記ですね。動画の例だとtextContentのが良かったかも知れませんねー、私も勉強になりました。✍️
・visibility:hiddenとかdisplay:noneとかはinnerTextだと文字列を返さない
・再フローの可能性がある分、textContentのが高速
・innerTextは改行（
）とか考慮する
より詳しく知りたい場合はMDNのリファレンスを参照してください😊
developer.mozilla.org/ja/docs/Web/API/Node/textContent#Differences_from_innerText
@@shimabu_it なるほど。ドットインストールで学んでいると結構textContentが出てくるので違いが気になってお伺いしました。上記参考にしてみます！
私も細かい部分まで完璧把握はできていないので、今後も「こっちのほうが良くね？」っていうことがあれば教えて頂けると嬉しいです😊✨
getElementByIdなどで取得していますが、querySelectorのほうが万能だと思うのでこっちで取得しても問題あったりしますかね？
問題はありませんがID検索のときはgetElementByIdの方が高速です。人間が体感できるほどの差ではないと思いますが！(^O^;)笑
const usersが２つの関数の中で宣言されているのですが、これは良いのでしょうか？
今更と思われるかもしれませんが、Visual Studio Codeの便利な設定（例えば自動で閉じタグを出してくれるとか）の方法を教えて頂きたいのです。または、どこかの動画で話した事があるというのであったらそれを教えて頂けたら幸いです。
HTMLの話ですと、閉じタグは「」を入力すると自動で出てきますよ！
ちなみにVisual Studio Codeについては今練っている段階でして、近々動画をリリースしようと思っています！そちらをお待ち頂けると🙇♂️
@@shimabu_it ありがとうございます！楽しみにお待ちしております！
基本的なことなのですが、質問させてください！実際に、webアプリケーションを作る時は、フロントエンドはhtml,css,JavaScriptを使い、バックエンドは別の言語を使うという認識で良いのでしょうか？
その認識であってます！一応バックエンド用のJavaScriptとしてNode.jsというのもあることもお伝えしておきます😊
しまぶーのIT大学 加えて質問なのですが、ポートフォリオとしてwebアプリケーションを作成する時は、html,css,JavaScript,Node.jsを用いれば大抵のものはできるのでしょうか？
@@ajt174 はい、言語的にはその構成でほぼすべてできます。あとは作るにあたって概念的な知識はいるので、どうやったら実際にサービスが作れるのかを学ぶ必要があります。どうやってサービスを公開するのかとか、独自ドメインを使うにはどうしたらいいかとかですね。プログラミング言語の構文を覚えるだけでアプリケーションが作れるわけではないということです。
すいません、もう1点質問です🙇♀️
21:37辺りでgetUsersとlistUsersで2つ
const usersがあります。
変数のスコープで問題ないのは分かるのですがこの場合はあえてconst usersとした方がいいのでしょうか？🤔
見てみるとそれの方が関係性があってわかりやすいのかなと思ったのですが、プログラムを始めたばかりで同じ関数名を宣言するということをしてこなかったのでチームならではなのかと思い質問させてもらいました🙇♀️
結論いうと、constを使って影響範囲（スコープ）を狭めた方が良いです。
プログラミングにおいてはいかにスコープを狭めるかが大事です。外部に影響を及ぼすことを副作用といったりするのですが、綺麗なコードを書くうえでは、いかに副作用を起こさないかが鍵となります。constで影響範囲が関数内に閉じていることによって、余計なことを考えなくてすみます。
varとかを使ったり、他の関数と変数を共有すると、考えることが多くなります = 思わぬところでバグが発生します。今は数十行だからマシですが、数万行とかになるとこれが大きな違いを生んできます。
なので、ぜひコードを書くときはスコープを狭めることを意識して書いてくださいね！
あ、ちなみに変数名の話でしたら何でもOKといえば何でもOKですよ。
ただ格納しているのは同じ値なので、一方をusersとして、もう一方を別の値にすると読む側は混乱するかもしれませんね。なので変数名もここでは同じ名前が良いように思います！
@@shimabu_it ありがとうございます！確かに同じ値が入ってるなら同じ関数名の方がいいですよね！
基本的に１人で勉強しているのでしまぶーさんの場合現場を想定しての解説なのですごい勉強になります🙇♀️
いえいえー！参考にしていただけたようで良かったです！😊独学でもプログラミングはいけます。私も独学だったので！ググりまくりながら勉強してくださいね！プログラミングはググり力が最も重要です👍
内容とは関係ないんですけど、今大文系の大学二年生でプログラミングを独学で勉強して、コーディングの案件をとったりして学んでます。コロナ自粛が終わったらインターンに行って知らないスキルをもっと実践の中で学びたいと思っています。新卒で就活する際にどのくらいのスキルがあった、フロントエンジニアとして雇ってもらえますか？
これは難しい質問で、結論から言うとケースによります。
会社によってもちろん必要なスキルに差はありますし、同じ会社であっても、年度・担当面接官などによって大きく異なります。ヤフーでも300人以上採用する年もあれば100人以下の年もあります。また面接時に現場のエンジニアが入ることも多いですが、担当するエンジニアによって差はあります（差がないように採用基準を設けていると思いますが、それでも差は少なからず出ます）。ちなみに私は人事経験があるわけではないので、最低基準がどのぐらいかもまったく存じ上げません。
また、すべてのスキルを面接時に伝えることはできません。なので、自分より技術力が低い人でも、うまくアピールして採用される可能性はあります。採用はプログラミングスキルがすべてではなく、ある程度の面接力も必要です。
そして、最近はコロナということもあり、各社採用戦略を大きく変えていることかと思いますので、なおさら予想がしにくくなっている状況です。
以上の理由から、どのくらいスキルがあれば採用される、という質問に明確に解答することができません。スキルはあればあるほど良いが、必ずしも採用に結びつくわけではないということですね。もちろん実績が半端ない（何かしらのスキルで有名、個人でサービス出してユーザーが○○万人）レベルだと話が別ですが。
あまり参考にならない解答で申し訳ないです😥
しまぶーのIT大学 めちゃくちゃ丁寧にありがとうございます！いつかしまぶーさんと仕事できるように頑張ります！
毎日7時間程学習している大学生です。孤独との戦いで頭がおかしくなりそうです。
応援メッセージ頂けませんか！！笑
毎日7時間続けるのは並大抵なことではないです。その情報だけで、まむさんの覚悟が分かります。私はプログラミングを学んで、エンジニアになって、後悔したことは1つもありません。まむさんもエンジニアになりたくて学ばれていると予想しますが、きっと後悔しないはずです。絶対に目標を達成してやりましょう！！
ちなみに私も理転したときに同じように孤独に1年間勉強しました。当時はつらかったですが、あのときの頑張りが今に繋がっているんだな、とふと思いました。後になって良い思いしてやりましょう😁
@@shimabu_it はい!アップルに入りたいんです。やる気を最高潮に引き上げて下さるお言葉感謝します。これからも宜しくお願いします。
Appleが目標はすごい良いですね！👍👍👍
外資系ITで働くのは私も憧れていたりします。今は起業の道を選んだので当分は難しいですが、一度は海外で暮らしながら働いてみたいですねー。お互い目標は高いですね😊一緒に夢かなえましょう✨
初めまして、JavaScriptを理解するにあたってとてもわかり易くいつもありがとうございます😀
この動画と全く関係のない私情なのですが、現在独学でHTML&CSS、JavaScriptを勉強し終わり、フリーランスとしてもやって行きたいのですが、まだ言語数が足りないですかね？
今後もまだまだ学んでいく予定ですが、家で10万以下でもいいので稼ぎたいのですが中々いい稼ぎ口が見つかりません、どこかオススメの求人やフリーランスとして今後すべき行動などありますでしょうか？
今は全く別の仕事をしており、将来はアプリ系(今後swiftを学んでいきます)やスマートフォン、PC等の開発に携わりたいです。
目標はあれどこのご時世フリーランスとしても利益を得たいので、良ければアドバイスお願いしますm(*_ _)m
質問ありがとうございます。
> まだ言語数が足りないですかね？
おそらくこちらの認識が間違っているように感じます。プログラミングにおいて重要なのは言語ではなく「サービスを作れるかどうか」です。仕事を依頼する側は、例えば「会社のホームページを作ろう」とか「会員登録して予約ができるサービスを作ろう」という感じで、作りたいものがあって外部に依頼します。なので大事なのは、言語が書けることや、たくさんの言語を覚えていることではなく、ホームページを作れるか、予約サイトが作れるかどうかです。
ホームページを作ったり、予約サイトが作ったりするには、HTML・CSS・JavaScriptなどの知識がいるのですが「知識がある」と「作れる」には大きな差があります。実際の案件を受けたいとなった場合は、何か作れるようになる必要があります。ちなみに私の講座はまだ充実していないので、実際のモノづくりができるレベルまでは現状カバーできていません😥
また外部に依頼する側は、エンジニアの技術力が分からないので、何かしらでアピールする必要があります。例えば、自分のホームページを持っている、自分でサービスを公開・運営している、どこからしのIT企業で働いた経験がある、などです。ここらへんがあると依頼する側も安心できるので、まずはそういったアピール材料を作ることが案件を受けるための第一ステップだと思います。
少し急がれているようですが、現状はコロナの影響もあって案件の数も大幅に減っています。今は学びの段階と割り切って、ある程度アピール材料を揃えるほうが良いでしょう。その後で、例えばクラウドソーシング系のサービスに登録したり、友人ヅテで仕事を探したりするのが良いように思います。
ちょっと長くなってしまいましたが以上になります。少しでも参考になれば幸いです🙏
しまぶーのIT大学 とても詳しく記載、ありがとうございます😀
JavaScriptに関しては学ぶには学びましたがって感じでしまぶーさんの動画で理解力をもっと高めようと拝見させて頂きました。
数ではなく力量ってわけですか、なるほど、そう言われればあまり自信はないかも知れません。
中々案件の取得が難しかった為幅を広げようとしました( ˊᵕˋ ;)💦
ですが大変貴重な意見ありがとうございます(*´▽｀*)
鍛えてきます！これからも動画楽しみに待ってます！
そうなんですよ〜、プログラミングは浅く広く学んでもあまり案件獲得には繋がらなくて作る力が求められます。実際にモノを作るとなるとかなり詰まることが多いんですが、そこを突破する能力が求められるということですね😅
ぜひモノづくりパワーを鍛えていってくださいね👍✨
しまぶーのIT大学
頑張ります！！！(੭*ˊ꒳ˋ)੭♡🍟
実践的なもの嬉しいです！
最近，ドットインストールのしまぶーさんが紹介された手順+αとしまぶーさんの基礎講座を終えました．
これから，どんどん色々なものを苦しみながら開発していきたいと考えています笑
そこで，もし就活する際，企業側ににフロントエンドとしての技術をアピールする作品を作ると仮定したら，おすすめのサービスや盛り込んだ方が良い機能などを教えていただきたいです！
お忙しいところ，申し訳ないのですが，よろしくお願いしますm(._.)m
難しい = 価値が高いというのを常に意識してみてくださいー！
実はJavaScriptはこっからが本番みたいなところがあるので今後もたくさん苦しみましょう！笑
フロントエンドでアピールするならReactやVue、Angularなどは欲しいですね。
あとはフロントエンドとはいえAPIを叩いている方が実践的なので、何かしらAPIを叩いて組み立てるアプリが良いです。
DB周りをイチからやるのは最初は難しいかもしれないので、例えばfirebaseを使ってAPIを作る、ヘッドレスCMSでAPIを作るなどですね。
またGitHubでコードを見せる形が良いかと思います。開発の現場でGitHubはもはや必須なので、それが使える証明としてGitHubも使いましょう！
という感じですね。最初は簡単なブログを作るとか匿名掲示板を作るレベルで十分です。いきなり難しいものに行きすぎると作れず終わるので、簡単なものから作っていきましょう！
ここらへんの講座も適宜動画で出す予定ですので、お楽しみに！👋
しまぶーのIT大学 難しい=価値がある，ちゃんと心に刻んであります！
1回C言語で苦しんでいるので，慣れました笑
長文での回答ありがとうございます！！
簡単なものから、徐々にレベルをあげていきます！
いつも丁寧に回答してくださって、感謝しかないです、、、
これからも動画楽しみに待ってます^ ^
@@yoshinoriokino8352
> 難しい=価値がある，ちゃんと心に刻んであります！
それなら問題なさそうですね！ぜひぜひ学習を続けていってください！
ちょっと難しい内容の回答にはなりましたが色々検索してみてくださいね。講座を作るといっても、そこまでの講座を一気に作るのは難しいので結構時間がかかります。なので講座を待たずガシガシ進めちゃってください。講座の方は復習みたいな感じで使ってみてもらえるといいかもしれません😁
しまぶーのIT大学 了解しました👌
ありがとうございます！
シリーズ進むごとに閲覧数がすなくなっていく、、、めっちゃわかりやすいのに
Programming with Moshをご参考にされてるんですね
海外エンジニアUA-camrは私がUA-camを始めるときにいくつか見たので、Programming with Moshさんも知っていますが、誰か個人を参考にしているというのは1つもありませんよ。Programming with Moshさんがどんな動画を出されているかは忘れてしまいましたが、私は講座はすべてオリジナルで考えているので私の動画の内容とはまったく違うはずですよ！🙌
1点質問です！
20:44辺りのlistUsersですがコールバック関数で呼び出すときになんでlistUsers()とならないんでしょうか？
（）つけてみたら動作しなかったので教えて貰えると助かります🙇♀️
自分も同じ疑問を持ち色々調べてみましたが答えが出ずハマっています...実際にclickイベント、loadイベントそれぞれをどちらか一方をコメントアウトして()をつけてみたり、もしくは双方に()をつけてみましたが、loadイベントのみコメントアウトしている時に何故かloadイベントが発生したり、かといってどのパターンもclickイベントは稼働せず、やや混乱気味ですが一旦スルーしますw
追記。主様からでなくすみません。やはりスッキリしなかったので再度調べてみたところ、JavaScriptでは関数も文字列や数値、配列、オブジェクト等と同様、変数に代入ができる「値」(第1級オブジェクト)であり、呼び出しではなく値として使用する場合は()は付けず、関数名だけで使うとのことでした。コールバックはまさに他関数の引数として使う「値」であり、コードの記述段階(for EachやaddEventListenerらの他関数)ではまだ呼び出しではなく、まず他関数を呼び出してからコールバックの関数定義部function~()を呼び出す、という事の様ですね。ググりまくったら案外情報ありましたw ご参考までに〜。
@@chuckyyy7459 なるほど！関数も値として扱うことも出来るのですね🤔
自分も完全に飛ばしてたのでとても助かりました🙇♀️
ありがとうございます😀
@@user-ci3cr4bw3l いえ！少しでもご参考になればと思ったので良かったです！逆にこちらこそお陰様で勉強させて頂き感謝です！ありがとうございます😄共に頑張りましょう！
めちゃくちゃ良いコミュニティーが生まれていて感動しました。こういうのが自分が望んでいる世界感だったりするので、めちゃくちゃ嬉しいシーンを見せていただきました。ありがとうございます😂たぶん既に理解されているかと思いますが、一応の私からの補足をつけますね！
コールバック関数を自作するとき、シンプルな形だと下記のようになりますね（あんまり意味のない関数ですが最もシンプルにしました）。
function foo (fn) {
fn();
}
このfnがコールバック関数なわけですが、実行される場所は「引数」ではなく「関数の中」です。なので引数で渡すときは呼び出しの () をつけずとも、勝手に中で () をつけて呼び出してくれているということですね。
説明用に addEventListener をヤバいぐらい簡略化すると下記のような形になります。あくまでイメージです。
function addEventListener (event, fn) {
if (event === "click") { // クリックされたら
fn();
}
}
...という感じです。少しでも力になれていれば幸いです。余計わかりにくくなったらごめんなさい🙄
前回の内容もなんかちょっとわかった気がしました！
前回とかなり繋がってますからね！
理解が深まったようで良かったです😊
人の名前を押したら詳細が別ページで作られるにはどうしたらよいでしょうか？
リファクタリングの説明が大変勉強になりました。
[参考までに]
あと試しにこのAPIで個数分の内容のみをもっと見るで表示するというのを
Vue使用ですがつくってみたので共有します（フルスクラッチではまだ無理なので）。
github.com/dai-570415/js-basic/blob/master/moreButton/vue.html
おおー素晴らしいですねー！そういうフレームワークを使っての置き換えも勉強になりますよね！
lodashのscriptは使われてないので不要かもしれませんね。あとはisMoreという名前だとboolean（true, false）を返すメソッドに誤解されるので、そのままmoreだけの方が良いかもですね。いずれにせよ、Goodな学習スタイルだと思います👍👍👍
すこしむずかしいです。。。すいません
だんだんと難しくなるので、1度で理解しようとせず何回か繰り返しで覚えることが必要です。私も最初に勉強してた頃は１度では理解できませんでした。繰り返しで少しずつ理解を深めていってください😊✨