Javascriptでファイル読み込みについて調べてみた。

Top > Programing > javascript_file

ネットで検索すると、なんか色々な方法がヒットする。 何がどうなっているのか? 区別できるよう調べてみた。

サーバーサイドのファイルを読み込む †

Ajaxのブーム以降、いろいろ進化している。動的にページを読み込むなんてー場合、ベースとなる技術。

Ajax †

ファイル読み込みを非同期でやるとAjaxになる。

• Ajaxを勉強しよう
• 第二章　プログラムを作って体験しよう：サーバー上のテキストファイルを読み込みページ上に表示する

• Serverファイルの読み込み http://home.a00.itscom.net/hatada/js-tips/loadserverfile.html

• Ajax入門 http://www.ajaxtower.jp/ini/

jqueryを使って、ajaxで読み込む †

jqueryがある環境なら簡単にできる。

• jQueryで外部テキストファイルを表示する | Blog | 06.GRASSHOPPER https://ghweb.info/post-2976.html
• 外部ファイルをjsで読み込む時に気をつけたい基本事項 | Wenblish ウェンブリッシュ http://wenblish.com/js-load-basic/

jqueryでないライブラリ †

でも、今どきjquery使わないよね。ファイルを読み込むだけだし。という意見もあるだろう。

• jQuery.ajaxの代わりにSuperAgentを使う - Qiita
• 【JavaScript】jQueryより軽量なSuperAgentを使ってみよう | Mobile First Marketing Labo

• Ajax(XHR)如きにjQueryは重過ぎ!!な時の軽量ライブラリ集 | ゆっくりと…

Native（Fetch API） †

Ajaxをモダンに記述する。でも、まだモダンすぎるような。

• jQuery.ajax()の代替としてFetch APIをざっくり使ってみる - tacamy.blog
• Fetch API 解説、または Web において "Fetch する" とは何か？ - Block Rockin’ Codes
• お疲れさまXMLHttpRequest、こんにちはfetch - Qiita

• Fetch 概説 - Web API インターフェイス | MDN

その他 †

• ASCII.jp：「シングルページ」流行の7つの理由と最新事例まとめ (1/4)｜イシジマミキの実践！「シングルページ」デザイン塾

• Reactを使うとなぜjQueryが要らなくなるのか - Qiita
• JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット | dwango creators' blog（ドワンゴクリエイターズブログ）
• 5分で理解する React.js - Qiita

• 2016年にJavaScriptを学ぶとこんな感じ – Medium Japan – Medium

Javascriptでjsコードファイルを読み込む †

createElementでDOMに追加する、Ajaxで読み込む、専用ライブラリを使うといった方法がある。

• JavaScriptから外部JavaScriptを読み込む方法 - ヒルズで働く@robarioの技ログ

createElementでDOMで追加する †

scriptタグを追加して、src属性にコードを読み込ませる。

• 動的にJSを実行する方法 - Qiita http://qiita.com/w650/items/adb108649a0e2a86f334

• 団塊爺ちゃんの備忘録 http://www.jiichan.com/programming/programming.php?lang=js&no=03

• JavaScriptから外部JavaScriptを読み込む方法 - ヒルズで働く@robarioの技ログ

専用ライブラリを使う †

• RequireJS使い方メモ - Qiita
• require.jsの、requireとdefineの違い - webネタ
• RequireJSの導入から使い方（Bowerにも触れてみる） - yutaponのブログ

• JavaScriptで外部ライブラリを読み込むためのスクリプトをCodeRepos.orgに上げた。 - ヒルズで働く@robarioの技ログ

クライアントのローカルファイルを読み込む †

HTML5 File API使う。Webアプリに使う感じ。 ブラウザを実行しているクライアントのファイルが対象。

• テキストファイルを読み込む−JavaScript入門（HTML5編） http://www.pori2.net/html5/File/020.html

• File API https://www.w3.org/TR/file-upload/

• HTML5のFile APIでローカルファイル情報取得してやんよ!!! | ときどきWEB http://tokidoki-web.com/2013/08/file-api%E3%81%A7%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%82%84%E3%82%93%E3%82%88/