2018年4月21日にリリースされたディズニーとライフイズテックという会社から
プログラミング学習教材「テクノロジア魔法学校」が登場しました。
プログラミングが教育に取り入れられたり、
今後の社会でプログラミングが重要視される中で、この教材は注目を集めています。
今回はその「テクノロジア魔法学校」で学べる５つのプログラミング言語の特徴についてまとめてました。
テクノロジア魔法学校で学べる５つのプログラミング言語
学べるプログラミング言語は以下の５つになります。
- JavaScript
- HTML/CSS
- Processing
- Shader
あれ？４つでは？と思う方がいらっしゃるかも。
ですが、２つ目のHTML/CSSについてはHTMLで１つ、CSSで１つとして数えています。一括りにされていますが、細かく言えば別ものですのでそのように扱います。
プログラミングが初めてという人は「なにそれ？なんて読むの？」と思うかもしれませんし、中には「名前は聞いたことあるかも」という方もいるかもしれません。
なのでこれから、この５つの言語とは何か、それぞれの言語の活用方法などそのあたり１つずつ説明していきます。
JavaScript（ジャバ スクリプト）
JavaScriptって何？
JavaScriptとは主にWebサービスやWebサイトを作る際に使われており、InternetExplorerやGoogleChromeのようなブラウザ上で動くことのできるプログラミング言語のひとつです。
またアプリ開発をする際にも使われることがあります。
ブラウザ上で動かすことができるため、動きのあるサイトを作ることができます。
では実際にどんな場面で使われているのでしょうか？
JavaScriptがどんなところで使われているの？
ではJavaScriptが使われているところをピックアップしていきます。動きのあるサイトがどういうことなのか理解していただけると思います。
１．スライダーの作成
スライダーと言われてピンとこない方も多いと思います。
私のブログでも例として取り入れてみました。(赤枠の部分)
例をあげると、携帯会社や自動車メーカーのホームページとかでみたことがあるかと思います。横に移動しながら色んな宣伝の画面に切り替わるホームページの一番最初に目につくものがありますよね。そう、それがスライダーです。
ページの顔といってもいいぐらいとても重要なところかつ目立つところです。
これはJavaScriptでつくることができます。
２．入力内容のチェック
(上図：amazonでお支払い方法にチェックを入れずに進もうとカーソルを合わせた時)
Webサイト内で会員登録をしたり、お問い合わせをする際にメールアドレスをユーザーが入力する欄があるかと思います。その時に、正しく入力が行われているかをチェックする役割もJavaScriptで実装できます。またその入力内容に不備があった場合はエラー画面を出すことも可能です。
３．カウントの表示
ホームページのPV数だったり、「期間限定！何日まで！」のような商品の購入期限でよく見る時刻が１秒１秒表示されるタイプのものだったり、数をカウントする機能の作成もできます。
上記以外にもできることや活用されているところはまだまだたくさんあります。JavaScriptが使えれば質の良いものを作れるようになるのは確かだと思います。
今後に役立つの？
JavaScriptを利用したWebサイトやWebサービスは現代のトレンドであるため、今後も需要はあると思います。将来Web関係の仕事をする場合は役立つことが多いかもしれませんね。プログラミング言語の中でも学んでおいてメジャーですし、学ぶのは良いかもしれません。
HTML/CSS（エイチティーエムエル、シーエスエス）
HTML/CSSって何？
HTMLとCSSはWebサイトを作る上で必須のプログラミング言語になります。
HTMLとCSSはよく上記のように一括りにして書かれてあることが多いですが、別物です。
HTMLはWebサイト上で文書構造の役割があり、まずHTMLがないとサイトは作れません。逆にHTMLが書ければ簡単なサイトは作ることができます。
具体的にはサイト内の文に対してタイトル、見出し、段落、リンク付きの文字など、文章の構造を決定したり、画像を表示させたりすることができます。
CSSはHTMLと合わせてしようする言語で、HTMLの装飾を行うものです。
例えば「行間の幅を広げる」「文字の種類を変える」「背景色をつける」などサイト全体の見た目を調整するため必須の言語です。
つまり、HTMLとCSSの両方をうまく使うことで見た目が綺麗なサイトを作ることができます。なのでHTMLを学ぶと同時にCSSを学ぶことが多く言語も似ているため、HTML/CSSと一括りにされる場合があります。
HTML/CSSがどんなところで使われているの？
先程も説明しましたがWebページにはすべてHTML/CSSが使われています。
Webサイトで右クリックしたら「ページのソースを表示」とあると思います。
そこをクリックするとHTMLやCSSで書かれた文字がバーッと出てきます。それがそのページの構造を表すHTML/CSSになります。今度、どこかのサイトで一度見てみて下さいね。
以下のようなものが出てきます。
（参照元：アメーバブログのTOPページにてソースを表示）
今後に役立つの？
JavaScript同様にインターネットでサイトがある限りHTML/CSSは必須であるため、需要がなくなることはまずないかと思います。Webページを作る上で学んでおくべき言語です。
Processing（プロセシング）
Processingって何？
イメージやアニメーションそしてサウンドのプログラミングをする人のためのプログラミング言語です。主にデザインを中心としたものを作成するときに使われるケースがあります。
Javaと呼ばれる超有名なプログラミング言語があるのですがそれをベースにして開発された言語であり、グラフィックに関するプログラムを組む場合、比較的簡単に作ることができるので、初めてプログラミングをする方にとってはオススメだと思います。
Processingでできること
ビジュアルアートの作成ができます。
画像のようなビジュアルアートを作ることが他の言語と比べて誰でも簡単に作れます。
私も簡単にではありますが画像のようなものを作ってみました。
画像なので分かりずらいですが、この緑色の円がランダムに動き回るビジュアルアートです。
今後に役立つの？
現段階でProcessing言語を利用している仕事や企業は少ないです。将来的に見てもProcessingを仕事にするのは難しいと思います。しかし、プログラミングを学ぶという点では初心者にも使いやすくわかりやすいためオススメできます。テクノロジア魔法学校でこの言語が選ばれたのも納得です。
またProcessingをちょっとだけ試してみたいという方は
Processingのインストール方法と例題から学ぶプログラミング超基礎講座
をご覧いただけたらと思います。
インストールから実行までとても簡単で時間もかからないのでぜひやってみてください！
Shader（シェーダー）
Shaderって何？
私は聞いたことがなかったのでいろいろ調べてみて簡単にとらえるならば
「Shederとは描画方法を記述しているプログラム」
といったところです。
Shaderがどこで使われているの？
ShederはUnityと呼ばれるゲーム開発を行う開発環境があるのですが、その中で用いられています。有名アプリ「ポケモンGo」もこのUnityを使って作られています。もちろんUnity以外でも用途はあり、グラフィックをより細かく、そして高度にしたいときに使用されています。
具体的には物体の描画を行ったり、影をつけたり、表面の質感に変化を入れたりすることができます。
グラフィックに関する効果を与えることができる言語という認識でもいいかもしれません。
今後に役立つの？
Sheder単体で何かができるというわけではありません。テクノロジア魔法学校の学習でもそうですが、ProcessingやJavaScriptと合わせてより高度なグラフィックを目指すために使われています。他ではできないようなグラフィックを作り上げるためには重要な役割を果たしています。
将来仕事で役に立つかと聞かれたらその機会はごく稀で求められる場面は少ないと思います。
まとめ
個人的にスキルを磨いて仕事に役立てようというよりは、学習するということを念頭に「プログラミングをやってみたい！」「プログラミングを勉強したいけど何から手を付けたらいいかわからない」という方にはオススメだと思います。
その中でも「JavaScript」「HTML/CSS」など、今もよく使われている言語を学習していることがプログラミングをやっているという実感を持てますよね。
テクノロジア魔法学校は分かりやすく取り組みやすい言語使いつつも、完成したときは本格的なものを作成できて達成感も大きいと思います。
それに、今後「C言語」や「Java」といったメジャーかつ高度なプログラミング言語を勉強する際にもプログラミングに触れていたほうが飲み込みやすいので、プログラミングにチャレンジしたいという方は受講する価値はあると思います。
以上、テクノロジア魔法学校で学べる５つの言語の特徴についてまとめました。
これからプログラミングが教育に取り入れられたり、プログラミングが重要視されてくる社会になってきていますので、「テクノロジア魔法学校」を注目しておきたいと思います。
気になった方はぜひプログラミングにチャレンジしてみて下さい(^^♪
コメント