paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

企業が効果的なプログラミング研修を実施するための3つの対策

f:id:paiza:20190115154014j:plain
Photo by Ben Welsh
f:id:paiza:20180910132940p:plainこんにちは。倉内です。

新卒や若手社員向けにプログラミング研修を実施しているIT企業は多いと思いますが、「コストのわりに効果的な研修ができていない…」と悩んでいませんか?

私は前職のSIerで新入社員向けのプログラミング研修を受けましたが、同期の中にはすでにプログラミングが得意な人もいれば初めてプログラミングに触れる人もいて、集合して講義を受ける形の研修は、効果が今ひとつだったように思います。

これまでも当ブログで述べてきたとおり、プログラミング学習は理解度や進捗に個人差が出やすく、足並みをそろえて学ぶのが難しい分野です。

そこで今回はどうすれば企業が効率よく、効果的にプログラミング研修を実施できるかについて考えていきたいと思います。

プログラミング研修が成功しない理由

まずは新卒や若手社員向けのプログラミング研修がうまくいかない原因を「受講者側」と「企業側」のそれぞれの視点で洗い出すことにします。

受講者側が遭遇する問題

  • スタート時に開発環境の構築でつまずく

最初にして最大の難関と言ってもいいのが開発環境の構築です。

特に受託開発の企業の場合、新卒・中途に関わらずプログラミング未経験の方を採用し入社後に教育を実施することが多いと思います。入社直後の社員にとって、開発環境を自力で整えるのは非常に難しい可能性があります。

ここで時間がかかって出遅れてしまったり、うっかり環境を壊して先に進めなくなったりすると研修についていけなくなるだけでなくモチベーションの低下を招きます。

  • 一斉に学習を開始しても一瞬で差が出る

プログラミングの研修というと、まず書籍やスライドを使って講義形式で学習し、そのあと各自演習問題を解くことが多いと思います。演習問題に入るとついていけずに手が止まってしまう人、逆に簡単に理解できて退屈になる人の差が顕著に現れます。

学習スタート時は全員プログラミングに触れたことがないとしても、理解度やスピードの差は必ず出ます。これが横並びの学習が難しい理由です。

実体験として、冒頭に上げたプログラミング研修において、4~5人のグループで擬似プロジェクト演習(要件に沿って実装とテストをおこなう)があったのですが、グループ内のプログラミングが得意な人がすべて実装して終わりということがありました…。

企業としては採用した以上は全員がある程度のレベルにまで達してほしいという思いがあるはずなので、このような状況は避けたいですよね。

企業側(研修実施側)が遭遇する問題

  • レベル別に研修をおこなうリソースがない

企業としては費用的にも人的にも、研修にそこまでリソースを割けないことが多いのが現実だと思います。

特に専門業者に委託せず自社で研修を実施する場合、理解度やスピードに個人差があるのは分かっていても、受講者のレベルに合わせた綿密な研修や講師を準備するのは難しく、新卒者向け、入社2年目向け…といったくくりで一斉研修にせざるを得ません。

  • 限られた時間では個人の学習進度に合わせることが難しい

研修時間には限りがあり、講義時間と演習時間を区切っていることが多いため、個人の進捗に合わせて融通をきかせることは難しいですよね。課題が最後まで解けていない人がいても先に進むことがほとんどだと思います。

また、会社のPCにローカル開発環境を作っていると、受講者に自宅での復習や分からなかった問題にもう一度チャレンジするよう促すこともできません。

  • IT技術や言語のトレンドは常に変化する

私の代は新卒のプログラミング研修はJavaでしたが、以前はC言語だったと聞きました。

このように研修で扱う言語や技術が変わるとカリキュラムの見直しが発生しますし、言語が変わらなくてもバージョンアップなどで利用環境を再構築する必要が出てきます。

効果的なプログラミング研修のための3つの対策

(1)オンライン実行環境を採用する

オンライン実行環境(Webブラウザ上でプログラミングができる環境のことを「オンライン実行環境」と言います。paizaが提供しているラーニングサービスやスキルチェックなどはすべてオンライン実行環境を利用しています)は、Webブラウザとインターネット環境があれば利用できます。

