1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript 読み込み】勉強メモ⑥

Last updated at Posted at 2020-11-01

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

JavaScriptのコード読み込み

  • HTMLドキュメントに直接書く方法

 HTMLドキュメント内に、<script>、</script>を追加すれば、その中にJavaScriptを直接書く事が
 出来る。
 <script>ダグは、<head>~</head>内、または<body>~</body>内のどこにでも追加出来る。
 が、一般的には</body>終了ダグの直前に追加する。

<body>
・・・省略

  <script>
    'use strict';
    ここにJavaScriptのコードを書く
  </script>
</body>

 use strictは、相互性を確保する為のもの
 要は、新しいJavaScriptをちゃんと実行させる為のものという認識で良いかと

  • JavaScriptファイルを指定して読み込む

 <script>ダグにsrc属性を追加して、そこに外部JavaScriptファイルのパスを指定。
 <script src="JavaScriptファイルのパス"></script>

index.html
<body>
・・・省略

  <script src="script.js"></script>
</body>
script.js
'use strict';
 ここにJavaScriptのコードを書く

RailsにおけるJavaScriptの読み込み

 railsにはAssets Pipelineという、app/assetsの配下に置いたファイルと、
 application.js・application.cssを自動的にコンパイルされる仕組みがある。
 なので、app/assetsの配下に設置したJavaScriptもすべてのviewで実行される。

  • 手順

 1、JavaScriptを記述するディレクトリを作成
  assetsディレクトリ内に、javascriptsというディレクトリを作成

 2、 JavaScriptを記載する準備
  先程作成した、app/assets/javascriptsの中に、application.jsを作成

 3、記述したJavaScriptを読み込む為の記述
  app/views/layouts/application.html.erbの<head>~</head>内に、
  <%= javascript_include_tag 'application' %>を加える。

 4、manifest.jsに記載
  app/assets/config/manifest.jsに下記を記載する。

manifest.js
//= link_directory ../javascripts .js

 これで作成したapplication.jsのファイルを呼び出せるようになる。

 5、application.jsに下記を記述

application.js
//= require rails-ujs
//= require_tree .

 //= require rails-ujsはRailsでJavaScriptを使用する為のもの。

 //= require_tree .は、application.jsが存在するディレクトリの、JavaScriptファイルを
 全て読み込む為のもの。
 ↓↓↓ こういう事です。
ファイル名
 application.jsに、//= require_tree .記載すれば、
 application.jsの下にある、3つのjsファイルもちゃんと読み込まれる。

 これで、ちゃんとJavaScriptが読み込まれていると思うので
 console.logで確認してみてください!


過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?