【JavaScript入門 #9】これまで講座で学習した知識をフル活用しよう【ヤフー出身エンジニアの入門プログラミング講座】 

楽しくみています。ありがとうございます。🏟️

おおおーーーー初コメントを私にしてくださってありがとうございます😂 講座も9章まで見てくださって、しかも少しでもお役に立てたようで、それも嬉しいです😭 私の親しい人にもSIer業界経験者がいるんですが、だいぶ心を病んでいたようで、私としても本当にオススメできないですね（もちろん会社による幅はあるかと思いますが）。自社開発系の企業では見たことがないので、私の動画を見てくださっている方はそういう企業にいけるようにプログラミングを学んでほしいなーと思っております。 今後もたくさん講座を出していこうと思っているので、ぜひぜひ役に立ちそうだと思った動画を見てくださいね✌✨

うおーーーそう言ってくださるのは嬉しい限りですーーー！ 過去の講座をつくった自分を褒めてやりたいです笑

点と点が線を意識して講座を作っていたので良かったですー😂 4月から始めたのはタイムリーですね。これからもJavaScript講座はたくさん出していくので、めちゃくちゃ学んでいきましょう！

そのような評価をいただけて嬉しい限りです😋 はい、ぜひぜひリファクタリングを実際にやってみてスキルを高めていってください！

少しずつでも進歩を感じているようで良かったです👍 これから更に難しくなっていきますが、一度で理解できないのは当然なので（私もそうでした）少しずつ、でも確実に学びを深めていってくださいね😌

ありがとうございます！そう言ってくださってめちゃくちゃ嬉しいです！😊 実際にコードを書いていく過程をお伝えできるのは、本にない利点ですね✨

・・・！たしかに！！ 毎回用意するのは難しいかも知れませんが、たまにやりたい・・・。今回でいうと、リストをDOM操作で削除するみたいなのは課題として出しても良かったかも知れませんね。有益なアドバイスをありがとうございます😂

嬉しすぎます😂😂😂 結構難しいかな...とも思いましたが、そう言っていただけて嬉しいです！ これから先にReactとかTypeScriptも扱いますが、そのときもリファクタリングとか、より実践的なところも入れていきますね。今後の講座も絶対に役立つものを作っていきます！やる気出ます！！🔥

うおープログラミングが楽しい評価は最高です！楽しめたら学びも早いですもんね👍 VS Codeに関しては計画中の講座もあるので楽しみにしててください😁

うおお、一気に見るのはすごすぎる！ 結構な分量なんでかなり頭をフル回転させたのでは・・・ しかも文字起こしまで・・・努力家すぎる😭 実際にコードも書いちゃってバンバン学んでいってくださいね！ 今後のJavaScript講座も楽しみにしててください👍👍👍

やったー！そう言ってくださって嬉しいです！😋 実践的で楽しい = 無敵ですね(^O^)

労いのお言葉ありがとうございますー！！実はこの講座はつくるのがめちゃくちゃ大変で、時間がかかりました。そもそも教えたいことを詰め込みすぎて長くなってしまったのを反省(^O^;) 今回でとりあえずJavaScriptでモノを作っていく感じを伝えられたので、次回からはより実践的な講座をつくっていきます。概念理解が重要で、かなり難しい部分に入るので、より丁寧に分かりやすく作らねば・・・！

ありがとうございます〜！ 最初はみんなそうですね😂

@@shimabu_it ご返答ありがとうございます！JavaScript編が終わったので次はモダンJS編を学習したいと思います！建設的な動画をいつもありがとうございます！

リファクタリングはどの言語でもだいたい考え方は一緒なので役に立ちますよね！😆

JavaScriptが終わった感じですがJavaScript自体は終わっていないです！！(^O^;)新章ではまずは初学者が１番苦しんでいるであろうnpm, webpack, babel周りの知識を扱う予定です。 Vue.jsはReactの次あたりを予定していますー！作るにしてもver3.0.0で大きく変わるので（現時点で2.6.x）それが正式リリースされてからですね！

最初には難しいポイントですよね😫 何度もやっていくうちに、また自分で書いているうちに、「分かってきたぞ」という感じになるかと思います！プログラミングは最初で完璧理解は不可能ですし、私自身完璧理解できてない部分もあったりします！なので、まずは雰囲気を掴むのを目指してください✌️✨

ありがとうございます！新章も期待していてください😁

