TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript ポップアップ表示機能の実装に便利なJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

ポップアップ表示機能の実装に便利なJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】

初心者向けにポップアップ表示機能の実装に便利なJavaScriptのライブラリについて現役エンジニアが解説しています。ポップアップとは画面の前面に浮き上がるように表示される部品のことです。モーダルウィンドウとの違いやJavaScriptのライブラリサイトからsweetalertの使い方を解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

ポップアップ表示機能の実装に便利なJavaScriptのライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

ポップアップ表示機能の実装に便利なJavaScriptのライブラリについて詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

ポップアップとは

画面の前面に浮き上がるように表示される部品のことです。下記の画像のようなalratダイアログもポップアップとして扱われます。

ポップアップが浮き上がるように表示されることで、画面には記載のない詳細な情報やエラーのようなユーザーに見逃してほしくない情報を、ユーザーに提供しやすくなります。

[PR] コーディングで副業する方法とは

ポップアップとモーダルウィンドウの違い

どちらも画面の前面に浮き上がるように表示されます。ポップアップは、浮き上がった画面以外の部品の操作ができます。モーダルウィンドウは、浮き上がった画面に応答するまでは元の画面を操作できなくします。

使い分けとしては、浮き上がった画面の操作が必須ならばモーダルウィンドウを使い、表示だけでもよければポップアップウィンドウを使います。

ポップアップ表示機能の実装に便利なJavaScriptのライブラリの紹介

ライブラリを探すときは、SearchLibsのサイトが便利です。ここで「popup」と入力するとポップアップのライブラリがたくさん表示されます。今回は、一番スターの多くついているsweetalertというライブラリを使う方法を紹介します。

実際に使ってみよう

まずはSweetAlertのライブラリを読み込みます。今回はCDNというネットワーク上から直接読み込む方法を使います。記述は下記のようになります。ダウンロードして読み込む場合は、srcの値をファイルを置いた場所に変更してください。

<script src= "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

これでSweetAlertのライブラリを使えるようになりました。

ライブラリの使い方はドキュメントを参照することで確認できます。
SweetAlertのドキュメントはこちら

ここでも、いくつかポップアップ表示をしてみます。一番シンプルな記述でポップアップ表示する記述は下記になります。

swal('このメッセージが表示されます');

