Must Know Ejs 使い方 Article

【2022年最新版】初心者のためのEJS使い方まとめ zumilog from zumilog.org

Introduction

If you are a web developer, you might have heard about EJS or Embedded JavaScript. EJS is a templating engine that allows you to generate HTML markup with plain JavaScript. In this article, we will discuss the basics of EJS and its usage.

What is EJS?

EJS is a simple templating engine that helps developers to generate HTML markup with JavaScript. It is a lightweight and easy-to-use library that allows you to create dynamic web pages by embedding server-side values in your HTML code.

How to Install EJS?

You can install EJS using npm by running the following command in your terminal: ``` npm install ejs ```

Creating a Basic EJS Template

To create an EJS template, you need to create a file with the extension `.ejs`. For example, `index.ejs`. Here's an example: ``` <%= title %> ``` Here, we have used two EJS tags: `<%= %>` and `<%- %>`. The `<%= %>` tag is used to output the value of a variable, while the `<%- %>` tag is used to output unescaped HTML.

Passing Data to EJS Template

To pass data to an EJS template, you need to use the `render` method of the EJS library. Here's an example: ``` const ejs = require('ejs'); const data = { title: 'Hello World', message: 'Welcome to EJS' }; ejs.renderFile('index.ejs', data, (err, html) => { if (err) throw err; console.log(html); }); ```

Using Loops in EJS

You can use loops in EJS to generate dynamic content. Here's an example: ```

<%= fruits[i] %>

``` Here, we have used a for loop to generate a list of fruits.

Using Conditional Statements in EJS

You can also use conditional statements in EJS. Here's an example: ``` <% if (user) { %><% } else { %><% } %> ``` Here, we have used an if-else statement to greet the user.

Using Layouts in EJS

EJS also supports layouts, which allows you to reuse common HTML markup across multiple pages. Here's an example: ``` <%= title %>

<%= body %>

``` Here, we have created a layout file that includes a header, a main section, and a footer. We have also used the `<%= body %>` tag to render the content of the individual pages.

Conclusion

EJS is a simple yet powerful templating engine that can help you create dynamic web pages. In this article, we have discussed the basics of EJS and its usage. We hope that this guide will help you get started with EJS and take your web development skills to the next level.