研修を実施する企業も受講者も環境構築に時間を割くことなく、すぐにプログラミング研修をスタートすることができるのが特徴です。

最近は企業向けにオンライン実行環境を提供するサービスも多く登場しています。

(2)受講者のニーズに合わせたカリキュラムを用意する

新卒や若手社員向けの研修では全員が一律で学ぶ内容もあると思いますが、既に大学や趣味でプログラミング経験がある人は無駄な時間を過ごす可能性があります

前述したとおりコストがかかるため費用対効果を見極めてからという前提ではありますが、経験者に時間を有効活用してもらうためにも何かしらの応用的な学習内容を用意できることが理想です。

また、プログラミング未経験者には繰り返し基本を復習できたり、練習問題を解いたりといった入門コンテンツを提供して基礎の定着を図りましょう。

(3)受講者の学習状況を管理する

決められたカリキュラムを最後まで進めれば完了…と思っていませんか?一方的に教えて終わりではなく、受講者がどのくらい学習を進めているかを管理することは研修の効果を測る上でも重要になってきます。

個人の学習状況によって研修内でどのようにフォローすればよいか、講義でどのあたりを丁寧に解説したほうがいいかなどの方針も立てる事ができます。

実践重視の研修を実現する「paizaラーニング for TEAM

このたびpaizaは、前述したような効果的でより実践に近い研修を実現するため、企業のプログラミング研修などに最適な法人向けサービス「paizaラーニング for TEAM」をリリースいたしました!

paizaラーニング for TEAM」は新卒、入社1~3年目の若手エンジニア、そしてプログラミング未経験の非エンジニア職の方を対象としています。

Webブラウザとインターネット環境があればすぐにご利用いただけます。下図は学習画面イメージです。

企業の研修などで使っていただくことを想定しているため、転職サービスとの関連付けは一切ありません。求人検索ができないのはもちろん、スキルチェック機能もないためスカウトが届くこともありません。

paizaラーニング for TEAM」4つのメリット

すぐに利用開始できる

なんといっても導入後すぐに環境構築不要で学習を開始できるところがメリットです。

豊富な学習コンテンツをご用意

学習コンテンツとして、すでに900動画、1200の演習問題をご用意しています。また、月に約25動画を新規追加しています。

プログラミング入門講座は現在、C言語、Java、C#、JavaScript、PHP、Python、Rubyの7言語の講座があります。学習できる全講座はこちらをご覧ください。

ユーザーの理解度に合わせた学習機会の提供

上記のとおり豊富な学習コンテンツをご用意。さらに動画学習のため、各受講者が自分のペースで学習を進めることができます。学習動画は繰り返し何度でも見ることができますし、自分のペースで演習問題を解けるので、理解できないまま強制的に先に進んでしまうことはありません。また、プログラミングが得意な人が初歩的な学習内容の研修で待たされ、時間を持て余すこともありません。

また、プログラミング未経験または初学者の人は言語の入門講座、経験者はWebアプリケーション作成講座…といったように受講者のレベルに合わせて勉強する範囲を変えることも簡単です

これにより従来の一斉に同じカリキュラムを実施するプログラミング研修では難しかった、ユーザーの理解度に合わせた学習機会を提供することができます。

学習の進捗状況は、ユーザーごとに確認していただくことが可能です。

研修にかかるコストを削減

Webブラウザ上で受講できるため、各地から社員を集合させて研修を実施する必要はありません。

また、不明点があったら繰り返し動画を見る、練習問題を解く、入門編が完了したら応用講座に取り組んでみる…など受講者が各自で進めることができるため、講師役を斡旋して研修のフォローをするコストも抑えられます。


「ちょっと気になるな…」と思った方は、まずは14日間の無料お試し体験をご利用ください!ご相談はこちらのページの「お問い合わせ」ボタンからお願いします。

まとめ

企業が新卒・若手社員向けのプログラミング研修を効率的におこなうことの難しさと解決策についてお伝えしてきました。

これまでの企業研修では受講者のレベルや理解度を考慮したカリキュラムを整えることが難しく、かかるコストに対して十分な効果が出にくいという問題がありました。

