> For the complete documentation index, see [llms.txt](https://takahitomiyamoto.gitbook.io/heroku-basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://takahitomiyamoto.gitbook.io/heroku-basic/toc/level-1/next-actions.md).
# Next Actions
## コードフォーマットを実行する
複数人で開発する場合には、全体の品質を保つために、各々が好きなスタイルでコードを書くことを避けるべきです。
{% hint style="success" %}
コードフォーマットツールのデファクトスタンダードである [**Prettier**](https://prettier.io/) を利用し、各ファイルが統一されたフォーマットに修正されることを確認しましょう。
{% endhint %}
ルートディレクトリに `.prettierrc` ファイルを新規作成し、次のコードをコピペします。
{% tabs %}
{% tab title="JSON" %}
{% code title=".prettierrc" %}
```javascript
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf",
"overrides": [
{
"files": "*.html",
"options": { "parser": "lwc" }
}
]
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
`package.json` の `scripts` に `prettier` コマンドを追加します。
{% tabs %}
{% tab title="JSON" %}
{% code title="package.json" %}
```javascript
...
"scripts": {
"prettier": "prettier \"**/*.{css,html,js,json,md}\" --write --loglevel log",
"start": "node index.js",
"test": "node test.js"
},
...
```
{% endcode %}
{% endtab %}
{% endtabs %}
`prettier` をローカルにインストールし、実行します。
{% tabs %}
{% tab title="Console" %}
```bash
npm install --save-dev prettier
npm run prettier
```
{% endtab %}
{% endtabs %}
それぞれのファイルでコードがどのように修正されたのかを確認します。
{% hint style="info" %}
以後、コードを変更するたびに Prettier を実行することで均一的なフォーマットを維持することを習慣化しましょう。
{% endhint %}
## 静的コード解析を実行する
コードフォーマットを合わせたら、次はコードの書き方にこだわりましょう。せっかくコードを書くのであれば、先人の叡智が詰まった規約に準拠した書き方をお勧めします。潜在的なバグを事前に潰しておくことにも繋がります。
{% hint style="success" %}
JavaScript の静的コード解析ツールのデファクトスタンダードである [**ESLint**](https://eslint.org/) を利用し、コードが規約に違反していないかどうか確認しましょう。
{% endhint %}
ルートディレクトリに `.eslintrc.json` ファイルを新規作成し、次のコードをコピペします。
{% tabs %}
{% tab title="JSON" %}
{% code title=".eslintrc.json" %}
```javascript
{
"env": {
"node": true,
"commonjs": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12
},
"rules": {}
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
`package.json` の `scripts` に `eslint` コマンドを追加します。
{% tabs %}
{% tab title="JSON" %}
{% code title="package.json" %}
```javascript
...
"scripts": {
"eslint": "eslint *.js --format html --output-file .reports/eslint.html",
"prettier": "prettier \"**/*.{css,html,js,json,md}\" --write --loglevel log",
"start": "node index.js",
"test": "node test.js"
},
...
```
{% endcode %}
{% endtab %}
{% endtabs %}
`eslint` をローカルにインストールし、実行します。
{% tabs %}
{% tab title="Console" %}
```bash
npm install --save-dev eslint
npm run eslint
```
{% endtab %}
{% endtabs %}
それぞれのファイルでコードがどのような警告が表示されるのかを確認します。
また、`.reports` フォルダ内に生成されている `eslint.html` をブラウザで開くと、警告を一覧表示することができます。
コードを修正し、警告が消えたことを確認します。
{% hint style="info" %}
以後、コードを変更するたびに ESLint を実行することで警告の有無を確認し、コードを修正することを習慣化しましょう。なお、コードを修正せずに警告だけを消す方法もありますが、可能な限りコードを修正するようにしましょう。
{% endhint %}
## Lightning Design System を適用する
今回のチュートリアルで作成された画面はとてもシンプルですので、Salesforce の標準的なスタイルを適用してみましょう。
{% hint style="success" %}
もっと詳しく知りたい場合は、公式のチュートリアルを試してみてください。
{% endhint %}
Salesforce Lightning Design System (SLDS) を npm 経由でダウンロードし、`public/assets/` 配下にコピーします。
{% tabs %}
{% tab title="Console" %}
```
npm install @salesforce-ux/design-system --save-dev
cp -r node_modules/@salesforce-ux/design-system/assets/ public/assets/
```
{% endtab %}
{% endtabs %}
SLDS を適用するために、`views/partials/header.ejs` の最下部にコードを追加します。
{% hint style="warning" %}
`views/pages/db.ejs` に追加すると、表示がずれてしまうので注意です。
{% endhint %}
{% tabs %}
{% tab title="HTML" %}
{% code title="header.ejs" %}
```markup
Node.js Getting Started on Heroku
```
{% endcode %}
{% endtab %}
{% endtabs %}
`views/pages/db.ejs` のコードを修正します。長いので、コピペしてください。
{% hint style="info" %}
今回利用するコンポーネントは Cards と Data Tables です。詳しくは公式サイトを参照してください。
* [Cards - With no footer](https://www.lightningdesignsystem.com/components/cards/#With-no-footer)
* [Data Tables - Actionable mode - Column sorting and row selection(s)](https://www.lightningdesignsystem.com/components/data-tables/#Actionable-mode-Column-sorting-and-row-selection\(s\))
{% endhint %}
{% tabs %}
{% tab title="HTML" %}
{% code title="db.ejs" %}
```markup
<%- include ("../partials/header.ejs") %>
<%- include ("../partials/nav.ejs") %>
```
{% endcode %}
{% endtab %}
{% endtabs %}
表示するデータを増やすために、Heroku Postgres にテストデータを複数件インサートします。
{% tabs %}
{% tab title="Console" %}
```
heroku pg:psql
insert into test_table values (2, 'hello world');
insert into test_table values (3, 'hello heroku');
insert into test_table values (4, 'hello salesforce');
insert into test_table values (5, 'hello ohana');
exit
```
{% endtab %}
{% endtabs %}
Heroku アプリをローカルで実行します。
{% tabs %}
{% tab title="Console" %}
```
heroku local web
```
{% endtab %}
{% endtabs %}
にアクセスして、画面のスタイルが変わっていることを確認しましょう。
#### 変更前
#### 変更後
確認が終わったら、Heroku にデプロイして終了です。
{% tabs %}
{% tab title="Console" %}
```
git add .
git commit -m "Lv.1 completed"
git push heroku main
```
{% endtab %}
{% endtabs %}
一通りの手順はわかりましたか？他の画面についても、色々試してみてください。