現場で使われているフロントエンドにはまだ遠いですが、一歩一歩、着実に力になるような形で講座を作っていきたいと思っています。コメントありがとうございます！とっても嬉しいです😆

結論いうと、constを使って影響範囲（スコープ）を狭めた方が良いです。 プログラミングにおいてはいかにスコープを狭めるかが大事です。外部に影響を及ぼすことを副作用といったりするのですが、綺麗なコードを書くうえでは、いかに副作用を起こさないかが鍵となります。constで影響範囲が関数内に閉じていることによって、余計なことを考えなくてすみます。 varとかを使ったり、他の関数と変数を共有すると、考えることが多くなります = 思わぬところでバグが発生します。今は数十行だからマシですが、数万行とかになるとこれが大きな違いを生んできます。 なので、ぜひコードを書くときはスコープを狭めることを意識して書いてくださいね！

あ、ちなみに変数名の話でしたら何でもOKといえば何でもOKですよ。 ただ格納しているのは同じ値なので、一方をusersとして、もう一方を別の値にすると読む側は混乱するかもしれませんね。なので変数名もここでは同じ名前が良いように思います！

@@shimabu_it ありがとうございます！確かに同じ値が入ってるなら同じ関数名の方がいいですよね！ 基本的に１人で勉強しているのでしまぶーさんの場合現場を想定しての解説なのですごい勉強になります🙇‍♀️

いえいえー！参考にしていただけたようで良かったです！😊独学でもプログラミングはいけます。私も独学だったので！ググりまくりながら勉強してくださいね！プログラミングはググり力が最も重要です👍

実はYahooトップページのReactをメインで担当していた先輩から私はReactを教わっていたのです😏 その方からたくさん教わりましたし一緒にペアプロとかもしましたよ！React動画も扱う予定なのでお任せください！🙌

しまぶーのIT大学 ペアプロという言葉は初めて聞きました😅 貴重なお話ありがとうございます。動画でもチーム開発を意識した話もされてましたよね。起業に関する動画も出されているし、経営者視点だなって思いました。 React動画楽しみにしてます‼️

2人で一緒にやるのがペアプログラミングですね。3人以上でやることをモブプログラミングと呼んだりするのでそちらも覚えておいてください！😊 はい、ぜひぜひ期待していてくださいね👍

嬉しいですー！やる気アップ！😆 今後も分かりやすい講座を心がけますね😎💪

ありがとうございます！とても嬉しい評価です！😊 質もですが、ユーザーのオンライン・オフラインの状態をどのタイミングで判定したいでしょうか。 サーバー側で判定するのであれば、例えばWebSocketなどを使うか、または仰るように一定間隔で処理（ポーリングといいます）されるのがよくある選択肢です。こちらはコメント欄で説明できるレベルではないので、少しむずかしいかも知れませんがググって解決して頂けると幸いです。 クライアント側で判断するのであれば、navigatorのonLineメソッドを使われると判定できるかと思います。詳しくはリファレンスをチェックしてみてください！ developer.mozilla.org/ja/docs/Web/API/NavigatorOnLine/onLine という感じですね。解答になっていれば幸いです 🙏

スコープという概念があります。分かりやすく説明すると {} で囲まれている範囲内での話になります（本当は関数スコープ、ブロックスコープなどスコープにも種類があって細かい違いはありますが、ややこしくなるのでいったん置いておきます）。 // OK { const users = "foo"; } { const users = "foo"; } // NG { const users = "foo"; const users = "foo"; } 分かりやすく言うと上記で、 {} 内部の話かどうかが重要です。今回は関数ですが、if文やfor文でもほぼ同じような制限が適用されます。 ちょっと説明漏れでしたね。ごめんなさい🙏理解の助けになれれば幸いです。

一気見！？！？それはすごい量ですよ・・・😳 もし疑問点とか出たら遠慮なく質問してくださいね👍

大学4年になったぐらいに学び始めて、ヤフー内定が決まるまでに1000時間ぐらい（1年近く）勉強しました！もし良かったらこちらの動画も参考にしてみてください！そこらへんの話をしています😆 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-e7VXwUDl2cY.html

しまぶーのIT大学 返信頂きありがとうございます！！凄い努力されたんですね！本当に尊敬します。僕も頑張ります！！！リンクまでわざわざありがとうございます！！

その認識であってます！一応バックエンド用のJavaScriptとしてNode.jsというのもあることもお伝えしておきます😊

