じょんの美ライフ

じょんのび~新潟の方言で「のんびり、ゆったり」~

iPadでJavaScript学習の環境を無料で構築する手順3ステップ

f:id:RakuRakuOwl:20210412002841j:plain

いつも購読いただき、ありがとうございます。

iPadでプログラミングをしてみたいと思い、JavaScriptの学習環境を整えたから備忘録も兼ねて記事にする。

結論からまとめると、

といった内容。

(ステップ1)JavaScript Anywhereをインストール

まず始めにWeb開発アプリの「JavaScript Anywhere」(以下、JSAnywhere)をインストールする。

JavaScript Anywhere JSAnywhere

JavaScript Anywhere JSAnywhere

  • Tatsuya Tobioka
  • Utilities
  • Free

apps.apple.com

JavaScript・HTML・CSSのコード編集が行える無料のWeb開発アプリで、作成したプログラミングをアプリ内のコンソール上で即動作確認できる。

f:id:RakuRakuOwl:20210412201408j:plain

アプリを起動するとホーム画面が表示される。このままでも十分使えるが、より使いやすくするための右下の設定アイコンをタップ。

f:id:RakuRakuOwl:20210412201439j:plain

まず「シンタックスハイライト」をオンにする。アプリが自動でプログラムの構文を識別して文字を色分けしてくれる。ちょっとした誤字や文法間違いが見つけやすくなる。

f:id:RakuRakuOwl:20210412200652j:plain

f:id:RakuRakuOwl:20210412182859j:plain

次に、テーマを変更する。筆者は黒背景に白文字が好みのため「Atom-one-dark」を選択。この辺はお好みでOK。

f:id:RakuRakuOwl:20210412200718j:plain

f:id:RakuRakuOwl:20210412200751j:plain
これでJSAnywhereの設定は完了。初期設定の時よりかなり見やすくなったし、黒背景に白文字は長時間画面を見ていても疲れにくいからおすすめ。

f:id:RakuRakuOwl:20210412183331p:plain

こんなに便利なアプリが無料で使えるのは正直驚いた。

が、JSAnywhereのさらに凄いところが「Dropbox」と連携できること。

連携させることで、オンラインストレージからプログラミングデータをインポートして編集したり、編集したデータをストレージへエクスポートすることができる(Googleドライブ等のストレージサービスには未対応)。

さっそくDropboxも設定してしまおう。

(ステップ2)Dropboxをインストールしてアカウントを作成

次に「Dropbox」をインストールする。

かなり有名だから説明は要らないかもしれないが、無料で使えるストレージサービスでオンライン上のストレージにデータを保存しておくことができる。

apps.apple.com

なお、Dropboxには無料プランと有料プラン(¥1,600/月)があり、無料版では以下の2点に注意する必要がある。

  • 利用できるストレージ容量は1GB
  • ストレージにアクセスできる端末は3台まで

正直、本格的にプログラミングをしようと思うとかなり厳しい利用条件だが、個人が初めてのプログラミング学習に使う程度なら問題ないだろう。

f:id:RakuRakuOwl:20210412201506j:plain

アプリを起動すると、初回画面が表示される。今回は、JavaScriptの学習ように新規のアカウントを作成するため「アカウントを作成」をタップ。*1

f:id:RakuRakuOwl:20210412200541j:plain

アカウント作成画面が表示されるため、以下4つの項目を入力して「アカウントを作成」をタップ。

f:id:RakuRakuOwl:20210412200509j:plain

アカウントの作成が完了すると、有料プランのトライアル、写真のバックアップ設定、パソコンへのインストールをすすめるポップアップが表示される。今回は全てキャンセル・スキップを選択。

f:id:RakuRakuOwl:20210412200357j:plain

f:id:RakuRakuOwl:20210412200419j:plain

f:id:RakuRakuOwl:20210412200442j:plain
初回起動のチュートリアルが終わるとホーム画面が表示される。

f:id:RakuRakuOwl:20210412001354p:plain

これでDropboxも設定完了。あと一息。

(ステップ3)JavaScript AnywhereとDropboxを連携

最後に「JavaScript Anywhere」と「Dropbox」を連携させる。
JSAnywhereアプリの画面右下にあるDropboxのアイコンをタップ。

