Name: 初心者のためのExpress.js & Node.jsコース - 完全チュートリアル (Express.js & Node.js Course for Beginners - Full Tutorial)
Uploaded: 2021-01-14T10:24:23.000Z
Duration: 2 h 28 min 14 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

high in this tutorial, I'm going to show you how to develop a Web application using No J s and the Express J Swept Framework.

We will then deploy our application to AWS using elastic beanstalk environment.

We will develop a landing page where we collect and manage sales leads.

You can freely use the resulting source code as a starting point to develop your product.

And we will cover all off the concepts that you need to know to build a fully fledged Web application using Know Js we assume intermediates programming knowledge, but no background in bail application development or no genius.

So a little bit of background on No Jace many years back, developer Ryan Dole explored the idea of using general script for service side programming with the main motivation that existing http servers could not handle lots off simultaneous connections efficiently.

Meanwhile, also, Google's Chrome browser team developed a new jealous script changing from scratch called V eight and the unique property of V eight is that it was built to be much, much faster in interpreting and running JavaScript compared to the other browsers.

And no J s took Googles optimized V eight jealous script engine for server side programming, also creating a setup that allowed for much more scalable handling off requests and also a package manager or managing the open source.

Jealous crude libraries was introduced called MPM, and no Js was war.

Now, before we install Node.js, we're going to start by installing a script called In the Em.

So go ahead a type N V M in your browser and click on this link.

Envy Emma's short for no version manager.

It's a script to manage multiple active know Js versions on a single computer.

So let's go ahead and scroll down to copy and paste the install scripts for N V M.

I already had envy em installed, so this step may take a little longer.

In your case on what you need to do is close and reopen your terminal so that the Envy em script can initialize while your terminal starts.

You can check that your installation was successful by typing Envy em dash version.

We're now ready to install know Js So let's go back to jail or we're interested in the long term support version off no jizz.

And as off this video it is 10.15 point zero is the version that we need, So we go back to our terminal type N V M install 10 15 that zero of this step may take you a little bit longer.

You should have now no GS installed and being actively used just for the sake off showing you how it works.

You can also install other jails versions.

Let's go for 8 11 3 for example, and you can switch between know Js versions by typing envy em used so that switch back to using know Jay's $10.15 0 now for our application we're going to use, Express suggests.

Express Js up come express chases, a Web framework and the power off it is.

In its simplicity, you can develop very complex Web applications, yet it is a minimalist Web framework that is very easy to grasp, and this is the install commands for express, yes, but we're going to use another tool called the Express generator that will give us a good starting points and a directory structure.

So let's go ahead and copy and paste this command directory to install express generator.

Now here in this comment, NPM, as I mentioned, is the package manager.

We will use this to install packages and hear the dash G stands for a global install, which means the installation is going to happen the computer wide and not just one particle project.

But now we can go ahead and run express generator to generate our application and useful directory structure.

So I'm gonna copy Paste this command here, Dash Dash Few equals Puck means we're going to use pug as our HTML tempting engine.

So I'm just going to press enter and we have now created a directory structure for our application.

Now that we have January to the skeleton directory structure for our application, I want to go over each folder V creates.

Well, let's go ahead and start our text editor and let's take a look under my app.

The public folder contains our assets as it's our static files that your HTML files makes references to each HTML Files will refer to certain images such as logos and some jealous script files that need to be run on the Web page or style sheets that describe the style on a Web page.

Logic will get to routers in a little bit, and it's one of the key parts of our application.

And finally, views contain the representation off each individual html page in our application.

Notice that these are named park files on each of them.

Get converted to separate html page the BIN that the doubling file contains the initialization script for our Web server, and one off the notable files is Act Up J.

This is the main entry point for our entire live application, and also we have the package that Jason File, which is a recipe that contains the list off open source packages we need to install to run our application.

Now let's go ahead and install these packages and run our application.

As it is, we go back to our terminal CD, my APP, and we type in p m stole.

We're pulling and installing all those packages.

This file contains not just the packages that we need, but also NPM allows us to fetch all the dependencies that these packages have and Now we know to run our application.

And once I press enter, the Web server is running on Port 3000.