今回ご紹介した、法人向けのプログラミング学習サービス「paizaラーニング for TEAM」の導入はその問題を解決する一つの手段となると思います。

paizaラーニング for TEAM」は、Webブラウザ上でプログラミング学習ができる「paizaラーニング」で培ったノウハウをもとに、これからもより実践的カリキュラムをご提供していきます。





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック

プログラミングとは何か?初心者向けに概要や学習法を徹底解説

f:id:paiza:20190116180220j:plain
Photo by S.C. Air National Guard

ここ数年「プログラミング」への注目が非常に高まっています

2020年には義務教育で必修化されることが決まっており、大人だけでなく子ども向けのコンテンツも急増。老若男女問わず、この言葉を聞く機会が飛躍的に増えているかと思います。

しかし、多くの人にとってプログラミングとは「なんとなく分かるけど、詳しくは知らない」ものだと思います。「コンピュータを使って何かする」程度の認識の方も多いのではないでしょうか。

そこでこの記事では、プログラミングとは何かを基本から知りたい方のために、概要やできること、さらに学習法などについてご紹介します

 

 

■ 「プログラミング」とは何か

f:id:paiza:20190116180404j:plain
Photo by Elliott Cable

・そもそもプログラミングとは何をすること?

プログラミングとは一言で言うと「プログラムを作ること」です。

といっても、それだけではピンときませんよね。

ここで言う「プログラム」とは、行事の予定表という意味ではなく、「コンピュータにさせる指示」のこと。プログラミングとはその指示を作る行為を表しています。なお、コンピュータは人間の言葉を理解できませんので、コンピュータ用の言葉で指示を与えます。

コンピュータは指示されたとおりのことしか実行できません。そのため、適切に動作をさせるためには、プログラミングで「最初にこの処理をして、次にこれ、さらに次はこれ…」というようにすべての動きを決めてあげる必要があります。

こう書くと、プログラミングがとても面倒な作業に感じるかもしれませんが、一度プログラムを作ってしまえば、あとはコンピュータに任せておくだけで同じ動作をしてくれるようになります。毎日人の手でやっていた単純作業を自動化する、なんてことができるわけです。

プログラミングを身につけることで、自分ひとりではさばききれなかった仕事をこなすことができるようになるでしょう。

 

・世の中にはプログラムがあふれている

今やプログラミングによって作られたプログラムは生活のいたるところにあふれています

PCやスマートフォン、Webサービスなどはもちろん、外を歩いていても、ATMやエレベーター、自動ドアなど、さまざまなものがプログラムによって動いています。家の中でもテレビや掃除機、洗濯機など、ほぼすべての家電がプログラムなしには動きません。

これらもすべて、コンピュータに与えた指示のおかげで動いているのです。

今後プログラムがない世界で生きていくことは現実的に不可能といえるでしょう。

 

・プログラミング言語について

コンピュータに指示を与えるための言葉を「プログラミング言語」といいます。人間の言語と同じようにプログラミング言語にもいくつか種類があり、代表的なものをいくつかあげると

  • C言語
  • Java
  • JavaScript
  • PHP
  • Ruby
  • Python

…などなど。他にも数多くの言語があります。

いっぱいあるからといってすべての言語を学ぶ必要はありません。また、それぞれの言語には共通点も多いので、1つをしっかり覚えていれば他の言語もある程度理解できるようになるでしょう。このあたりは人間用の言語とよく似ていますね。

各言語には、それぞれ特徴があり「プログラムを書きやすい/書きにくい」であったり、「この作業をさせるのに向いている/向いていない」だったりもあるので、学習したい方は自分の目的に合ったものを選ぶといいでしょう

ちなみに、paizaのユーザーに「好きなプログラミング言語」のアンケートを実施したことがあります。何から勉強すればいいか迷っている方はこちらも参考にどうぞ。
paiza.hatenablog.com

 

■ これからプログラミングを学ぶべきか

f:id:paiza:20190116181726j:plain
Photo by JD Lasica

義務教育で必修化となるなど、身近になりつつあるプログラミング。子どもの習いごととしての人気も上がってきたほか、大人でも、若者からお子さんがいる世代までを中心として、これから始めたいという人が増えています。