しまぶーのIT大学 加えて質問なのですが、ポートフォリオとしてwebアプリケーションを作成する時は、html,css,JavaScript,Node.jsを用いれば大抵のものはできるのでしょうか？

@@ajt174 はい、言語的にはその構成でほぼすべてできます。あとは作るにあたって概念的な知識はいるので、どうやったら実際にサービスが作れるのかを学ぶ必要があります。どうやってサービスを公開するのかとか、独自ドメインを使うにはどうしたらいいかとかですね。プログラミング言語の構文を覚えるだけでアプリケーションが作れるわけではないということです。

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が出てくるので違いが気になってお伺いしました。上記参考にしてみます！

私も細かい部分まで完璧把握はできていないので、今後も「こっちのほうが良くね？」っていうことがあれば教えて頂けると嬉しいです😊✨

質問ありがとうございます！ 結論ダブルクオーテーションなんですが、実はこういう書き方の問題は結論が出ていて、フロントエンドエンジニアはほぼ皆Prettierというツールを使って解決しています。Prettierを使うと自動で整形してくれます。 Prettierの動画は過去に出しているので、よければそちらもご覧ください！きっと有益な情報になるかと思います！ ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zoaIv5ifoPI.html

実は私はプログラミング学習時に一切書籍を使ってこなかったので、オススメできるものが1つも無いのです😥 仮に使っていたとしても私のプログラミング初学段階は5年ぐらい前で、5年前のJavaScriptは今とかなり違うので情報が古くてオススメもできません。 お力になれず残念です...😭

質問ありがとうございます。 > まだ言語数が足りないですかね？ おそらくこちらの認識が間違っているように感じます。プログラミングにおいて重要なのは言語ではなく「サービスを作れるかどうか」です。仕事を依頼する側は、例えば「会社のホームページを作ろう」とか「会員登録して予約ができるサービスを作ろう」という感じで、作りたいものがあって外部に依頼します。なので大事なのは、言語が書けることや、たくさんの言語を覚えていることではなく、ホームページを作れるか、予約サイトが作れるかどうかです。 ホームページを作ったり、予約サイトが作ったりするには、HTML・CSS・JavaScriptなどの知識がいるのですが「知識がある」と「作れる」には大きな差があります。実際の案件を受けたいとなった場合は、何か作れるようになる必要があります。ちなみに私の講座はまだ充実していないので、実際のモノづくりができるレベルまでは現状カバーできていません😥 また外部に依頼する側は、エンジニアの技術力が分からないので、何かしらでアピールする必要があります。例えば、自分のホームページを持っている、自分でサービスを公開・運営している、どこからしのIT企業で働いた経験がある、などです。ここらへんがあると依頼する側も安心できるので、まずはそういったアピール材料を作ることが案件を受けるための第一ステップだと思います。 少し急がれているようですが、現状はコロナの影響もあって案件の数も大幅に減っています。今は学びの段階と割り切って、ある程度アピール材料を揃えるほうが良いでしょう。その後で、例えばクラウドソーシング系のサービスに登録したり、友人ヅテで仕事を探したりするのが良いように思います。 ちょっと長くなってしまいましたが以上になります。少しでも参考になれば幸いです🙏

しまぶーのIT大学 とても詳しく記載、ありがとうございます😀 JavaScriptに関しては学ぶには学びましたがって感じでしまぶーさんの動画で理解力をもっと高めようと拝見させて頂きました。 数ではなく力量ってわけですか、なるほど、そう言われればあまり自信はないかも知れません。 中々案件の取得が難しかった為幅を広げようとしました( ˊᵕˋ ;)💦 ですが大変貴重な意見ありがとうございます(*´▽｀*) 鍛えてきます！これからも動画楽しみに待ってます！

そうなんですよ〜、プログラミングは浅く広く学んでもあまり案件獲得には繋がらなくて作る力が求められます。実際にモノを作るとなるとかなり詰まることが多いんですが、そこを突破する能力が求められるということですね😅 ぜひモノづくりパワーを鍛えていってくださいね👍✨

しまぶーのIT大学 頑張ります！！！(੭*ˊ꒳​ˋ)੭♡🍟

綺麗なコードを書くことは難しいですよね、私も常にスキルアップ中です✨ 私自身、体系的にリファクタリングの知識をまとめていないので講座にするのが難しそうというのはありつつ、逆に自分が見返す用としても面白そうだな〜と思いました。一考の余地ありですね。動画化検討リストに入れました。超有益なリクエストをありがとうございます！🙏