When I visit local host 3000 on my browser, I get to see this Web page served.

If you go back to our source code at the Js is the most important file that we care about after Js defines our application know Js express Js Applications are monolithic, meaning that every piece it's put together into a single application and let's see how that works.

We first important modules using the require statements and typically these modules are those ones that we find under the packages of Jason File these models here you will see that they have been imported and assigned to variable instances.

The one we're interested in is this express variable as you see the require statements includes the express package, assigns it to a variable and then later on, we call the constructor for express and a sign the results to a variable called up and up is an instance off on express application.

Typically, this is a vanilla instance, and then we make certain method coals to modify and configure our application and also use and include other modules.

Here we first set that the views are included in the directory called Views.

This is what this line does and we have as you can see, a fuse directory here and next.

We said that we are going to use pug as our view engine, So the APP instance that is unmodified and new gets modified by these set call.

And then we have certain use method calls where we defined further configuration for the components that were going to use it.

One off the notable ones is the index router object that we have defined in this project.

If you go up here, we used the require statements to include an index Js under the Routes directory, whatever that has been exported from this index.

Serious files assigned to index dropped variable, and this instance is then used for the path that is slash.

So this line means that our application is going to use index router for the slash route.

And that's how we also connect pieces off our application into one.

On a little instance, because in the extractor was defined here under index serious and it has been included from Apogee.

Yes, let's take a look at how the routes object is define.

If we go on the routes and index the Js again, we are requiring the express package.

We have a variable called Express and then we call router to create an instance off an express router.

And just as redid here, the router instance here is a vanilla instance.

It hasn't been modified, and then we make some certain method calls to define it further.

In this particular case, we're defining get method and how to handle this slash path with a function.

And then we export the router instance that we have created to be included by another module and act up Js includes that rotter here and that's how we connected and the router objects to recap is a vanilla instance that we make some modifications on it and then well, we exported and this pattern is used throughout the application.

This is how you divide your application into separate instances.

Now let's take a look at what they route Handler is and how it works.

Here we have a router variable that is an instance often expressed router, and this rotter variable has several components that we care about.

The 1st 1 is that we're making a call to get on.

This defines that the routes handler is associated with the get http method and then the second cup over.

So typically, a router will match a particular path using a u.

And then finally, there's a handler that gets cold if a path is matched to look at it more closely.

If this is our girl, the first section defines the protocol being used, and the 2nd 1 is the domain.

And then finally, after the slash Here we have a path components.

So a router object will look at this path and see if it is a match for the path that it has in its own definition.

Finally, the router will call the handler that's associated with it.

The last bit of detail here is that the get method here is defining the http method that this route handler is limited to it only response to this get method.

If there are no routes that match for a given path or http method our application generates a 44 error, which means not found so as a recap under routes index that Js were creating an express instance.

And then we're calling Express that router to create a router instance and on this rotter were defining that for the http gets method If we are looking for the path slash and it gets matched, we call this function as our handler for this route and under app dot Js we have index Trotter representing our exports from routes slash index file.

And then we have this statement here at that use and for the slash path we're using index tractor effectively meaning that when we type this route a path with no slash or slash it, it means the same thing.

Essentially on when we press enter, we call the route handler that's defined here, which renders our index page.

And that's how essentially our route handler works before we dive into source code and define roots and handlers.

Let's cover about an http request is and how a request sequence works.

The http short for hypertext transfer political defines multiple methods for browsers to communicate with Web servers and the http methods allow the browser to take different actions.

The get methods simply fetches a resource from the Web server, such as a Web page.

When we make an http get requests, the server typically responds with a resource such as adjacent object or an HTML filing.

In our current scenario, we are interested in sending back on HTML Web page, and we use the express genius specific method called Resident Render.

A resolute render will generate an HTML page, and our Web server will respond back to the browser request with a Web page.

And the other method we're interested in is called http Post.

This is typically used for submitting data to a Web server.

When you fill out a form on a Web page and you press the submit button, the data is sent to the Web server and typically on http Post method is used.

字幕リスト動画再生

初心者のためのExpress.js & Node.jsコース - 完全チュートリアル (Express.js & Node.js Course for Beginners - Full Tutorial)

individual

access

typically

instance