Mechanism for converting to a language that the browser can recognize

High-level and low-level languages

** ・ High-level language ** High-level languages are programming languages designed to be easier for humans to understand than machines. In addition, "high-level" does not mean an excellent language, but means that it is possible to describe elements unique to the model and OS with a high degree of abstraction, and many languages used for developing application software Is classified as a high-level language, so the expression "high-level" is used.

** ・ Low-level language ** Languages that are easy for machines to recognize are called low-level languages. "Lower" does not mean that it is an inferior language, but that it is closer to hardware Therefore, the expression "low grade" is used.

To display the file in the browser, the machine recognizes it after developing it in a high-level language. You need to translate it into a low-level language that you can, and that translation is called ** compilation **.


The task of translating a programming language so that it can be understood by a working machine. Compiling is called a ** compiler (an opportunity-friendly programming language) ** It is done by the program. If there is a language that the compiler cannot recognize, you need to ** precompile ** it in a language that can be recognized in advance.


Ahead-of-time that allows the compiler to translate languages that it cannot translate. Alternatively, it refers to the pre-processing required for the main processing. In other words, the compilation that should be done before compiling or the main processing is precompiling.

For example, a web application precompiles a file written in a high-level language and then passes it to the browser so that the web browser can do the main process of reading and displaying the static file.

There is a mechanism called ** Asset Pipeline ** as a method for performing such precompilation.

Asset pipeline

It is a function that organizes static files called assets such as JavaScript and CSS into small pieces. The asset pipeline can also be added with the ability to precompile high-level languages, which can be applied to development using SCSS, TypeScript, etc.

The processing of the asset pipeline is performed in the flow of ** "(1) precompile", "(2) concatenation", "(3) compression", and "(4) placement" **. After precompiling and concatenating multiple static files, compress and reduce the weight and place it in the public directory so that it can be passed to the browser.

Until now, Rails used the asset pipeline by Gem called ** Sprockets ** by default to precompile CSS, JavaScript, etc.

However, in recent years, it has become common to develop JavaScript library functions together, so Rails has started to precompile using ** module bundler ** from version 6 onwards.

Module bundler

Module Bundler is a tool for managing JavaScript modules while considering their dependencies.

A module is a group of processes that divides functions one by one so that they can be read from other files. In JavaScript, if you divide multiple functions into files, problems will occur when you combine them into one file, so in the Node.js environment, functions are handled in units called modules.

Modules allow you to split a large number of features into multiple files, and combine the split features into a single file that works fine. However, there is a problem that it cannot operate properly if there is a module that cannot be loaded due to the dependency created because it is divided into multiple modules.

The module bundler that manages modules in a batch is the solution to this problem. In recent years, ** webpack ** is becoming the mainstream among module bundlers.

webpack webpack is a tool for managing various JavaScripts required when creating a web application. There are four main things that webpack does.

Basic elements role
Entry Decide which file to use as the reference (entry point) to resolve the dependency
Output Specify where and what name to output (output) the file that is used as an entry point and organized by webpack.
Loaders Read (load) the method of converting files such as CSS and HTML other than JavaScript into modules, and perform the specified process.
Plugins Introduce and extend (plug-in) tasks such as compression that the loader cannot perform except by grouping files.

In other words, by using webpack, it is possible to convert and compress the JavaScript library and various languages other than JavaScript, and then place it wherever you like.

It is possible to operate commands by introducing webpack to Rails, but since it is a little difficult to describe the configuration file, there is a gem called ** Webpacker ** that simplifies the setting.

Webpacker It is a Gem that makes webpack Rails specification and prepares a dedicated configuration file and helper method. From Rails version 6 and later, Webpacker is installed by default. Webpacker makes available JavaScript packages in addition to precompiling static files similar to the Sprockets asset pipeline.

Recommended Posts

Mechanism for converting to a language that the browser can recognize
A description that only the poster can access
[Android] I want to create a ViewPager that can be used for tutorials
How to make a mod for Slay the Spire
An introduction to Java that conveys the C language to those who have been doing it for a long time
(For myself) Build an IDE that you can touch from a browser with docker (trial)
[Java] I tried to make a rock-paper-scissors game that beginners can run on the console.
SDWebImage: How to clear the cache for a particular UIImageView
Find a Switch statement that can be converted to a Switch expression
A memorandum to reach the itchy place for Java Gold
Can Selenium automate the browser?
The story of making a binding for libui, a GUI library for Ruby that is easy to install
Let's create a Docker container that can connect to CentOS 8 with the minimum configuration by SSH
How to deal with the type that I thought about writing a Java program for 2 years
I want to create a chat screen for the Swift chat app!
The story of Collectors.groupingBy that I want to keep for posterity
I made a question that can be used for a technical interview
[Rails] How to change the page title of the browser for each page
Rubocop-daemon as a countermeasure for the problem that RuboCop starts slowly
A good way to make a recursive function that reverses the characters
How to identify the path that is easy to make a mistake
How to check for the contents of a java fixed-length string
A story about changing skills from COBOL cultivated for 5 years in the late 20s to a Web language
About the language to be learned
A memo that was soberly addicted to the request of multipart / form-data
How to interact with a server that does not crash the app
Glassfish tuning list that I want to keep for the time being
A program that determines whether the entered integer is close to an integer
A story that was embarrassing to give anison file to the production environment
I tried to make a program that searches for the target class from the process that is overloaded with Java