f:id:RakuRakuOwl:20210412201531j:plain

ポップアップが表示されるので「Dropboxと連携」→「開く」の順でタップ。

f:id:RakuRakuOwl:20210412200318j:plain

f:id:RakuRakuOwl:20210412200252j:plain

その後、DropboxにログインしているアカウントをJSAnywhere側で識別してアクセス許可を求めてくるため「許可」をタップ。

f:id:RakuRakuOwl:20210412200210j:plain

連携が承認されると、DropboxへのエクスポートとDropboxからのインポートが可能になる。

f:id:RakuRakuOwl:20210412001925p:plain

f:id:RakuRakuOwl:20210412001950p:plain

これで連携作業が完了し、いつでもどこでもネット環境さえあればiPadJavaScript・HTML・CSSのコーディングが行えるようになった。

まとめ

今回の記事をまとめると、

iPadでも無料で手軽にプログラミングの学習環境がつくれる
・初心者にはJSAnywhereとDropboxの連携がおすすめ
・各アプリのインストールから設定作業を写真付きで解説

といった感じ。

過去の記事でも何度か解説しているけど、iPadは手軽さが最大のメリット。

はっきり言って、参考書をひたすら読んでプログラミングの勉強をするなんて苦行を筆者が続けるのは不可能。

iPadで環境構築することで手に入れたいメリットは以下の2つ。

  • コーディング(プログラムを書く)作業を手軽にする
  • プログラムを実際にコンソールで動かすという実践型の学習機会を増やす

勉強のハードルを下げることで学習を継続させることがiPadで学習環境を整えたのが最大の狙い。

f:id:RakuRakuOwl:20210412191044j:plain

今後の予定だが、プログラミングの右も左もわかっていない筆者が学習して得たJavaScriptの知識を自身の思考整理の意味も込めて記事をアップしていく。

これまで同様、商品レビューや生活改善の記事も引き続きアップしていくので、そちらも是非、覗いてみてほしい。

ということで、これからも「じょんのび」とブログを更新していくので、また次の記事でお会いしましょう。最後まで購読いただき、ありがとうございます。

おまけ(参考書・学習アプリ3選)

記事の内容はここまで。

ここからはおまけ程度で、これからiPadでのプログラミング学習に使っていく参考書を紹介する。

確かな力が身につくJavaScript「超」入門

www.kinokuniya.co.jp

Amazonをはじめとするほぼ全てのネット通販サイトのレビュー・口コミで高評価を得ている定番の参考書。

専門用語はなるべく使わず、JavaScriptで何ができるかといった初歩的な内容から丁寧に解説されていてわかりやすい。本を開いたときの第一印象はなにより大事。

kindleと紙の本どちらにしようか悩んだが紙媒体で購入。理由は以下の2つ。

  • 復習のためページの行き来が多くなるから
  • kindleだと参考書を見ながら作業するとき画面を2分割するから

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

www.kinokuniya.co.jp

こちらも多くの通販サイトで高い評価を得ている名著。

JavaScriptを勉強しようとすると必然的にWebサイトの仕組みを理解しなければならないため、Webページを記述するための言語であるHTMLやCSSの知識が必須となる。

HTML・CSSの学習を進めながら、実際にWebページを制作していくことで理解をふかめることができる内容となっている。Webデザインの基礎的な内容も学習できるためおすすめ。紙媒体で購入。

Progate-楽しく学べるプログラミング学習アプリ

prog-8.com

こちらも非常に知名度の高いプログラミング学習サービス。

アプリをスマホタブレットにインストールすることで手軽にプログラミングの学習を進めることができるのが特徴。JavaScriptやHTML・CSS以外にも多くのプログラミング言語に対応している。

イラスト形式で学習したり、穴埋め問題を解いたりしてゲーム感覚で理解を深めることが可能。

App Storeでのレビューでは「簡単すぎる」「やっても意味がない」といった意見も散見されるが、完全初心者の筆者には関係ないだろうと判断。

より高度な学習コースを受講できる有料プランもあるため、まずは無料で試してみて有料コースを選択するか判断するのが良いだろう。

*1:すでに作成したアカウントをJSAnywhereと連携させたい時はアカウント情報を入力して「ログイン」をタップ