はたして、プログラミングは本当に勉強すべきなのでしょうか?

 
結論を言うと、興味があるのであれば学んでおいて損はないでしょう。

 

・プログラミングを学ぶメリット

特に若い人は、今後仕事でITが絡まない分野は非常に少なくなっていきます。そのため、たとえエンジニアやプログラマといった仕事につかないとしても「プログラムがなぜ動くのか」「どういう仕組みで動くのか」という考え方そのものを知っておくほうが有利に働く場面が増えそうです。

また、今や高校生の「将来なりたい職業」でもあげられる(※)ほどに「エンジニア」は人気の仕事になりました。エンジニアをもし目指しているのであれば、プログラミングの勉強は必須です。

エンジニアは日本だけでなく世界中で需要がある仕事であり、技術力を高めれば、世界で活躍する人材を目指すこともできます。

さらに、スポーツや芸能などの分野と比べて、エンジニアは遅い時期から勉強を始めて成功した例も多く、努力次第で挽回できる職業でもありますので、もしエンジニアを目指す気があるのなら、ぜひプログラミングをやってみることをおすすめします。

(※:https://www.sonylife.co.jp/company/news/29/nr_170425.html#sec6 より)

 

■ プログラミングを学びたい人はどうしたらいい?

f:id:paiza:20190116181843j:plain
Photo by Mads Bødker

では、プログラミングを勉強するためには何を用意すればいいのでしょうか?

 

・勉強するために用意するもの

まずはPCを用意しましょう。少しずつスマートフォンやタブレットを使ってプログラミングやその勉強ができるようになってきてはいるものの、まだまだプログラミングはPCでおこなうのが主流です。OSはWindowsでもMacでも構いません。自分の好きなものを使えばいいでしょう。すでにPCを持っているのであればそれをそのまま使えばOKです。

あとはそのPCがインターネットにつながっていれば、勉強はすぐに始められます。従来、プログラミングをするためにはPC内に専用の環境を作る必要がありましたが、最近はネット環境だけでプログラミングができるサービスが増えています。格段に手軽にプログラミングが始められるので、そちらを使うといいでしょう。もちろん、最初から作りたいものが決まっているのであれば、それに合った環境をしっかり作ってから勉強しても構いません。

オンラインの実行環境について詳しく知りたい人は、こちらの記事をどうぞ。
paiza.hatenablog.com

 

・どの学習法を使うべきか

プログラミングを学ぶ代表的な方法は4つあります。自分のプログラミングをする目的などによって好きなものを選ぶといいでしょう。

1つは本を使う方法です。昔からある方法ですが、だからこそ教材となる本の数がとても多く「これを知りたい」というニーズに幅広く対応できるのが強みです。コストも(技術書は比較的金額が高いものが多いとはいえ)トータルで考えると安価といえます。以前は何冊も買うとかさばって大変でしたが、電子書籍の出現によりそれも解消。ただ、独学なのでモチベーションの維持が難しい部分はあります。

2つめはスクールへ行く方法です。最近はプログラミング教室の数も非常に増えました。一斉授業のもの、マンツーマン形式のものなどさまざまありますが、なんといっても先生に直接質問して疑問を解決できるのがスクールの最大の強みです。とにかく短期間で実力を伸ばしたい人には適しています。一方、ネックはコストの高さ。手厚いフォローをしてくれる分、どうしても相応のコストはかかってしまいます。

3つめは勉強会に参加する方法です。初心者向けの勉強会も増えているので、それを探して参加するのもいいでしょう。スクールより参加のコストがかからず、かつ参加者に質問できるメリットも享受できますが、常に自分の受けたい勉強会があるかは運に左右されます。

4つめは最近広まりつつあるオンライン学習サービスを使う方法です。動画やスライドを使って勉強します。何よりプログラミングを始めるまでのハードルが低いのが特徴です。多くの場合はそのサイト内でプログラミングを実行できるようになっているので、Webブラウザでサイトを訪れるだけで勉強が始められます。自習スタイルなのでモチベーションの維持が必要ですが、本と比べるとゲーム要素や続けるためのギミックが多いため、続けるのは比較的楽でしょう。paizaでも初心者が楽しんで学べるプログラミング学習サービス「paizaラーニング」を提供しておりますのでぜひ一度のぞいてみてください。

勉強法については、以下の記事でも詳しく解説しています。
paiza.hatenablog.com

 

・プログラミングの勉強は難しいと感じた人へ

「プログラミングの勉強を過去にしてみたけれど、難しくて挫折してしまった」という人はいませんか?

実はほとんどの場合、挫折したパターンは決まっていて、しかも今はその問題を解決できる方法が数多くあります。以下の記事に、スムーズに学習を進めるヒントを掲載しているので、ぜひ読んでみてください。
paiza.hatenablog.com

 

■ まとめ

ここまで、プログラミングの概要やできること、さらに初心者向けの学習アドバイスなどを中心にお伝えしてきました。

文中でも述べましたが、今後プログラミングの需要は高まるのが確実であり、学習しておくに越したことはありません。また、将来エンジニアを目指す人にとっては、プログラミングは必須です。

便利な学習手段が生まれているなど、学ぶ環境も昔と比べてはるかに整備されてきたので、ぜひ興味がある人はプログラミングの第一歩を踏み出してみてはどうでしょうか。





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック

JavaScriptでソースコードやコマンド操作をアニメーション動画に変換できるライブラリ「Glorious Demo」を使ってみた!

f:id:paiza:20190116130018j:plain
どうも、まさとらん(@0310lan)です!

今回は、数行のJavaScriptを記述するだけでソースコードやターミナルからのコマンド操作をアニメーション動画に変換できるライブラリをご紹介します!

非常にシンプルな記述で誰でもすぐに試すことが可能なうえ、HTMLファイル1つだけあれば実行できるのでWebサイトやブログなどにも公開できるスグレモノです。

なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。

Glorious Demo

f:id:paiza:20190116130210g:plain

■「Glorious Demo」の使い方

それでは、最初に「Glorious Demo」を使えるように導入準備をしていきましょう!

方法は2種類ありまして、1つ目はnpmからインストールして使う方法です。

npm install @glorious/demo --save


2つ目は、CDNを経由してcss / jsファイルをHTMLに直接記述して使う方法です。

https://unpkg.com/@glorious/demo/dist/gdemo.min.css

https://unpkg.com/@glorious/demo/dist/gdemo.min.js

どちらの方法でも同じことができるので、自分の環境に合わせて導入してみてください。(本記事では2つ目のCDNを経由した方法で行っています)


また、HTML内に次のような記述をしておきましょう!

<textarea id="mycode" rows="6" cols="30"></textarea><br>
<button id="btn">実行</button>

<div id="container"></div>


「textareaタグ」にコードを貼り付けて、実行ボタンをクリックするとdivタグ内にアニメーションが表示されるようにしたいと思います!

f:id:paiza:20190116130808j:plain


ここまでのソースコードを以下のリンクから閲覧できるので、ぜひ参考にしてみてください!

Glorious Demo基本サンプル | GitHub

■コードをアニメーションに変換してみよう!

それでは、いよいよ「Glorious Demo」を使ってコードをアニメーションに変換してみましょう!

最初にやることは、以下のようにインスタンスを作成することです。

const gdemo = new GDemo('#container');

「GDemo()」の引数に指定しているのは、先ほどHTMLに記述した「divタグ」のid属性値になります。


次に、ボタンをクリックしたらアニメーションが表示されるようにしたいので、クリックイベント処理を次のように記述します。

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {

        //ここに処理を記述する

})