これは難しい質問で、結論から言うとケースによります。 会社によってもちろん必要なスキルに差はありますし、同じ会社であっても、年度・担当面接官などによって大きく異なります。ヤフーでも300人以上採用する年もあれば100人以下の年もあります。また面接時に現場のエンジニアが入ることも多いですが、担当するエンジニアによって差はあります（差がないように採用基準を設けていると思いますが、それでも差は少なからず出ます）。ちなみに私は人事経験があるわけではないので、最低基準がどのぐらいかもまったく存じ上げません。 また、すべてのスキルを面接時に伝えることはできません。なので、自分より技術力が低い人でも、うまくアピールして採用される可能性はあります。採用はプログラミングスキルがすべてではなく、ある程度の面接力も必要です。 そして、最近はコロナということもあり、各社採用戦略を大きく変えていることかと思いますので、なおさら予想がしにくくなっている状況です。 以上の理由から、どのくらいスキルがあれば採用される、という質問に明確に解答することができません。スキルはあればあるほど良いが、必ずしも採用に結びつくわけではないということですね。もちろん実績が半端ない（何かしらのスキルで有名、個人でサービス出してユーザーが○○万人）レベルだと話が別ですが。 あまり参考にならない解答で申し訳ないです😥

しまぶーのIT大学 めちゃくちゃ丁寧にありがとうございます！いつかしまぶーさんと仕事できるように頑張ります！

HTMLの話ですと、閉じタグは「」を入力すると自動で出てきますよ！ ちなみにVisual Studio Codeについては今練っている段階でして、近々動画をリリースしようと思っています！そちらをお待ち頂けると🙇‍♂️

@@shimabu_it ありがとうございます！楽しみにお待ちしております！

問題はありませんがID検索のときはgetElementByIdの方が高速です。人間が体感できるほどの差ではないと思いますが！(^O^;)笑

自分も同じ疑問を持ち色々調べてみましたが答えが出ずハマっています...実際にclickイベント、loadイベントそれぞれをどちらか一方をコメントアウトして()をつけてみたり、もしくは双方に()をつけてみましたが、loadイベントのみコメントアウトしている時に何故かloadイベントが発生したり、かといってどのパターンもclickイベントは稼働せず、やや混乱気味ですが一旦スルーしますw

追記。主様からでなくすみません。やはりスッキリしなかったので再度調べてみたところ、JavaScriptでは関数も文字列や数値、配列、オブジェクト等と同様、変数に代入ができる「値」(第1級オブジェクト)であり、呼び出しではなく値として使用する場合は()は付けず、関数名だけで使うとのことでした。コールバックはまさに他関数の引数として使う「値」であり、コードの記述段階(for EachやaddEventListenerらの他関数)ではまだ呼び出しではなく、まず他関数を呼び出してからコールバックの関数定義部function~()を呼び出す、という事の様ですね。ググりまくったら案外情報ありましたw ご参考までに〜。

@@chuckyyy7459 なるほど！関数も値として扱うことも出来るのですね🤔 自分も完全に飛ばしてたのでとても助かりました🙇‍♀️ ありがとうございます😀

@@しゅん-q3w いえ！少しでもご参考になればと思ったので良かったです！逆にこちらこそお陰様で勉強させて頂き感謝です！ありがとうございます😄共に頑張りましょう！

