skillup

技術ブログ

JavaScript

JSでの他ファイル読み込み。requireやimportについて

投稿日:2018年12月29日 更新日:

JavaScriptに関して、知識が非常に古い段階で止まっているのでコツコツとアップデートをしております。

今回はrequireやimportなど、他のファイルの読み込みについてです。

PHPなどサーバーサイドの言語を使っている場合、ファイルを適切に分けて、モジュール化しておくことが一般的です。

こうすることで

  • コードが読みやすくなる
  • 機能ごとにファイルを分割できる(保守性、再利用性の向上)
  • 名前空間の汚染を防ぐ

などのメリットがあります。これがないと一つのファイルに全ての処理を詰め込むことになりますので、コードが非常に見にくいですね。

が、JavaScript関連は仕様が錯綜しており、情報を整理するのが結構大変です。

自分なりにファイルの読み込みをまとめてみました。

require

サンプルコード

https://github.com/umanari145/front_end_javascript/tree/master/require

  • 元々はRequireJSというモジュール管理の仕様。
  • 現在ではnodeJSで一般的に使われる手法。
  • ブラウザから読み込むタイプのJavaScriptではコンパイルしないと無理。(生で使えない)

参考リンク

RequireJS使い方メモ

importとrequireどちらを使おう…。

Node.jsのexportsについて

import

サンプルコード

https://github.com/umanari145/front_end_javascript/tree/master/import

  • ECMAScript2015から使えるようになった書き方。
  • コンパイルなしで読み込むことが可能(開発環境を整えるのは思った以上に大変なので、このメリットは大きい気がする。)

いまどきなフロントエンド開発者になる!JSのモジュール管理ってこういうこと

Webpack を使わずに import 文を使う

ES6のExportとImportについて

 

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ajaxがらみのイベントの発動とwhenに関して

実務で住所のプルダウンを実装する機会がありました。 [東京都][中央区][明石町] みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。 これを実装するときのポイントですが、新規保存より …

no image

複数の非同期処理終了後(when&Promise.all)

JavaScriptで複数の非同期処理(例:API)を走らせて、その非同期処理が全て終わった後で、何らかの処理をしたい時について。 Contents1 when2 Promise_all when j …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

Promiseを使った非同期処理

今回はPromiseを使った非同期処理について。 JavaScriptでの非同期処理ですが、処理1、処理2があった場合、よく言われるコールバック地獄になってしまいます。うまく関数化すればそうでもない気 …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …