つくって楽しいJavaScript入門 特設ページ

このページは、「つくって楽しいJavaScript入門 身近な不思議をプログラミングしてみよう」の特設ページです。

本書で使用するサンプル・プログラムと、JavaScriptのプログラムを入力して実行するためのアプリ(開発環境)、Croqujsのダウンロードができます。

  • スペースタイム柳田拓人著、
    サイエンス&プログラミング教室ラッコラ監修

本書に関するお問合せは翔泳社ウェブサイト(つくって楽しいJavaScript入門|翔泳社の本)よりお寄せください。

サンプルのダウンロード

各章で使用する(サンプル)プログラムを、章ごとにフォルダーにまとめてあります。

ファイル名

ファイル名は本書に掲載されているとおりです。
同じプログラムを少しずつ変えていく場合、ファイル名の末尾に数字を付けて連番にし、各段階を表しています。
実験クイズで、その時だけの変更を加える場合は、ファイル名の末尾を_q1, _q2, _q3, …としています。
ただし、実験クイズでも、その変更を続けて使うような場合は、通常の連番としています。

改造レシピ

改造レシピのサンプル・プログラムはファイル名の末尾を_r1, _r2, _r3, …としています。
基本的に、改造レシピを適用する直前のプログラム(連番になっているファイルの一番番号の大きなもの)に、1つだけ改造レシピを適用した状態となっています。

Croqujsのダウンロード

Croqujs《クロッキー》はプログラミング学習と創作をサポートするために、ラッコラが独自に開発した編集ソフトです。

Croqujsを使うと、JavaScriptのプログラムを入力してボタンを押すだけで、すぐに実行結果を確認することができます。

名称 Croqujs《クロッキー》
バージョン  v5.9.2
ダウンロード
Windows用
  • インストーラー(実行形式、約115MB)
    (Windows 10での動作を確認しています。)
macOS用
  • インストーラー(DMG形式、約83MB)
    (macOS 11 Big Surでの動作を確認しています。)

※Dropboxの共有機能を使っています。

免責事項 このアプリケーション・ソフトウェアをご利用の上で発生したあらゆる損害に関して、弊社は一切の責任を負いません。 また、今後、セキュリティ上の問題が明らかになった場合でも、それらに対する更新の責務を負いません。
ソースコード GitHubリポジトリ

インストール

Windowsの場合

上記のダウンロードの中から、「Windows用インストーラー形式」のリンクをクリックし、表示されたページの「ダウンロード」をクリックします。

ファイルを保存するかどうか聞かれたら、「ファイルを保存」をクリックして、デスクトップなどおぼえやすい場所に保存します。

デスクトップ(またはファイルを保存した場所)に移動し、インストーラー・ファイル「croqujs-win-setup.exe 」をダブル・クリックします。インストーラーが起動します。

「WindowsによってPCが保護されました」という画面が表示された場合は、「詳細情報」をクリックしてから、「実行」ボタンを押してください。

「このコンピューターを使用しているすべてのユーザー用にインストールする」のか、「現在のユーザーのみにインストールする」のかを聞かれます。通常は、後者を選ぶとよいでしょう。

「インストール」をクリックします。少し待つと、「Croqujsセットアップ ウィザードは完了しました。」と表示され、インストールは終了します。「Croqujsを実行」のチェックを外し、「完了」をクリックします。

インストールが終わったら、デスクトップスタートメニューの中にショートカット ができます。

Macの場合

上記のダウンロードの中から、「macOS用インストーラー形式」のリンクをクリックし、表示されたページの「ダウンロード」をクリックします。

すると、通常はダウンロード・フォルダーに保存されます。

ダウンロード(またはファイルを保存した場所)を開き、インストーラー・ファイル「croqujs-mac-x64.dmg」をダブル・クリックします。インストーラーが起動します。

Croqujs.appのアイコンをApplicationsフォルダーに、ドラッグ・アンド・ドロップします。

macOS版の場合、インストールは問題なく行えますが、アプリの起動がブロックされてしまうことがあります。

そこで、インストール後の初回起動時のみ、ファインダーで、「アプリケーション」フォルダーに入っている「Croqujs」のアイコンをControl+クリック(右クリック)し、メニューから「開く」を選択します。

以降は、他のアプリと同様にLaunchpadから起動することが可能となります。

Croqujsの使い方

プログラムのファイルを開く

  1. Croqujsを立ち上げます。
  2. 編集したいプログラムのファイル「〇〇〇〇.js」を、立ち上げたCroqujsにドラッグ・アンド・ドロップ(マウスなどのボタンを押し、編集したいプログラムのファイルを選択したまま、Croqujs上へ移動し、ボタンを離す)してください。

「Windows用インストーラー形式」でインストールした場合

プログラムのファイルが  のアイコンになっていれば、そのままそのファイルをダブルクリックすると、Croqujsが立ち上がり、ファイルが開かれます。

「ウェブページとしてエクスポート」する

何らかのプログラムを開いている状態(実行ボタンを押すと動作する状態)で、メニューの「ウェブページとしてエクスポート」をクリックします。

すると、プログラムのあるフォルダーの中に、「<プログラム名>.export」というフォルダーが新たに作られます。

この中にある「index.html」を開くと、Croqujsがなくても、ウェブブラウザーでCroqujsでの実行結果を見ることができます。

※「<プログラム名>.export」フォルダーの中身一式は通常のウェブページと変わりありません。

Croqujsで書かれたプログラムは、それ自体が純粋なJavaScriptです。

Croqujsは、実行ボタンが押されたタイミングで、内部的に「ウェブページとしてエクスポート」と同等の処理を行い「ウェブページ」を作成し、それを実行画面で表示しています。

サンプルプログラムの冒頭によく登場する、「// @」で始まるCroqujsへの指示は、内部的に作成されるウェブページ(index.htmlファイル)のスクリプト・タグの出力に反映されます。

よくある質問

// @need lib/croqujs」と間違いなく書いてあるのに、「Croqujsエラー ファイル「lib/croqujs.js」を読みこめませんでした。」と表示される。

Croqujsによるライブラリの読み込みは、いま開いているプログラム(●●.js)が存在するフォルダーを起点に行われます。

したがって、もし今開いているプログラム(●●.js)が「document」フォルダーにあり、プログラムに「// @need lib/croqujs」と書いてあるなら、同じ「document」フォルダーの中に、「lib」フォルダーもある必要があります。
※「●●.js」ファイルと「lib」フォルダーが並んでいる状態。

lib」フォルダーはサンプル・プログラムのあちこちのフォルダーに入っています(どれも内容は同じです)ので、コピーしてお使いください。

書いてある通りにプログラムを入力して、実行ボタンを押しても何も起こらない。

各サンプル・プログラムの最初に書いてある「// @need lib/●●●●」のような、「Croqujsへのライブラリーの読み込みの指示」が書かれているかを確認しましょう。

また、今編集中のプログラム(●●.js)と同じフォルダーに、「lib」フォルダーもあるでしょうか?
※「●●.js」ファイルと「lib」フォルダーが並んでいる状態。

各サンプル・プログラムには付属していますが、もし自分で新しいプログラムを書いているときは、サンプル・プログラムのフォルダーに入っている「lib」フォルダー(どれも内容は同じです)をコピーしてお使いください。


ラッコラ / スペースタイムの本