めちゃくちゃ良いコミュニティーが生まれていて感動しました。こういうのが自分が望んでいる世界感だったりするので、めちゃくちゃ嬉しいシーンを見せていただきました。ありがとうございます😂たぶん既に理解されているかと思いますが、一応の私からの補足をつけますね！ コールバック関数を自作するとき、シンプルな形だと下記のようになりますね（あんまり意味のない関数ですが最もシンプルにしました）。 function foo (fn) { fn(); } このfnがコールバック関数なわけですが、実行される場所は「引数」ではなく「関数の中」です。なので引数で渡すときは呼び出しの () をつけずとも、勝手に中で () をつけて呼び出してくれているということですね。 説明用に addEventListener をヤバいぐらい簡略化すると下記のような形になります。あくまでイメージです。 function addEventListener (event, fn) { if (event === "click") { // クリックされたら fn(); } } ...という感じです。少しでも力になれていれば幸いです。余計わかりにくくなったらごめんなさい🙄

毎日7時間続けるのは並大抵なことではないです。その情報だけで、まむさんの覚悟が分かります。私はプログラミングを学んで、エンジニアになって、後悔したことは1つもありません。まむさんもエンジニアになりたくて学ばれていると予想しますが、きっと後悔しないはずです。絶対に目標を達成してやりましょう！！ ちなみに私も理転したときに同じように孤独に1年間勉強しました。当時はつらかったですが、あのときの頑張りが今に繋がっているんだな、とふと思いました。後になって良い思いしてやりましょう😁

@@shimabu_it はい!アップルに入りたいんです。やる気を最高潮に引き上げて下さるお言葉感謝します。これからも宜しくお願いします。

Appleが目標はすごい良いですね！👍👍👍 外資系ITで働くのは私も憧れていたりします。今は起業の道を選んだので当分は難しいですが、一度は海外で暮らしながら働いてみたいですねー。お互い目標は高いですね😊一緒に夢かなえましょう✨

難しい = 価値が高いというのを常に意識してみてくださいー！ 実はJavaScriptはこっからが本番みたいなところがあるので今後もたくさん苦しみましょう！笑 フロントエンドでアピールするならReactやVue、Angularなどは欲しいですね。 あとはフロントエンドとはいえAPIを叩いている方が実践的なので、何かしらAPIを叩いて組み立てるアプリが良いです。 DB周りをイチからやるのは最初は難しいかもしれないので、例えばfirebaseを使ってAPIを作る、ヘッドレスCMSでAPIを作るなどですね。 またGitHubでコードを見せる形が良いかと思います。開発の現場でGitHubはもはや必須なので、それが使える証明としてGitHubも使いましょう！ という感じですね。最初は簡単なブログを作るとか匿名掲示板を作るレベルで十分です。いきなり難しいものに行きすぎると作れず終わるので、簡単なものから作っていきましょう！ ここらへんの講座も適宜動画で出す予定ですので、お楽しみに！👋

しまぶーのIT大学 難しい=価値がある，ちゃんと心に刻んであります！ 1回C言語で苦しんでいるので，慣れました笑 長文での回答ありがとうございます！！ 簡単なものから、徐々にレベルをあげていきます！ いつも丁寧に回答してくださって、感謝しかないです、、、 これからも動画楽しみに待ってます^ ^

@@yoshinoriokino8352 > 難しい=価値がある，ちゃんと心に刻んであります！ それなら問題なさそうですね！ぜひぜひ学習を続けていってください！ ちょっと難しい内容の回答にはなりましたが色々検索してみてくださいね。講座を作るといっても、そこまでの講座を一気に作るのは難しいので結構時間がかかります。なので講座を待たずガシガシ進めちゃってください。講座の方は復習みたいな感じで使ってみてもらえるといいかもしれません😁

しまぶーのIT大学 了解しました👌 ありがとうございます！

海外エンジニアRU-vidrは私がRU-vidを始めるときにいくつか見たので、Programming with Moshさんも知っていますが、誰か個人を参考にしているというのは1つもありませんよ。Programming with Moshさんがどんな動画を出されているかは忘れてしまいましたが、私は講座はすべてオリジナルで考えているので私の動画の内容とはまったく違うはずですよ！🙌

急に外国人に！？！？(゜o゜;

@@shimabu_it もともと外国人ですよ！韓国人だけに

そうだったんですね！ いつものコメントの感じだと分かりませんでした笑 最近いろんな出身の方からコメントをいただくので国際色豊かになってきました😆

@@shimabu_it だんだん登録者ふえてますからね!!私もしまぶさんみたいに日本就職のために頑張りたいと思います( •̀ ω •́ )✧

@@1ncursio ありがたいことに見てくださる方が増えていって動画制作のモチベーションも上がってます。 日本就職ができるよう少しでも力になる動画を出していきますね✌️

前回とかなり繋がってますからね！ 理解が深まったようで良かったです😊

おおー素晴らしいですねー！そういうフレームワークを使っての置き換えも勉強になりますよね！ lodashのscriptは使われてないので不要かもしれませんね。あとはisMoreという名前だとboolean（true, false）を返すメソッドに誤解されるので、そのままmoreだけの方が良いかもですね。いずれにせよ、Goodな学習スタイルだと思います👍👍👍

だんだんと難しくなるので、1度で理解しようとせず何回か繰り返しで覚えることが必要です。私も最初に勉強してた頃は１度では理解できませんでした。繰り返しで少しずつ理解を深めていってください😊✨