このイベント処理内に、Glorious Demoを使ったコードを記述していくわけですね。


処理の流れとしては、テキストエリアに貼り付けられたコードを取得してアニメーションに変換することになります。

そこで、最小限の記述で構成すると以下のようになります!

btn.addEventListener('click', () => {
       const mycode = document.getElementById('mycode');
       
        // Glorious Demoによるアニメーション処理
       gdemo
         .openApp('editor')
         .write(mycode.value)
         .end();

})

Glorious Demoの処理に注目してください!

「openApp()」メソッドの引数に「editor」を指定することで、背景をエディタ画面にできます。

「write()」メソッドの引数にコードを指定することで、エディタ上にコードが自動的にアニメーション表示されるのです。

「end()」メソッドを実行することでアニメーションが終了します。


このプログラムを実行すると以下のようになります!

f:id:paiza:20190116131116g:plain

ちなみに、背景のエディタはサイズの調整やファイル名の表示などをオプションで自由に設定することも可能です!

gdemo
  .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})

このように記述すると、エディタの高さが350pxでタイトルバーのファイル名が「demo.js」に変わります。


ここまでのソースコードは以下のURLから閲覧できます。

Glorious Demoの基本サンプルコード | GitHub

■「エディタ」と「ターミナル」を切り替えてみよう!