ここからカスタマイズする場合は、{（波カッコ）で項目を追加していきます。下記のような感じです。追加する項目名や値はドキュメントで確認します。

swal({
  text: "メッセージです",
  icon: "success",
  button: "ボタンの名前",
  closeOnClickOutside: false  //false:モーダルにする
});

closeOnClickOutsideをfalseに指定しているのでモーダル表示となり、ポップアップ以外の場所を操作できなくなっています。

まとめ

ポップアップを扱うライブラリを紹介しました。ライブラリを探してドキュメントを読むことができれば、多くの処理が同じ流れで実装できます。いろいろなライブラリを活用してみてください。

筆者プロフィール

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptのscriptタグの書き方を現役エンジニアが解説【初心者向け】

JavaScriptのscriptタグの書き方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門...
JavaScript

JavaScriptの配列(array)に利用するpopメソッドについて現役エンジニアが解説【初心者向け】

JavaScriptの配列(array)に利用するpopメソッドについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptにおけるfor文とcontinue文について現役エンジニアが解説【初心者向け】

JavaScriptにおけるfor文とcontinue文について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
JavaScript

JavaScriptでjQueryのappendメソッドを使わずにHTML要素を追加する方法を現役エンジニアが

JavaScriptでjQueryのappendメソッドを使わずにHTML要素を追加する方法について、TechAcademyのメンター（現役エンジニア）が実際の...
JavaScript

JavaScriptで配列を空にする方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列を空にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 Jav...
JavaScript

JavaScriptのupdateメソッドの書き方を現役エンジニアが解説【初心者向け】

JavaScriptのupdateメソッドの書き方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向け...
JavaScript

あわせてよく読まれている記事

人気の子ども向けロボットプログラミング教材10選

この記事では、人気の子ども向けロボットプログラミング教材10選を紹介しています。 ロボットプログラミングは、3歳から簡単に始められるものから大人も楽しめる本格的なものまで種類が豊富で、プログラミング初心者の方にもおすすめのプログラミング教材です。 子どものうちからプログラミングをはじめることには多くのメリットがあり、小学校、中学校、高校と段階的に必修化されるプログラミング教育への導入としても役立つため、習い事としてもおすすめです。 子どもがロボットなどの動くおもちゃやプログラミングに興味があるようでしたら、まずはロボットプログラミング教材からはじめてみてはいかがでしょうか。 目次 ロボットプログラミング教材とは 【幼児におすすめ】ロボットプログラミング教材 3選 【小学生におすすめ】ロボットプログラミング教材 7選 これもおすすめ！人気のプログラミング教材 もっと学びを深めたい子どもには ロボット教材で楽しくプログラミングを学習しよう！ ロボットプログラミング教材とは ロボットプログラミング教材とは、プログラムによって実際にロボットなどを操作して動かすことができる教材です。 自分のプログラムした内容がすぐに確認できるので、子どもが興味を持ちやすく、楽しみながら学習することができるのが特徴であり、ロボットプログラミング教材のメリットです。 知育おもちゃとしてもおすすめの文字入力不要で幼児でも操作しやすいものから、テキスト言語でプログラムする本格的なロボットまで種類が豊富です。 それでは、「幼児向け」と「小学生向け」に分けてそれぞれにおすすめのロボットプログラミング教材を紹介します！ [PR] コーディングで副業する方法とは【幼児におすすめ】ロボットプログラミング教材 3選 それではまず、幼児が遊びながら学べるロボットプログラミング教材を3つ紹介します。 幼児向けのものはWi-Fiなどのネットワークやパソコン、タブレット等が必要なく、簡単にはじめられるものが多く揃います。 1）コード・A ・ピラー ツイスト ツールタイプ：タンジブル, ロボット 対象：3歳〜 価格：5,500 円 文字入力不要 コード・A・ピラー ツイストは、幼児（3歳～6歳）の子ども向けの芋虫型プログラミングロボットです。 マテル社のベビー・プリスクールのおもちゃブランド、「フィッシャープライス」によって開発されました。 プログラミングの際に文字の入力を必要としないので、幼児の子どもでも簡単に、かつ、楽しみながらプログラミングを学習することができます！ コード・A・ピラーは乾電池式のロボットで、芋虫のように自走します。 芋虫の胴体部分が関節ごとに外れるようになっており、胴体部分のパーツのそれぞれに「前進」、「右折」、「左折」などの命令を持たせることができます。 これら胴体部分パーツをつなげ変えることでコード・A・ピラーの動きを変化させることができます。 さらに、子どもが考えたプログラムによって胴体部分のパーツを光らせたり、音を鳴らしたり、楽しく遊びながらプログラミングを学べる知育玩具となっています。 例えば、コード・A・ピラーが障害物を避けて走るにはどのようにしたらよいか、付属のゴールプレートを置いた場所に向うにはどうしたらよいかなど、手先を使いながら組み替えたり、走らせてみたり、子ども自身が考えて動かします。 この体験はプログラミング的思考を育むことにつながるでしょう。 2）Cubetto（キュベット） ツールタイプ：タンジブル, ロボット 対象：3歳〜 価格：35,750円 文字入力不要 Cubetto（キュベット）は、手を使って遊ぶ木のおもちゃ型のコーディングキットです。 キュベットと一緒に冒険することで、子どもたちはプログラミングの基礎を身につけることができます。 この教材の特徴は、テキスト言語などの子どもには複雑な手段を一切使わずに、LEGOのようなブロックを組み合わせることでロボットを動かせる、という点です。 各ブロックに命令がそれぞれ1つずつ組み込まれており、それらを組み合わせボードにはめることでキュベットに指示を出します。青い実行ボタンを押すと作成したプログラム通りにキュベットが動き出します。 魅力的なワールドマップとストーリーブックによって子どもの学習意欲が高まり、楽しく遊びながら学習ができます。 これからを生きる現代の子どもにとって重要なスキルの一つであるプログラミングを、子どもたちが分かりやすい形で身につけることができます。 3）PETS（ペッツ） ツールタイプ：タンジブル, ロボット 対象：3歳後半〜 価格：22,000円 文字入力不要 PETS（ペッツ）は、方向ブロックをロボットの背中に挿し込んで、子どもが作成した命令通りに動くプログラミング学習ロボットです。 マス目状の特性シートの上を、ときには障害物をよけながらスタートからゴールへと動かしていきます。 PETSでは、パソコンなどに難しいコードを打ち込む学習方法ではなく、実際にロボットに触れて動かし、楽しみながらプログラミング的思考を学ぶことができます。 また、ロボット自体が簡単な作りとなっているため、単三電池4本があればすぐに学習を開始することができます。 保護者や教育者など教える側にも負担なく、大人も一緒になってプログラミング体験ができるロボット教材です。 【小学生におすすめ】ロボットプログラミング教材 7選 次に、小学生はもちろん中高生から大人まで、楽しみながらプログラミングを学習できるロボット教材を7つ紹介します。 1）embot（エムボット） ツールタイプ：ビジュアル言語, ロボット 対象：6歳〜 　 価格：6,600 円 文字入力不要 タブレットでの操作を推奨 embot（エムボット）はNTTドコモが開発したプログラミング教育用の教材ロボットです。 専用のアプリをダウンロードして、そのアプリからプログラミングを行い、embotを動かすことができます。 ビジュアル言語を使っての直感的なプログラミングですので、子どもたちだけでなく教える側である先生や親御さんにとってもプログラミング学習の導入がしやすい教材です。 教材の外装はダンボールで簡単に加工しやすく、外装ダンボール，embotコア，ブザー，LEDライト，サーボモーターを自由に組み合わせて、いろいろな活用を考えることもできます。 直感的なプログラミングで論理的思考力を養うことができ、子どもたちの自由な発想、想像力を高めることも期待できます。 公式サイトではembotを活用した様々な指導案や動画が公開されていますので、ぜひそちらも参考になさってください。 2）kurikit（クリキット） ツールタイプ：ビジュアル言語 , テキスト言語 , ロボット 対象：6歳〜 価格：6,600 円 文字入力対応可 PCやタブレットでの操作を推奨 kurikit（クリキット）の代表的なプロダクトは「ココロキット」と呼ばれるロボットプログラミング教材です。 こちらは、同社のヒット商品である「ユカイな生きものロボットキット」の拡張キットとして販売されています。 子どもが工作のように自分で組み立てて作ったロボットを、ビジュアルプログラミングやテキスト言語のJavaScriptによって記述したプログラムで動かすことができます。 シンプルな構成で専門的な知識がなくても簡単に操作することができ、プログラミングでロボットを動かしながら楽しく学ぶことができます。 kurikitのコースには、初級と上級があり、初級のコースでは直感的にプログラミングができる「ビジュアルプログラミング」を、上級コースではプロのエンジニアも使っている「テキストプログラミング」に挑戦できます。 3）toio（トイオ） ツールタイプ：タンジブル, ビジュアル言語 , テキスト言語 , ロボット 対象：6歳〜大人 価格：16,980円＋税（本体セット） 文字入力対応可 PCやタブレットでの操作を推奨 toio（トイオ）には、パソコン不要でカードを使ってゲーム感覚で楽しめるものから、本格的なテキスト言語で自由にプログラミングを行えるものまで、幅広くプログラミング学習コンテンツが用意されています。 プログラミングの基本を遊びながら身につけることができ、ステップアップしていく中で枠に囚われない動作を自由に作ることができます。 toioでは、初級コースとして「GoGo ロボットプログラミング ～ロジーボのひみつ～」というコースがあります。 これは、プログラミングの基本要素「順次、分岐、反復」が楽しみながら身につく冒険絵本を作成していくコースとなっています。子どものプログラミングによって、絵本の上をかわいいロボットが動きまわります。 また、初中級コースとして、ビジュアルプログラミングアプリ「toio Do」が用意されています。 こちらはパソコンやタブレットを使ったビジュアルプログラミングにステップアップします。しかし、いきなりプログラムを作成しなくても、サンプルプログラムを使用してロボットの動き試すことから始められます。ブロックを組み換えて改造することでオリジナル作品を作ることも可能です。 さらに、上級コースとして、toioコアキューブというものが用意されています。 キューブを使い、JavaScriptなどのテキスト言語でより実践的なプログラミングが体験できます。 4）LEGO®BOOST（レゴブースト） ツールタイプ：ビジュアル言語 , ロボット 対象：7～12歳 価格：19,660円 文字入力不要 Wi-Fiなどのネットワーク、パソコン・タブレット不要 LEGO®BOOST （レゴブースト）では、LEGOで作ったロボットをプログラミングによって動くおもちゃに変身させながら、楽しくプログラミングを学ぶことができます。 障害物のあるコースを移動させたり、シューターで的に命中させたりなど、子どもが興味を持ちやすい内容になっています。 LEGOが行う動作には、ジョークやダンス、ビートボックスなど面白い機能も豊富に用意されていますので、お友達と一緒にゲームをしているようにプログラミングを学べます。 アプリには60種類以上のアクティビティがあり、プログラミングのブロックを集めながら基本的なプログラミングのスキルを身に付けることができます。 さらにアプリのクリエイティブキャンバスという機能でオリジナル作品を組み立てることもできますので、さらに発展的なプログラミングを作成することも可能です。 5）mBot（エムボット） ツールタイプ：ビジュアル言語 , テキスト言語 , ロボット 対象：8歳〜 価格：15,400円 文字入力対応可 PCやタブレットでの操作を推奨 Makeblock Co., Ltdが開発したmBot（エムボット）は、光センサーや超音波センサー、ブロックやタイヤなどがセットになっています。 いろいろな機能が入っているためプログラミング技術だけでなく、センサーの仕組みやロボットの構造なども学ぶことができます。 これらのセンサーやロボットをmBlockで作ったプログラムで動かすことで、試行錯誤してロボットの動きを考える経験が生まれます。 さらに、mBlockで作成したプログラムを、現在多くのシステムエンジニアが活用している非常に汎用的なテキスト言語、Pythonや、Arduino言語のプログラミングコードに切り替えることもでき、より実用的な製品であるといえます。 6）KOOV®（クーブ） ツールタイプ：ビジュアル言語 , ロボット 対象：8歳以上 価格：36,880 円＋税 文字入力不要 PCやタブレットでの操作を推奨 KOOV®（クーブ）とは、ブロックで自由な「かたち」を作って、それらを「プログラミング」することでさまざまな「動き」を与えながら学ぶロボット・プログラミング学習キットです。 ロボット制作の体験によって、子どもたちの探究心や創造力、未来を切り拓く思考力を育むことができます。 下記の3つのステップを子どもの理解や成長に合わせて選択することができますので、プログラミング初心者の子どもでも安心して挑戦できます。 STEP 1「ロボットレシピ」を真似る お手本となる「ロボットレシピ」を見ながら、いろいろな作品を制作して、ロボットとして動かしてみるところからプログラミング学習を始めます。 STEP 2「学習コース」で体系的に学ぶ 流れに沿ってロボットを作るためプログラミングを徐々にマスターでき、確認クイズで学習を振り返りながら、少しずつロボットプログラミングを理解することができます。基本的な組み立てとアプリの操作を学習できるコースも用意されています。 STEP 3「自由制作」で子ども自ら発明する ブロックの組み立てと、そのプログラミングの流れを一通りマスターした後で「自由制作」を行うことで、オリジナル作品づくりに挑戦することができます。 作成したロボットプログラミングの写真・動画を共有して世界中の人々に評価してもらうこともでき、新たなロボット制作のアイデアを生み出すことができます。 7）ArtecRobo2.0（アーテックロボ2.0） ツールタイプ：テキスト言語, ビジュアル言語, ロボット 対象：8歳以上 価格：27,000円 文字入力対応可 PCやタブレットでの操作を推奨 ArtecRobo2.0（アーテックロボ2.0）は、日本の学校教材メーカーである株式会社アーテックが開発したロボットプログラミング学習教材セットです。 縦、横、斜めに自由につながるブロック、モーターやセンサーなどのロボットパーツ、プログラミングソフトを使用して、ロボットの仕組みとプログラミング技術を学ぶことができます。 パーツ説明も親切で、ブロックの組み立ては工具やネジ、接着剤などを使わずに行うことができ、ロボットパーツを接続する際に付属コードの配線が見えるので、子どもがどう配線したらどう動くのかを実感しやすい構成となっています。 プログラムを作るソフトは、パソコン用では「Studuino」、iPad用では「Tickle for iPad」があります。 どちらも画面上で命令をブロックのようにつなげて並べるビジュアル言語方式なので、低学年の子どもでも無理なく学習を開始できます。 さらに、児童用テキストや教員用指導書が付属しているので、子どもがテキストを参考に予習・復習をすることができます（WEBでも公開）。 これもおすすめ！人気のプログラミング教材 ここからはロボットではないが人気のタンジブル教材を紹介します！ タンジブルとは形のないもの（命令、情報、プログラムなど）を、直接触ることができる形のあるものとして操作できるタイプの教材を指します。 ロボットプログラミング教材よりもお手頃で始めるハードルが低いので、ぜひ参考にしてくださいね。 micro:bitV2（マイクロビット） ※micro:bitはmicro:bitV2にバージョンアップされています。 ツールタイプ：テキスト言語, ビジュアル言語 対象：7〜16歳 価格：2,200円 文字入力対応可 PCやタブレットでの操作を推奨 BBC micro:bit（マイクロビット）は、イギリスの公共放送局「BBC」によって開発された教育用コンピュータで、イギリスをはじめ多くの国の子どもたちがBBC micro:bitでプログラミングを学んでいます。 クレジットカードよりも小さいサイズの電子基板にセンサーやLEDといったなどさまざまな機能が搭載されているにもかかわらず、その価格は非常に安価です。 センサーやLEDの他にも、コンパス、無線通信機能、加速度センサー、温度センサーなどの搭載されていて、子どもたちが作った段ボールやペットボトルのおもちゃに心臓部としてこのmicro:bitを入れることで、自作のおもちゃを動かすことができます。 micro:bitで学ぶプログラミングでは、マイクロビット本体のほか、プログラムを書くためのパソコン、データを転送するケーブルなどの周辺機器を扱うため、子どもが技術に触れる機会を増やすことができますよ。 Toy-Conガレージ（トイコンガレージ） ツールタイプ：ビジュアル言語 対象：6歳〜 価格：6,980円＋税 文字入力不要 Nintendo Switch本体が必要 Toy-Conガレージ（トイコンガレージ）は、Nintendo Switchを使って行うビジュアルプログラミング学習教材です。 Toy-Conガレージでは、Nintendo Labo の付属のToy-Conを作って遊ぶほかに、オリジナルのToy-Conのプログラム「発明」に挑戦することもできます。 入門動画がYouTubeの任天堂公式チャンネルにて公開されているので、専門知識がなくても簡単に操作が可能です。 Toy-Conガレージでは、タッチスクリーンを使って指で直感的に作業できるので、子どもやプログラミング初心者でもキーボードでコードを書く必要がなく、プログラミング学習の導入としてもおすすめです！ YouTubeの任天堂公式チャンネルでは「バラエティキット」に含まれている「ラジコンカーToy-Con」と「紙人形Toy-Con」を使ったものや、本体に加えて輪ゴムを使った「輪ゴムギター」など、作例が豊富に紹介されています。 ですが、工作は必須ではないのでJoy-Conだけを使用してプログラミングを始めることもできますよ！ 子どもがあれこれと工夫することで、「あそび」とはまた別の手触りや反応といった「体験」を作ることが可能となっているプログラミング学習教材です。AND、NOT、カウンター、タイマーなど、一般的なプログラミングの概念に通じる機能が詰まっていて学習教材としても質が高いと言えます。 MESH（メッシュ） ツールタイプ：ビジュアル言語 対象：6歳〜大人 価格：13,871円＋税 文字入力不要 Wi-Fiなどのネットワーク、パソコン・タブレットなど不要 MESH（メッシュ）は、ソニー株式会社が開発した、小さな「電子タグ」型のプログラミング学習教材です。 USBメモリを一回り大きくしたような形状で、スマートフォンやタブレット、Windows10上のアプリを使ってプログラミングが行えます。 アプリは画面上のアイコンを組み合わせてプログラムを作成する「ビジュアルプログラミング」形式になっており、子どもやプログラミング初心者でも直感的なプログラミングが可能です。 MESHには「LED」、「ボタン」、「人感」、「動き」、「温度・湿度」、「明るさ」、「GPIO（拡張）」の７種類の電子タグがありそれぞれを組み合わせることで色々な機能が実現できます。 MESHではプログラミングしてできたものを「レシピ」と呼び、そのレシピを作成する際に何を作るか、どの電子タグを組み合わせるかなどを子どもが考えながら、意図した仕組みを完成させるので、自然とプログラミング的思考が身に付きます。 複数のMESHの組み合わせけでなく、身近にあるモノをMESHとスマホなどの通信機器と組み合わせ、「モノ」に通信機能をもたせる、いわゆるIoT（Internet
子ども向けプログラミング

JavaScriptのライブラリの作り方を現役エンジニアが解説【初心者向け】

JavaScriptのライブラリの作り方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ポップアップとはポップアップとモーダルウィンドウの違いポップアップ表示機能の実装に便利なJavaScriptのライブラリの紹介実際に使ってみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのライブラリの作り方について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに 今回は自作のライブラリに関する記事です。 自作のライブラリを作成する際のポイントや注意点など解説します。 ライブラリは大規模なWebアプリや複数人での開発などでとても便利なものですので、ぜひ参考にしてください。   ライブラリとは 平たく言うと機能の集まり、もしくは部品のようなものです。 使われることの多い機能や処理は、ライブラリとして提供されていることが多いです。 例えば、画像をスライダーとして切り替えて表示してくれるものや、グラフや図形を書いてくれるものなどたくさんのライブラリが存在しています。 このようなライブラリを使うことで、自分で処理を作らなくても簡単にやりたいことが実現できます。 HTMLの操作や便利な機能がたくさん入ったjQueryなども有名なライブラリです。 ライブラリを探す際は下記のサイトが便利です。 ライブラリを探すサイト 例えばここで画像のスライダーを探す場合は、sliderと入力して検索することでスライダーのライブラリがたくさん見つかります。   [PR] コーディングで副業する方法とはライブラリの作り方 配布されているライブラリでは対応ができないような、独自性の強い処理を個人やチーム内で使いまわすような場合はライブラリを作ることがあります。 どのような利用方法をする機能かにもよりますが、基本的には通常通りJavaScriptを記述したファイルを用意して、拡張子をjsにしたJavaScriptファイルを作るだけです。 ライブラリを使う側はこのJavaScriptファイルを読み込むことで、処理を呼び出したり使ったりできます。 <script type="text/javascript" src="自作ライブラリパス"></script>   自作ライブラリを作る際のポイント・注意点 ライブラリを作る際には以下の内容をメンバー間で認識を合わせておきましょう。 ライブラリに実装するか個別のJavaScriptに実装するか基準を決める。 HTMLオブジェクトのクリックイベントなどにひもづける場合は、特定のクラス名などの指定を行う。 グローバルスコープ変数を宣言する場合は、変数名などが衝突しないように命名規約を定める。 画面オブジェクトを参照する場合は画面ロード完了時などタイミングを決めておく。 ライブラリに共通の処理をまとめることで、コーディングの量を減らせるだけでなく、修正などがあった際に修正箇所が少なくなるなどのメリットがあります。 一方複数の画面から読み込まれるので、個々の画面でのみ使われるような処理を入れていくとファイルサイズが大きくなったり、複数人での開発の際にファイルの競合が発生し非効率となってしまいます。 ライブラリには各画面で呼び出されるような汎用的な処理や共通の処理（ファイルアップロード機能・ヘッダー表示機能など）を実装するようにしましょう。 また、非同期処理などでHTMLを作成する場合は、画面オブジェクトを参照する処理は関数化して、各画面の実装時に任意のタイミングで呼べるように工夫する必要もあります。 他にもプロジェクトの特性や仕様により制約や取り決めをあらかじめ決めてから、ライブラリの実装を行うようにしましょう。   実際に作ってみよう 少ない記述で小さなライブラリを作成してみます。 アンカータグにマウスを乗せた際に、アラートで遷移先のURLを表示する機能をライブラリにまとめます。 まずは以下のようなHTMLを準備します。 今回はjQueryも利用していますので、head内で参照しています。 <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.slim.js" crossorigin="anonymous"></script> </head> <body> <div> <a href="https://techacademy.jp/" class="xxxxLink">リンク</a>
JavaScript

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] コーディングで副業する方法とは4種類のプロトタイプ プロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。   1. 概念的プロトタイプ このプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。 全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。 この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。 概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。   2. ローファイプロトタイプ ローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。 ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。 「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。 アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。 概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。   3. ミディアムファイプロトタイプ 段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。 ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。 有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。 ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。 リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。   4. ハイファイプロトタイプ この段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。 ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。 アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。   プロトタイピングのメソッド プロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。 あなた自身とクライアント双方にとって適合するメソッドを選びましょう。   ビデオまたはプレゼンテーションのプロトタイプ これらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。 クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。 ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。 聴き手が共感できる問題を提示する。 あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。 これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。 ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画より   ワイヤーフレーム ワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。 ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。 しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。   紙のプロトタイプ これはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。 インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。 ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。 またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。 誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。   アプリで作成するミディアムファイおよびハイファイプロトタイプ これらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。 異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。 また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。   コード もちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。 あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。 作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。 製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。 インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。 あなたがキーを押すのが好きで、クリックするのは嫌いである。 ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。 すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。   フレームワークによるプロトタイピング フレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。 補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   プロトタイピングのツールとアプリ 理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。 良くも悪くも、多数の優良なアプリから選ぶことになります。 繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。 以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。 これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。   AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。 今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。 プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。   プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。 コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。   InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。 無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision   Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。 今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind   Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel   Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io   POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。 主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP   Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。 ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder   Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。 ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto   [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

データ分析のライブラリ！Pandasとは【初心者向け】｜現役エンジニアが解説

今回は、Pythonのデータ解析用ライブラリであるPandasについて解説します。 Pandasを使うと、データの統計量を表示したり、グラフ化するなど、データ分析（データサイエンス）や機械学習で必要となる作業を簡単に行うことができるようになります。 Pythonでデータ分析を行うには、必須のライブラリなので、ぜひこの記事を参考に、Pandasの使い方を覚えましょう。   なお本記事は、TechAcademyのAIオンライン講座の内容をもとに作成しています。   目次 Pandasとは Pandasの特徴 Pandasでできること Pandasを使うメリット Pandasを利用するには ダウンロード手順 初期設定 Pandasの使い方 Pandasをより便利に使う方法 Pandasの勉強方法   大石ゆかり 田島メンター！Pandasというのは何でしょうか？ 田島悠介 Pythonのデータ解析用のライブラリだよ。Pythonでデータ分析や機械学習を行うには、必須のライブラリなんだ。 大石ゆかり どのような機能があるのですか？ 田島悠介 例を見ながら説明していくね！ Pandasとは Pandasは、Pythonでデータ分析を効率的に行うためのライブラリです。Pandasはオープンソース(BSDライセンス)で公開されており、個人／商用問わず、誰でも無料で利用することができます。 Pandasを使うと、 データの読み込みや統計量の表示 グラフ化 データ分析 に関する作業を容易に行うことができるようになります。また主要なコードはPythonまたはC言語で書かれており、Pythonだけでデータ分析を行うのと比較して、非常に高速に処理を行うことができます。 データ分析（データサイエンス）は、機械学習を行うまでの前処理（データの読み込み、クリーニング、欠損値の補完、正規化など）が、全ての作業の8〜9割を占めると言われています。Pandasを使うとそのような処理が効率的に行えるようになるため、Pythonで機械学習を行うには、Pandasは必須のライブラリとなっています。   [PR] コーディングで副業する方法とはPandasの特徴 Pythonによるデータ分析で多く使われているライブラリといえば、PandasやMatplotlib、NumPyなどがあげられます。これらのライブラリはそれぞれ以下のような特徴があります。   Pandas Pandasはデータの読込や並べ替え、欠損値（欠けている項目値）の補完などを行うことができるライブラリです。データ分析の前処理段階でとても多く利用されています。 データの読込はCSVやテキストだけでなく、エクセルやインターネット上で提供されている株価情報など、多様な形式のデータを読み込むことが出来ます。 また、Pandasの特徴はDataFrameという多機能な「表」にあります。DataFrameにはデータの平均値や行数などの概要的な特徴を把握する機能や、並べ替えや列名の変更などのデータを整形する機能があります。 またキーを指定しての集計やMatplotlibと連携してのグラフによる可視化など、データ分析のデータ前処理の段階で便利な多くの機能が提供されています。データ分析の過程では、Pandasである程度データをきれいに整えてから、NumPyで数値計算を行うようといったように、使い分けて利用することが多いでしょう。   Matplotlib MatplotlibはPythonで代表的なグラフを描画するライブラリです。2Dだけでなく3Dも含めた多くの種類のグラフを描画することができます。 Matplotlibは慣れると使いやすいのですが、はじめは使い方がやや難しく感じると思います。そのような場合、PandasやSeabornなどのライブラリと組み合わせることで、見た目の良いグラフを簡単に描画することができます。 Matplotlibはデータ分析の様々な段階で、NumPyやPandasと組み合わせてデータの概要を把握したり、特徴を可視化するような目的で使用します。   NumPy NumPyは数値計算や行列演算を行うライブラリです。複数の数値を配列としてまとめて扱ったり、行列演算を行ったりするのが得意です。 特にコンピューターで小数点以下を扱う際の標準的な形式である浮動小数点型の行列演算を高速に行うことが出来ます。また三角関数や平方根などの数値計算の機能も豊富です。 NumPyはある程度データの前処理が終わり、きれいに整ったデータに対して数値計算を行うのに向いているライブラリと言えます。   Pandasでできること Pandasには多くの機能があります。主に利用する機能を確認してみましょう。なお以下でDataFrameと記載しているのはDataFrameオブジェクトを指しています。 データの読込 CSV形式のデータの読込：read_csv() Excelファイルの読込：read_excel() JSON文字列の読込：read_json() pickle形式(Pythonオブジェクトを保存する形式)によるデータの読込/書込：read_pickle()、to_pickle() インターネット上で提供されている株価情報の読込：pandas-datareader データの特徴を把握 データの特徴を表示：DataFrame.info() 要約統計量を表示：DataFrame.describe() データの一部を表示：DataFrame.head()、DataFrame.tail() データの形状を表示：DataFrame.shape 行数を取得：DataFrame.index.values 列名を取得：DataFrame.columns.values それぞれの列の型を取得：DataFrame.dtypes データの切り出し（スライス） データのスライス：DataFrame[]、DataFrame.iloc[]、DataFrame.loc[] フィルタリング：DataFrame.query() データの並べ替え 値による並べ替え：DataFrame.sort_values() インデックスによる並べ替え：DataFrame.sort_index() 列名の変更：DataFrame.rename() 集計 列の集計：DataFrame.value_counts() 表の集計：DataFrame.groupby() ※groupby().sum()で合計、groupby().mean()で平均値得ることができる 可視化 Matplotlibのimportが必要 ヒストグラム：DataFrame.hist() 散布図、線グラフ：DataFrame.plot() 棒グラフ：DataFrame.bar() 箱ひげ図：DataFrame.boxplot() 欠損値の扱い 欠損値の確認：DataFrame.isnull().sum() 欠損値に値を埋める：DataFrame.fillna() 欠損値のある行を削除する：DataFrame.dropna() その他 カテゴリー変数の展開：get_dummies() 列同士の相関を確認：DataFrame.corr()   Pandasを使うメリット データ分析であればExcelなどの表計算ソフトを使えば十分という方も多いでしょう。Pandasを使うと、大量データに対して何度でも同じ処理をプログラムを実行するだけで行うことができるというメリットがあります。 大量データの処理が可能 Pandasではパソコンのメモリ容量が許す限り、大量のデータをDataFrameに読み込んで処理を行うことが出来ます。動作速度も表計算ソフトほど遅くはなりません。 同じ処理を何度も再実行できる 1つ1つの作業を人間が操作して行うのではなく「プログラム」として記述することで、何度でも全く同じ処理を繰り返し実行することが可能となります。 データ分析では再現性が重要であり、手順書をもとにした人間の操作よりも、プログラムで処理自体を記述したほうが、確実に同じ処理を再実行することができます。 また、大量データに対する処理は数時間～数日も時間を要することがあります。このような場合でも、人間はプログラムを実行して結果を待つだけです。表計算ソフトのように、付きっきりで操作し続ける必要はありません。 さらにパソコンを複数台数用意して、条件を少し変えたプログラムを同時並行で実行して結果を比較する、といったことも容易に実現可能です。 他のライブラリと連携し多彩な機能を実現できる 他のライブラリと連携することで、プログラムを実行してグラフを描画したり、加工した結果を表計算ソフトのファイルとして出力するなど、Pandasだけでは行えない多くのことを実現することができます。   Pandasを利用するには Pandasを利用するには、Anacondaなどの「ディストリビューション」と呼ばれる開発環境をまとめたパッケージを使うのが簡単です。Anacondaは、データ分析やグラフ描画など、Pythonでよく利用されるライブラリを含んだ開発環境です。 ここではAnacondaを例にダウンロード手順と初期設定について確認しましょう。   ダウンロード手順 Anacondaの公式サイトからProducts > Individual Edition > Downloadを表示します。 Anaconda – Individual Edition – Download Windows、Mac共に「Python 3.7 – 64-Bit Graphical Installer」をクリックしてダウンロードします。なお、Python2.7は古いバージョンであり、サポート期間が2020年4月とすでに終了しています。どうしても必要な場合を除き、利用することは無いでしょう。 ダウンロードしたファイルを実行することでインストールを行うことが出来ます。選択肢などは既定値のままで良いでしょう。   初期設定 インストールが終わったら、Anaconda Navigatorを起動します。はじめに初期設定として必要なライブラリをインストールしましょう。 ライブラリのインストールはEnvironmentsから行います。Environmentsを開き、「Not installed」を選択して検索ボックスに「pandas」と入力します。 一覧にPandasが表示されますので、チェックボックスで選択し、画面右下のApplyボタンを押すことでインストールすることができます。 また、今回は説明用にscikit-learnのサンプルデータセット（トイデータセット）を使用します。同様にscikit-learnとnumpy、matplotlibもインストールしておきましょう。 インストールが終わったらHomeに戻ります。プログラムはJupyter Notebookで作成します。画面の「jupyter notebook」と書かれた部分の「Launch」ボタンをクリックします。 初回は「Install」ボタンになっており、クリックするとJupyter Notebookがインストールされます。 以降は、Jupyter Notebookをもとに、Pandasの使い方を説明します。   Pandasの使い方 Pandasを使う際は、初めにPandasライブラリをインポートします。併せてサンプルデータセットも利用できるようにしておきましょう。 # Pandas、及び必要なライブラリのインポート import pandas as pd from pandas import DataFrame import numpy as np # サンプルデータセットを取得する from sklearn import datasets boston = datasets.load_boston() 実行結果は特にありません。エラーがでなければ、正しくインポートされています。 次に、サンプルデータセットをPandasのDataFrame型に変換しておきます。なお、今回はサンプルデータセットを使いましたが、CSVデータを読み込むread_csvという命令も用意されています。 # PandasのDataFrame型に変換 df = DataFrame(boston.data, columns = boston.feature_names) # 目的変数をDataFrameへ追加 df['MEDV'] = np.array(boston.target) 準備が整いました。それではPandasの命令を幾つか見ていきましょう。   データの概要を確認する 先頭5行を表形式で表示する df.head() 実行結果は以下のようになります。 行列数を表示する df.shape 実行結果は以下のようになります。 (506, 14) 細かい情報を表示する dataset.info() 実行結果は以下のようになります。 <class 'pandas.core.frame.DataFrame'> RangeIndex: 21613 entries, 0 to 21612 Data
機械学習

Pythonにおけるlibraryについて現役エンジニアが解説【初心者向け】

Pythonにおけるlibraryについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 libraryについて詳しく説明していくね！ 大石ゆかり お願いします！ 目次 libraryとは Pythonにおける標準ライブラリ ライブラリの確認方法 おすすめのライブラリ 便利なライブラリをインストールしてみよう まとめ   libraryとは ライブラリ(library)とは、もともと図書、書庫の意味です。特にIT分野では、プログラムの部品のことを指します。 プログラミングでは、しばしば似たような操作を繰り返し行う必要があり、そのたびに都度コーディングするのは非効率です。そのような場合に、共通する処理をライブラリにまとめ、他のプログラムからそのライブラリを呼び出せるようにします。   [PR] コーディングで副業する方法とはPythonにおける標準ライブラリ 標準ライブラリの充実していることがPythonの長所の一つです。文字列処理、数学の計算、ファイル操作など、プログラミングで必要になる各種操作のかなりの範囲を標準ライブラリのみでカバーしています。 標準ライブラリで機能や性能の不足する場合には、PyPIという仕組みでライブラリを追加インストールできます。   ライブラリの確認方法 標準ライブラリはPython本体と同時にインストールされるので、追加のインストールは不要です。各ライブラリの使い方は、こちらで確認できます。 前述のPyPIからライブラリをインストールするには、pipコマンドを使います。例えば以下コマンドでrequestsというライブラリをインストールします。 pip install requests   おすすめのライブラリ Tensorflow：機械学習、特にディープラーニングのライブラリ NumPy：科学計算でほぼ標準といってよいライブラリ Matplotlib：グラフ描画でひんぱんに用いられるライブラリ Jupyter：ライブラリというよりも実行環境に近いですが、ノート形式でPythonのコード、テキスト、画像などを保存できる requests：HTTPのライブラリで、HTTPリクエストの送受信を強力にサポートしてくれる   便利なライブラリをインストールしてみよう 上記で挙げたNumPyをインストールしてみます。 pip install numpy Pythonインタプリタでnumpyライブラリをインポートしてみます。特にエラーが出なければ、インストールは成功しています。 Python 3.8.6 (tags/v3.8.6:db45529, Sep 23 2020, 15:52:53) [MSC v.1927 64 bit (AMD64)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>> import numpy >>>   まとめ この記事ではPythonで標準ライブラリ、PyPIライブラリを利用する方法を紹介しました。ライブラリを効果的に活用すると、コーディングの量やバグを減らすことができ、効率的にソフトウェアを開発できます。   監修してくれたメンター 橋本紘希（はしもとひろき） システムインテグレータ企業勤務のシステムエンジニア。 開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

JavaScriptでスライダーバーを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでスライダーバーを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ポップアップとはポップアップとモーダルウィンドウの違いポップアップ表示機能の実装に便利なJavaScriptのライブラリの紹介実際に使ってみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでスライダーバーを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに Webサイトなどで、視覚的にわかりやすく操作させる「スライダーバー」について説明をします。 今回はHTML標準のスライダーバーだけでなく、公開されているライブラリを使い、高機能なスライダーバーを実装するところまで解説します。 ライブラリ：jQueryなどが有名ですが、便利な機能や汎用的な機能を集めたもの。   スライダーバーとは 下記のような値をスライドさせることで変化させる部品のことです。 つまみのような場所を左右や上下に移動させることで値を変化させることができます。 音量や画面の明るさのような値を調整する際の入力欄として操作しやすい部品です。   [PR] コーディングで副業する方法とはスライダーバーを実装する方法 シンプルにスライダーバーを実装するのであれば、HTMLのinputタグのtypeをrangeとすることが簡単です。 その場合は、下記のようなHTMLソースを記述するだけでスライダーバーが実装できます。 これに目盛りをつけたり、値を10ずつ変化するようにしたり、CSSで装飾もできます。 min:スライダーバーの最小値を指定します。 max:スライダーバーの最大値を指定します。 step:スライダーバーの1目盛りを指定します。 <input type="range" id="inputSlideBar" min="0" max="100" step="10">   またJavaScriptでは、以下のようにslideBarの値を取得できます。 今回はchangeイベントでスライダーバーの変更を検知して値を取得しています。 const inputSlideBarElement = document.getElementById('inputSlideBar'); inputSlideBarElement.addEventListener('change', function(){ console.log(inputSlideBarElement.value);//(例)console => 90 }); inputタグですので、値は.valueで取得できます。 またvalueに値を0と設定することで、スライダーバーを左端に設定できます。 複数の値を1つのスライダーバーで操作したいような場合などは、標準のinputタグでは対応できません。 複数の値を扱えるスライダーバーを個人で実装もできますが、今回はライブラリを使って実装してみましょう。   実際に書いてみよう HTMLのinputタグを使う方法は上で紹介した通りです。 ここでは、JavaScriptのライブラリを使って実装する流れと方法を紹介します。   1．ライブラリを探す 欲しい機能名やライブラリというキーワードで検索しても良いです。 今回はJavaScriptのライブラリを探すのに便利なサイトのSearchLibsで、スライダーバーのライブラリを探します。 検索キーワードはsliderだけだと画像をスライド表示するライブラリも出てくるので、sliderにスライダーバーを表すrangeという単語を追加します。 検索結果から一番スターの多い「nouislider」というライブラリを使うことにします。   2．ライブラリを読み込む ライブラリをダウンロードして読み込むことも可能ですが、今回はJavaScriptのライブラリなどを配信しているCDN（Content Delivery Network）のcdnjsから、「nouislider」を検索して配信しているURLを使って読み込みます。 使用するCSSとJSファイルの2つを下記のようなURLで読み込んでください。 また、スライダーバーの値を取得する処理でjQueryも使いますので一緒に読み込みましょう。 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.slim.js" crossorigin="anonymous"></script>   3．ライブラリの実装をする ライブラリのドキュメントを読み、実装方法を確認します。 まずはHTMLでスライダーバーを用意するためのタグを用意します。 JavaScriptで取得しやすいように、idにsliderという名前をつけています。 <div id="slider"></div>   次にJavaScriptの記述です。 noUiSliderのcreateメソッドに必要な値を渡します。 第1引数に、スライダーバーを表示するためのHTMLを取得して渡します。 第2引数に、{（波カッコ）で囲ったオブジェクトの形で、必須のstartとrangeを指定します。 startは操作するハンドルの数と初期位置を指定するためのものです。 今回はハンドルを2つにし、20の位置と80の位置にします。 rangeはオブジェクトの形で最小値であるminと、最大値であるmaxを指定します。 let slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], //スライダーバーの初期位置を指定 range: { 'min': 0,
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript ポップアップ表示機能の実装に便利なJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】