Hello, I'm Kim, a coder at Coding Factory (CF). Today I'd like to introduce you to an unexpected way to study Node.
Web site technologies are broadly divided into two categories: client-side and server-side.
On the client side, we create the appearance (site/application) that users see when using the web. First, coding is required to make what the web designer has designed usable in the browser. The languages required here are HTML (documentation), CSS (styling), and JavaScript (movement, etc.), and all of Monosus' CF members are client-side engineers who use these languages.
Simply put, server-side refers to processing data managed by the server. Java, PHP, Ruby, and Python are languages commonly used on the server side.
The programming languages used on the client side and the server side are different. If a client-side engineer wants to develop on a server, they need to learn a new server-side language. However, since the birth of Node, client-side engineers can now develop on the server without having knowledge of the server-side language.
The reason is that Node is JavaScript that runs on the server. JavaScript is the only client-side programming language, so as a client-side engineer, I think it's great that if you have knowledge of JavaScript, you can develop on the server using Node.
Node is a server-side programming language, so it is often used for application development, but in fact, web production using Node has become common recently. It is possible to develop directly using Node, but Node also provides many convenient tools. These are called packages. Here I would like to introduce the Node packages that I often use.
Autoprepixer
Autoprepixer is a package that adds vendor prefixes to CSS properties according to the browser version.
If the latest CSS is not fully applied to older browsers, vendor prefixes may be required. It can be quite a hassle to research and add vendor prefixes for each version of various browsers, but Autoprefixer can easily add them automatically.
The CSS on the left is converted using autoprefixer and is shown on the right.spritesmith
Spritesmith is a package that automatically generates images for sprites by simply putting multiple image files together in a folder. It also writes out properties such as position and width so that they can be used in CSS and Sass.
The more image files on a web page, the more requests there are to the server, which reduces the performance of the site. This is a very helpful package when you want to reduce requests as much as possible.
Task runner
For simple tasks, it is not a problem to use only the necessary packages, but depending on the project, multiple packages may be used. In such cases, a task runner is used to manage the processing of various packages as tasks. Task runners are also Node packages, and gulp and webpack are often used.
*Although webpack is not actually a task runner, it can be used as a task runner.
Now, let's finally learn how to study Node using the command line. To learn Node, you can read the documentation on the Node website or use online videos such as dotinstall , but you can also learn using the command line.
Screenshot of iTerm2, a command line tool for Mac
First, download Node from the Node website and install it . Once installed, open the command line tool on your computer and create and move to a folder for this study. Since we are using the command line tool , let's try it with commands to create and move to a folder. The method is simple, just enter the following in the command line tool .
Type " mkdir study_node " 
"mkdir" is an abbreviation for "make directory" and simply means "to create a folder."
A folder called "study_node" will be created, so move into that folder.
Type "cd study_node" 
Enter the command "cd study_node" to move into the study_node folder. It is difficult to tell where you are using the command line tool, but there is a command to check this.
Type " pwd " 
"pwd" is an abbreviation for print working directory and tells you "where you are currently working."
Now install the Node tutorial package .
The command looks like this:
Type " npm install -g learnyounode " 
Once installed, enter the command "learnyounode".
Type " learnyounode " 
It will be displayed in English at first, but if you select Japanese under the "Select Language" item under the menu, the learnyounode menu will be displayed in Japanese.
As you can see, there are 13 practice questions, and you can select one of them to see the content.
Let me try to answer the first question.
The problem is to write the source of the app that outputs "Hello World" to the console, so open your favorite editor and create a JavaScript file called program.js in the study_node folder.
To output text from the console, use the console's "log()" function, so write console.log('Hello World'); and save it.
After that, run the command "learnyounode vertify" to verify it. The learnyounode package will then verify the program.js file it created and display the results.
In this way, you can learn about Node while solving problems.
Command line learning applications like learnyounode are run by the Node community, NodeSchool .
In Japan, there is a Node community called Tokyo Node Gakuen . There are many other subjects besides Node, such as JavaScript, Git, Sass, and markdown, so why not start with the one that interests you?
Node school at "Tokyo Node Gakuensai 2016" held in Shibuya on November 12, 2016 by the Japanese Node community Tokyo Node Gakuen.
My impressions after studying Node.js
I've just started studying Node.js myself, so it's difficult to sum it up in one sentence, but I feel that "it looks difficult at first glance, but it's easy to learn." Node.js is being developed very actively, and version updates are being made frequently. As a result, there are many documents and articles about Node.js. It may be a little difficult to study Node.js from the command line at first. If you are one of those people, I think it's a good idea to gradually get used to it by actually putting packages made with Node.js into your work and projects.
This concludes my article on how to easily study Node.js from the command line.
モノサスアーカイブ