「Glorious Demo」は、通常のエディタだけでなくターミナルからのコマンド操作もアニメーションにすることができます。

背景をエディタからターミナルに変えるには、「openApp()」メソッドの引数を「terminal」に変えるだけです。


ただし、先ほどと違う点としてコードをアニメーションに変換するには「command()」メソッドを利用します。

gdemo
   .openApp('terminal')
   .command(mycode.value, {onCompleteDelay: 1000})
   .respond('Hello Glorious')
   .end();

「command()」のオプションとして「onCompleteDelay」プロパティに待ち時間を設定することで、レスポンスが出力されるまでの時間を調整できます。

レスポンスの出力は「respond()」メソッドに文字列を指定すればOKです!


実行すると以下のように表示されます。

f:id:paiza:20190116131341g:plain

さらに、「エディタ」と「ターミナル」はシームレスに連結してアニメーションにすることも可能です!

gdemo
   .openApp('editor')
   .write(mycode.value, {onCompleteDelay: 1000})
   .openApp('terminal', {promptString: '$'})
   .command('node demo.js', {onCompleteDelay: 1500})
   .respond('Hello Glorious')
   .end();

このように「openApp()」メソッドを続けて実行することで、エディタからターミナルへ簡単に切り替えることが可能です!


実行すると以下のようになります!

f:id:paiza:20190116131437g:plain


ここまでのソースコードは以下のURLから閲覧できます。

エディタとターミナルの切り替えサンプルコード | GitHub

■シンタックスハイライトを使ってみよう!

「Glorious Demo」でアニメーションに変換されたソースコードは、シンタックスハイライトによるカラーリングを行うことも可能です。

方法としてはいくつかあるのですが、「Prism」という優秀なハイライト機能を組み込めるJavaScriptライブラリがあるのでこれを組み込んでみましょう!


使い方は簡単で以下のURLを使ってcss / jsファイルをHTMLに組み込みます。

https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css

https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js


そして、ソースコードを簡単にハイライト表示できる関数を作っておきましょう。

function highlight(value) {

   return Prism.highlight(
     value,
     Prism.languages.javascript,
     'javascript'
   );

}

「Prism.highlight()」の引数にハイライト表示するコードと、何の言語を使うかを設定するだけです。


このhighlight()関数を使ってアニメーションにするには次のように記述します!

gdemo
 .openApp('editor')
 .write(highlight(mycode.value), {onCompleteDelay: 500})
 .end();

このように、「write()」メソッド内でアニメーションにするソースコードをhighlight()関数の引数に指定するわけです。


実行すると以下のように表示されます!

f:id:paiza:20190116131757g:plain

Prismはさまざまな言語のシンタックスハイライトに対応しているので、JavaScriptに限らず他の言語で書かれたコードも綺麗に表示できるので便利です。

ぜひ、みなさんもソースコードをアニメーションに変換して学習資料やプレゼンなどで活用してみてください!


ここまでのソースコードは以下のリンクから閲覧できます。

シンタックスハイライトのサンプルコード | GitHub

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、ソースコードをアニメーション動画に変換することができるJavaScriptライブラリをご紹介してみました!

非常にシンプルな記述で誰でも簡単に動くソースコードとして表示することができるので、教材に活用したりSNSやブログなどで他の人に見せるような使い方ができるので便利です。

ソースコードの新しい活用方法として、ぜひみなさんも試してみてはいかがでしょうか。


<参考リンク>



 

paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud