{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/udemy-web-application-development-with-javascript","result":{"data":{"markdownRemark":{"id":"56c33547-0815-5a2b-9775-1f3b38b92ebf","html":"<p>先日、Udemy 講座第 2 段として、「JavaScriptで学ぶWebアプリ開発の必須知識〜Node.js・Web API・Ajax・async/await〜」というコースをリリースしました。</p>\n<p>どんなコースなのか、どういった考えで作ったのかを、この記事で少し紹介させていただきます。</p>\n<p>※ 著者が出した Udemy 講座の一覧は <a href=\"https://www.nextskill.co.jp/courses\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">こちら﻿</a> です。</p>\n<h3 id=\"コース概要\" style=\"position:relative;\"><a href=\"#%E3%82%B3%E3%83%BC%E3%82%B9%E6%A6%82%E8%A6%81\" aria-label=\"コース概要 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>コース概要</h3>\n<p>「JavaScriptで学ぶWebアプリ開発の必須知識〜Node.js・Web API・Ajax・async/await〜」は、Rails などで「なんとなく」Web アプリ開発に入門した段階からステップアップしようとすると壁になる、Web アプリの仕組みと JavaScript の重要知識を学ぶ内容です。</p>\n<p>キーワードは</p>\n<ul>\n<li>HTTP、Web API、Ajax、Cookie、CORS</li>\n<li>Node.js、npm、非同期処理、Promise、async/await</li>\n</ul>\n<p>などで、これらを実際にコードを書きながら学習していきます。</p>\n<h2 id=\"なぜこのコースを作ったのか\" style=\"position:relative;\"><a href=\"#%E3%81%AA%E3%81%9C%E3%81%93%E3%81%AE%E3%82%B3%E3%83%BC%E3%82%B9%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B\" aria-label=\"なぜこのコースを作ったのか permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>なぜこのコースを作ったのか</h2>\n<p>ここから、このコースを作った背景について書いていきます。</p>\n<h3 id=\"web-アプリをなんとなく作れる段階と実務では、技術スキルに大きな壁がある\" style=\"position:relative;\"><a href=\"#web-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%81%AA%E3%82%93%E3%81%A8%E3%81%AA%E3%81%8F%E4%BD%9C%E3%82%8C%E3%82%8B%E6%AE%B5%E9%9A%8E%E3%81%A8%E5%AE%9F%E5%8B%99%E3%81%A7%E3%81%AF%E3%80%81%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%AD%E3%83%AB%E3%81%AB%E5%A4%A7%E3%81%8D%E3%81%AA%E5%A3%81%E3%81%8C%E3%81%82%E3%82%8B\" aria-label=\"web アプリをなんとなく作れる段階と実務では、技術スキルに大きな壁がある permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Web アプリをなんとなく作れる段階と実務では、技術スキルに大きな壁がある</h3>\n<p>2022 年現在、Web アプリの開発に入門するための情報源は豊富で、Ruby on Rails などを使って「なんとなく」Web アプリが実装できるという方はとても増えています。</p>\n<p>しかし、最近よくある構成の (いわゆるモダンな) Web アプリの開発は、入門の知識だけでは難しいです。</p>\n<p>モダンな Web アプリといったときに分かりやすいキーワードは、React や Vue.js といったフロントエンドのフレームワークです。</p>\n<p>「なんとなく」Web アプリが作れる段階から、ステップアップとして React や Vue.js を学習する方は多いですが、私はこの間に大きな壁があると考えています。</p>\n<h3 id=\"しかし、その壁を乗り越えるために何を学ぶべきか分からない\" style=\"position:relative;\"><a href=\"#%E3%81%97%E3%81%8B%E3%81%97%E3%80%81%E3%81%9D%E3%81%AE%E5%A3%81%E3%82%92%E4%B9%97%E3%82%8A%E8%B6%8A%E3%81%88%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E4%BD%95%E3%82%92%E5%AD%A6%E3%81%B6%E3%81%B9%E3%81%8D%E3%81%8B%E5%88%86%E3%81%8B%E3%82%89%E3%81%AA%E3%81%84\" aria-label=\"しかし、その壁を乗り越えるために何を学ぶべきか分からない permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>しかし、その壁を乗り越えるために何を学ぶべきか分からない</h3>\n<p>Web アプリを「なんとなく」実装できる段階で、React や Vue.js などを使った Web アプリを開発しようとしても、よく分からないことだらけで苦戦する方は少なくありません。</p>\n<p>例えば、</p>\n<ul>\n<li>フロントエンドとサーバサイドのコードの関係性、つまり、何がどう繋がって動いているのかよく分からない</li>\n<li>フロントエンドとサーバサイドの役割の違いや、連携する方法が分からない</li>\n</ul>\n<p>といった方は多いです。</p>\n<p>これは、Web アプリを「なんとなく」実装できる段階と、React や Vue.js などを使った Web アプリの開発の間にある、Web アプリの仕組みと JavaScript の必須知識の不足が原因です。</p>\n<p>この講座は、そういった方に向けて、私が考える必須知識を整理して学べるようにした内容になっています。</p>\n<h2 id=\"主な対象者\" style=\"position:relative;\"><a href=\"#%E4%B8%BB%E3%81%AA%E5%AF%BE%E8%B1%A1%E8%80%85\" aria-label=\"主な対象者 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>主な対象者</h2>\n<p>このような背景から、対象者としては</p>\n<ul>\n<li>Web アプリをなんとなく作れるようになったが、コードの 1 つ 1 つが何をしているのかよく分からない</li>\n<li>フロントエンドとサーバサイドのコードが、どう繋がって動いているのかよく分からない</li>\n<li>Web アプリを開発していて「非同期処理・(Web) API・Ajax」といった言葉を耳にするが、何のことかよく分からず困っている</li>\n</ul>\n<p>といった方を想定しています。</p>\n<h2 id=\"このコースの特徴\" style=\"position:relative;\"><a href=\"#%E3%81%93%E3%81%AE%E3%82%B3%E3%83%BC%E3%82%B9%E3%81%AE%E7%89%B9%E5%BE%B4\" aria-label=\"このコースの特徴 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>このコースの特徴</h2>\n<p>ここから、このコースの特徴を紹介させていただきます。</p>\n<h3 id=\"web-サーバから-api-を使った-web-アプリケーションまで実装する\" style=\"position:relative;\"><a href=\"#web-%E3%82%B5%E3%83%BC%E3%83%90%E3%81%8B%E3%82%89-api-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F-web-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%BE%E3%81%A7%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B\" aria-label=\"web サーバから api を使った web アプリケーションまで実装する permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Web サーバから API を使った Web アプリケーションまで実装する</h3>\n<p>このコースでは、実際に作ってこそ理解が深まるという方針で、簡易的な Web サーバから実装します。</p>\n<p>Web サーバの実装というと難しそうに聞こえるかもしれませんが、簡易的なものであれば簡単に作れてしまいます。</p>\n<p>アプリケーションサーバやフレームワークといったものも一切使わず、基本的なライブラリだけから Web サーバ・Web アプリを実装することで、Web アプリの仕組みのコアをしっかり理解できるようにしました。</p>\n<h3 id=\"cookie-や-cors-などの-web-の重要知識を手を動かして学ぶ\" style=\"position:relative;\"><a href=\"#cookie-%E3%82%84-cors-%E3%81%AA%E3%81%A9%E3%81%AE-web-%E3%81%AE%E9%87%8D%E8%A6%81%E7%9F%A5%E8%AD%98%E3%82%92%E6%89%8B%E3%82%92%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6\" aria-label=\"cookie や cors などの web の重要知識を手を動かして学ぶ permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Cookie や CORS などの Web の重要知識を手を動かして学ぶ</h3>\n<p>Cookie や CORS といったトピックを解説している例は非常に多いですが、手を動かせる例はそれほど多くないと思います。</p>\n<p>このコースでは、HTTP の通信をしっかり見ながら、Cookie やセッション、そして CORS といった仕組みを学ぶことができるようにしています。</p>\n<p>実際に手を動かしてみるのは、「なんとなく」を卒業するにはぴったりです。</p>\n<h2 id=\"おわりに\" style=\"position:relative;\"><a href=\"#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB\" aria-label=\"おわりに permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>おわりに</h2>\n<p>このコースの紹介は以上になります。</p>\n<p>個人的には、Web アプリの開発に入門した次のステップで是非取り組んでほしい、かなりおすすめの内容になっています。</p>\n<p>テーマの都合上、検索などでたどり着いてくれる方は少ないだろうと思っていますが、少しでも多くの方に手にとっていただけると嬉しいです。</p>\n<p>最後に、著者が出した Udemy 講座の一覧（割引クーポン付き）は、以下のページにまとまっています。</p>\n<p><a href=\"https://www.nextskill.co.jp/courses\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://www.nextskill.co.jp/courses</a></p>\n<p>ご興味ある方はこちらからアクセスしてみてください。</p>","fields":{"slug":"/posts/udemy-web-application-development-with-javascript","tagSlugs":["/tag/udemy/","/tag/web/","/tag/javascript/"],"autoRecommendPosts":["books-about-how-web-and-web-applications-works","udemy-mnist-app","udemy-docker-from-linux-and-networking","udemy-llm-apps"]},"frontmatter":{"date":"2022-08-03T10:17:34.478Z","description":"先日、Udemy 講座第 2 段として、「JavaScriptで学ぶWebアプリ開発の必須知識〜Node.js・Web API・Ajax・async/await〜」というコースをリリースしました。\nどんなコースなのか、どういった考えで作ったのかを、この記事で少し紹介させていただきます。","tags":["udemy","web","javascript"],"title":"Udemy で「JavaScriptで学ぶWebアプリ開発の必須知識〜Node.js・Web API・Ajax・async/await〜」をリリースしました","socialImage":null,"recommendPosts":null}}},"pageContext":{"slug":"/posts/udemy-web-application-development-with-javascript"}},"staticQueryHashes":["251939775","3942705351","401334301"]}