jsファイルを実行する方法

TOP
コラム
jsファイルを実行する方法

jsファイルを実行する方法

js(javascript)を動作させる方法はいくつか存在しています。以下で説明させていただきます。

①ブラウザの開発者ツールを使用してjsファイルを実行する方法

googleChromeではブラウザに備え付けられている開発者ツールを使用してjsファイルを実行させることができます。
cromeではf12キーで呼び出せる開発者ツールを呼び出すと上部に「elements」や「Console」と記載されている画面が呼び出されます。その中の>consoleタグで1行ずつですが、jsファイルを入力して実行することができます。

②webアプリを使用してjsファイルを実行する方法

jsはwebアプリでコードエディタが複数提供されています。「Liveweave」や「JSFiddle」等web上でjsファイルを実行できる環境があります。
上記のようなエディタを利用することで、ブラウザ上でも本格的なプログラミングを行うことができます。以下でいくつかのコードエディタを紹介します。

①【JSFiddle】

JSFiddleはHTML / CSS / JavaScriptによるプログラミングの実行とプレビュー表示が可能なサービスです。JavaScriptライブラリなどもCDN経由で利用でき、URLをシェアすれば誰でも閲覧・実行することができます。また、複数人によるコラボ連携も可能で、同時編集やチャットなどもできるのでペアプログラミングなどにも最適でしょう。

②【CodePen】

こちらもJSFiddleと同じようにプログラミングして実行・プレビューできるサービスです。プレビューに関しては、エディタ上で確認できるだけでなく専用のURLで通常のWebアプリのように表示することも可能です。また、ポートフォリオ機能によって自分の作ったプロジェクトを一覧表示するページが提供されていたり、ブログを投稿できる機能もあるのが特徴的です。

③【PlayCode】

PlayCodeはディレクトリ構造を持つ複数のファイルを作成しながら、HTML / CSS / JavaScriptによるプログラミングを実行・プレビューできるサービスです。ファイルを分割できることで、ソースコードの管理がしやすいのが特徴でしょう。また、コンソール画面によるデバッグやGitHubとの連携によって活用の幅が広がるのも魅力的です。

③スマホアプリによる実行する方法

最近はスマホからでもWebプログラミングができるようになっており、専用のアプリをインストールすることで誰でも簡単に導入できるようになっています。なかでも、人気の高いアプリをご紹介しておきます。

①【Dcoder】

DcoderはHTML / CSS / JavaScriptによるフロントエンド開発を学習するにはちょうど良い開発環境を提供してくれるアプリです。コードエディタとプレビュー用の画面が別々に用意されているので、スマホの小さな画面でも見づらくないのが特徴です。また、JavaScript以外にもPythonやRubyなどさまざまな言語を実行できる環境も提供されています。

②【Codeanywhere】

Codeanywhereは、コンテナと呼ばれる仮想環境を構築することでサーバー側とフロントエンド側の両方を開発できるサービスのアプリ版です。まず最初にサーバー側の開発環境を構築しなければいけないので初心者には少し厳しい面もありますが、自由度はとても高く実践的なWebプログラミングを十分に堪能できます。また、開発したプロジェクトをWeb上に公開することや、GCP・AWSなどのクラウドサービスと連携して本格的な開発を行うところまでカバーできるポテンシャルを秘めています。

TMLからJavaScriptを実行する

htmlに直接書き込んでjsファイルを実行する方法があります。記述方法としては以下のようになります。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>サンプルHTML</title>
</head>
<body>
<script>
//ここにJavaScriptを記述する
</script>
</body>

ローカルファイル、外部ファイルを使用してjsファイルを読み込む方法

scriptタグ内ではJavaScriptのプログラムを記述できました。これはもっとも基本的な使い方になるわけですが、別のディレクトリにあるJavaScriptファイルを読み込むことも可能です。この場合は、【src】属性を付与してファイルへのパスを記述します。

<script src="js/sample.js"></script>

この例は、jsフォルダの中にあるsample.jsというJavaScriptファイルを読み込むという意味になります。

src属性はローカルファイルだけでなく、外部のサーバーに置いているファイルをURL形式で読み込むことも可能です。

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

この例では、jqueryの公式が提供しているライブラリのURLを指定しています。

このように、scriptタグを利用することでさまざまなパターンのJavaScriptを読み込んで実行させることが出来るようになります。