JavaScript

【レベル別に紹介！】JavaScriptを勉強できるおすすめの本10選

JavaScriptを勉強する上で最適な書籍をまとめています。これからJavaScriptを理解したいと思っている人や勉強中の人にも役立つよう初級から上級までレベル別に紹介しています。自分のレベルに合わせて本を選んでみてください。

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

これからJavaScriptをはじめて学ぼうとしている人や、JavaScriptプログラミングのレベルアップをはかりたいと考えているひとに、ぜひおすすめしたいJavaScriptを勉強できる書籍を紹介します。

Kindleで読める書籍も多数あるので、電子書籍で読みたい人にもおすすめです。

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

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

JavaScriptとは

JavaScriptはブラウザ上で動作し、HTMLやCSSを操作したり、動きのあるページを作成したり、ミニゲームを作ったり、ページを移動しないで一部分だけ書き換えるなどができるプログラミング言語です。

JavaScriptは他の言語に比べて、どこからでも値や処理などを追加したり削除したりできるなど、動きの自由度が高い言語なので、他の言語を勉強する上でも応用が利くでしょう。

[PR] フロントエンドで副業する学習方法を動画で公開中

1. 確かな力が身につくJavaScript(初級)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

HTMLやCSSは少しわかるけど、JavaScriptは全く解らない人にとって、第一歩を踏み出すのにベストな解説書だと思います。

文法から始まるプログラミング入門書とは違って、カウントダウンタイマーなど簡単なプログラムを作成しながら、だんだん習熟していく学習書です。

2. JavaScript本格入門(初級)

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

全くの初心者には向いていませんが、多言語を１つでも知っている人に効率的に学習できる書籍です。レシピ集のような側面は無いものの、ある程度網羅的に説明されています。

3. JavaScript入門: 作って楽しむJavaScript(初級)

JavaScript入門: 作って楽しむJavaScript入門

かなり簡単なことから、おみくじゲーム、もぐらたたきゲームなどを題材にして初級者用に解説しています。

Kindle本であり、値段がかなり安いのが良いです。

4. 何となくJavaScriptを書いていた人が一歩先に進むための本(中級)

何となくJavaScriptを書いていた人が一歩先に進むための本

値段も安く、全体のページ数は少なめのKindle本です。

JavaScriptは他の言語に比べて自由に書いて行けますが、thisって何なんだろう？クラスってどうやって作成するの？という疑問が付きまといます。そういう問題をさらっと例題付きで解説しています。

5. jQuery入門道場(中級)

jQuery入門道場

jQueryというのは、JavaScriptで作成されたライブラリで、クロスブラウザに対応していたり、ちょっとしたアニメーション的な動きのあるものを作成出来たりするものです。書き方が簡単になったりもします。

しかし、JavaScriptの基礎が出来ていないと後で、戸惑うこともあると思います。

JavaScriptではブラウザによって挙動が異なる場合がありますが、jQueryで吸収することが可能です。

6. JavaScriptライブラリ実践活用(中級)

JavaScript ライブラリ実践活用〔厳選111〕 (Software Design plus)

こんなことができるのかと使い方を頭に描きながら、ページを読み進めることができるように、ユーザインタフェース、スマートフォン、フレームワーク、テスト、小ネタの各パートが、サンプルソースとともに紹介してあり、デザイナーやプログラマーに使い勝手のよい本です。

7. JavaScript 第6版(上級)

JavaScript 第6版

通称「サイ本」、プログラミング学習者にとってのJavaScriptのバイブルです。類似の書籍に当ページでも紹介しているJavaScript本格入門とパーフェクトJavaScriptがありますが、それよりさらに肉厚です。

エンジニアのための辞書的な位置づけです。記載されている用語や内容のレベルはとても高いので、一通りJavaScriptの文法を理解してから購入すると良いでしょう。

8. JavaScript Ninjaの極意(上級)

JavaScript Ninjaの極意

jQueryの生みの親が執筆した書籍です。

jQueryというのは、JavaScriptで作成されたライブラリです。そういったライブラリが作れるような考え方や技法が解説されています。JavaScriptの基礎が出来ていないと歯が立ちません。

9. JavaScriptグラフィックス(上級)

JavaScriptグラフィックス ―ゲーム・スマートフォン・ウェブで使う最新テクニック

主にグラフィックを中心とした技法を解説しています。通常のHTMLをタイル状に並べたり、ゲーム作成もあります。
オライリー社から発売されている、達人の技法がそれとなく書かれている本です。

類似の本に、good partsやprocessing、patternがあります。

10. JavaScriptエンジニア養成読本(上級)

JavaScriptエンジニア養成読本 Webアプリ開発の定番構成Backbone.js+CoffeeScript+Gruntを1冊で習得! (Software Design plus)

JavaScriptによる「開発の全体像」を俯瞰したあと、JavaScript開発でもっとも重要な3つの知識、「MVCフレームワーク」「AltJS」「タスクランナー」についてわかりやすく解説をしています。

より実践的な内容になるので、フロントエンドエンジニアとして働くことを意識している人はとても参考になるはずです。

おわりに

色々紹介しましたが、いかがでしたでしょうか。

とりあえずは基礎を固めて、通常のHTMLに対して、ちょっと動きのあるものにするという学習過程が良いと思います。

基礎を固めて、jQueryなどのライブラリが使用できるようになったりしたら、自分の興味のある分野を見つけたり大規模な開発も出来るようにフレームワークの仕様などを目指していくのが良いでしょう。

jQueryの本もまとめて紹介しているので、合わせてご覧ください。

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

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

JavaScriptによる図形描画入門を現役エンジニアが解説【初心者向け】

JavaScriptによる図形描画入門について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJ...

JavaScript

JavaScriptでunshiftメソッドを使って配列の先頭に要素を追加する方法を現役エンジニアが解説【初心

JavaScriptでプログラミングを行う中で、配列の先頭に要素を追加したいときはありませんか？本記事では、JavaScriptでunshiftメソッド...

JavaScript

JavaScriptの即時関数とクロージャについて現役エンジニアが解説【初心者向け】

JavaScriptの即時関数とクロージャについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 &n...

JavaScript

JavaScriptからPHPを呼び出す方法を現役エンジニアが解説【初心者向け】

JavaScriptからPHPを呼び出す方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJa...

JavaScript

JavaScriptでbreak文を使ってwhileループを終了する方法を現役エンジニアが解説【初心者向け】

JavaScriptでbreak文を使ってwhileループを終了する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...

JavaScript

JavaScriptのテキストボックスから値を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptのテキストボックスから値を取得する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 ...

JavaScript

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

今さら聞けない！jQueryとは｜現役エンジニアが徹底解説【初心者向け】

Webサイト制作をしている人は一度は聞いたことがある言葉、jQuery。 jQueryはWebサイトやWebサービスを作る上で便利なものなので、デザインのスキルを向上させたいという人は習得が必須と言えるでしょう。今回はjQueryでどんなことができるのかについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。記事の中で実際にjQueryでアニメーションを作る書き方も紹介しているので、初心者の方でもすぐに実践できるようになっています。ぜひ書きながら覚えてみてください。目次レベル別書籍まとめJavaScriptとは1. 確かな力が身につくJavaScript(初級)2. JavaScript本格入門(初級)3. JavaScript入門: 作って楽しむJavaScript(初級)4. 何となくJavaScriptを書いていた人が一歩先に進むための本(中級)5. jQuery入門道場(中級)6. JavaScriptライブラリ実践活用(中級)7. JavaScript 第6版(上級)8. JavaScript Ninjaの極意(上級)9. JavaScriptグラフィックス(上級)10. JavaScriptエンジニア養成読本(上級)おわりにそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり jQueryというのは、何でしょうか？田島悠介 JavaScriptの書き方などを簡単にすることが出来る、JavaScriptで作成されたライブラリなんだ。大石ゆかり新しい書き方を覚えるのは、少し面倒じゃないですか？田島悠介そうだね！ただ、一番のメリットはブラウザの互換性なんだよね。異なるブラウザでJavaScriptが微妙に違ったりするんだ。では、jQueryで出来ることを見てみよう！ jQueryとは jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。2006年にリリースされ、JavaScriptライブラリのデファクトスタンダードであると言われています。 jQueryのおかげで、プログラミングの初心者でも、フロントエンド開発に参加しやすくなりました。jQueryは初心者にやさしい、とても有用なJavaScriptライブラリです。 jQueryでできること jQueryの大きな特徴はブラウザの違いを意識せずに済む HTMLのDOM操作が簡単にできる Ajax処理が簡単に記述できるの3つです。詳しく解説していきます。 1.ブラウザの違いを意識せずに済む JavaScriptは、各ブラウザに搭載されたエンジンにより実行されます。そのため、 Chrome FireFox InternetExproler Safari 等で、それぞれ微妙に対応可能なメソッドが違ったり、記法が異なります。しかし、jQueryはこのような膨大なブラウザごとの記述差異を、自動的に吸収してくれるため、ユーザーはほとんどブラウザの違いを意識せずにプログラミングができます。 2.HTMLのDOM操作が簡単にできる jQueryの主な用途は、HTML部品の操作です。（HTMLの部品を、DOMと呼びます。） DOM操作の例テキストボックスの中身を取得したり、変更する画面部品の表示をボタン一つで非表示にしたり、再表示させる CSSをユーザー操作に合わせて変更する jQueryでは、これらの操作が簡単に実現可能です。また、「HTMLやCSSのコーディングはできるけど、JavaScriptはわからない」というエンジニアがリリース当時は多かったため、CSSのセレクタ記法によりHTML部品を操作できるように設計されています。例えば、テキストボックスの中身を取得するコードは、以下で実現できます。 HTML <input type="text" id="tBox" class="font-tbox" /> jQuery ( JavaScript ) //方法１ // CSSのセレクタ記法により、idが「tBox」のHTML部品を操作できる。 $("#tBox").val(); //方法２ // CSSのセレクタ記法により、「font-tbox」のClassを持つHTML部品を操作できる。 $(".font-tbox").val(); CSSセレクタ記法とは、このようにHTMLが持つ情報に「#」や「.」を指定して、HTMLファイルからDOMを検索して取得するための記法です。 3.Ajax処理が簡単に記述できる Ajaxとは、Asynchronous JavaScript And XML の略です。直訳すると、「非同期（で動作する）JavaScript と XML」です。（現在はデータのやり取りにXMLではなくJSONを使うため、XMLに特に意味はありませんが、Javascriptからのサーバー通信にはJSON形式データ利用時でも、XMLHttpRequest(XHR)オブジェクトを利用します。) 通常、HTMLの画面からサーバーとやり取りする際には、「submit処理」（お問い合わせフォームの送信ボタンを押した場合、等）を行い、サーバーにデータを投げ、応答を待ってから別のHTML画面全体を読込みなおす・・・といった処理が昔は主流でした。ところが、最近は会員登録サイトにidを入力するだけで、テキストボックスの上部に「既に登録済みのIDです」などの表示が出てきて、「すぐにそんなことがわかるのか」と驚かれる方も多いと思います。これは、Ajaxという非同期通信技術により実現されています。Ajaxは、基本的には画面表示中のHTMLページとは無関係に、裏方のJavascriptだけでサーバー通信してしまう技術です。そのため、クライアントとサーバーが通信中であってもHTML画面をユーザーが操作し続けることができます。この技術の発展により、SPA（Single Page Application）という、画面遷移せずにインタラクティブな多目的操作ができるアプリケーションを提供する方式もずいぶん増えてきました。 Ajax技術の普及により、ユーザーがサーバーと通信（キャッチボール）する際の方式が、2通り選択できるようになりました。 HTMLからのsubmit処理によりサーバー通信する方式（同期処理方式） AjaxによりJavaScriptからサーバー通信する方式（非同期処理方式） jQueryは、このAjax処理を簡単に記述できるように設計されています。 [PR] フロントエンドで副業する学習方法を動画で公開中jQueryでできないこと jQueryは、基本的にはHTMLのDOM操作とAjax処理を簡単に記述するためのものです。そのため、JavaScript内部における処理は、基本的には通常のJavaScriptコードで記述します。例えば、以下のような場合です。変数に格納した数値同士の足し算配列データの操作オブジェクト型データの操作 JavaScript内のループ処理 jQueryの読み込み方法 jQueryを利用する為には、開発しているHTMLの中にjQueryを読み込む必要があります。読み込みをする方法は、2つありますのでそれぞれ解説していきます。 1.CDNを利用する方法 HTMLのbodyタグ内の最下部に、以下のコードを記述するだけでOKです。 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> CDNとは、Contents Delivery Network の略で、サーバー上に公開されたプログラムをユーザーが自由に使うことができます。 2.jQueryのライブラリをダウンロードして使う方法公式サイトのDownloadページからjQueryのソースコードをダウンロード可能です。 https://jquery.com/download/ 「Download the compressed, production jQuery 3.x.x」のリンクを右クリックして、「名前をつけてリンク先を保存」を選択すると、「jquery-3.4.1.min.js」がダウンロードできます。ダウンロードしたJSファイルを、他のJSファイル同様にHTMLファイル上で読み込ませればOKです。 jQueryの書き方今回の記事では、jQueryを使ったDOM操作の書き方をご紹介します。手順は、以下です。 jQueryから、HTMLのDOMを取得する DOM種別ごとに決められたjQueryのメソッドを実行する 1.jQueryから、HTMLのDOMを取得する基本的な構文は、以下です。 $(" セレクタ "); セレクタ部分には、CSSセレクタと全く同じ記法により、取得したいHTML要素の検索条件を指定します。例えば以下のようなHTML要素をjQueryで取得して操作したい場合、 HTML テキストボックス <input type="text" id="tBox" class="font-main" /> JavaScriptコードでは以下のようにjQueryからDOMを取得します。 JavaScript // DOMのidをキーにする場合 $("#tBox); // DOMのclass名をキーにする場合 $(".font-main"); 非常に簡単ですね。「$」記号と括弧を記載して、その中に「#」や「.」を記載してから、HTMLファイルに記載されているidやclass名を指定します。そうすることでjQueryがJavaScript側からHTMLファイルを検索してタグ情報を取得し、JavaScript側で取得したDOMを操作するためのjQueryオブジェクトを作ってくれます。 2.DOMごとに決められたjQueryのメソッドを実行するさて、DOMを取得してjQueryで扱うためのオブジェクト生成をしただけでは、何も画面は変化しません。jQueryオブジェクトから、DOM種別ごとに決められたメソッドを指定する必要があります。例えば、テキストボックスの場合は、val() の利用により、テキストボックス内に表示させる文字を指定可能です。 valメソッドの利用例を見てみましょう。 JavaScript $("#tBox").val("こんにちは！jQueryです！"); 実行結果非常に簡単ですね。値を取得したい場合は、この

JavaScript

入門に最適！独学から始められるjQueryの学習サイト20選

jQueryを勉強したいと思って検索してみても、サイトが多すぎてどのサイトから勉強すれば良いか分からないという方がいるかと思います。今回は、独学から始められるjQuery学習サイトをまとめて紹介したいと思います。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。 1. ドットインストール（jQuery入門）学習スタイル：動画プログラミング初学者の味方であるドットインストールです。文字で書いてあるサイトはたくさんあっても動画で解説しているサイトは中々無く、イメージを掴みやすい内容となっています。どの言語を勉強するときも第一歩はこれといっても過言ではないくらいおすすめできるサイトです。ドットインストール 2. jQueryってなに？超初心者向け入門講座学習スタイル：テキスト Web制作会社であるWeb企画さんが執筆した、初心者向けの記事です。今までプログラミングを学んだことのない方でも簡単に理解できるようにサンプルを交えて解説してあります。動画を見てイメージをつかんだ後に読むとさらに理解を深めることができるでしょう。 jQueryってなに？超初心者向け入門講座 [PR] フロントエンドで副業する学習方法を動画で公開中3. イモムシでjQuery入門学習スタイル：テキスト POPなデザインが特徴の入門サイトです。イモムシをjQueryで動かすという独特のサイトです。独特ですがわかりやすく解説されているので、jQueryを触ったことがないという人でも挫折せず進めることができるでしょう。イモムシでjQuery入門 4. jQuery入門道場学習スタイル：テキスト本で出版されている内容の前５章をWeb上で公開しているページです。本の抜粋とだけあって完成された文章で書かれているので、すんなりと知識が頭に入ってきます。文法の理解がメインとなっていますが、どれもプログラミングを身につける上で重要なので、これからエンジニアを目指している方は特におすすめです。 jQuery入門道場 5. SlideShare(初心者のためのjQuery入門) ノンプログラマーのためのjQuery入門 from Hayato Mizuno 学習スタイル：スライドスライドを公開するWebサービスであるSlideShare上で公開されているjQuery入門用のスライドです。 jQueryのメリットや成り立ちなどから解説されており、またスライドなのでとてもまとまっています。jQueryとは何なのか詳しく知りたい方には良いでしょう。 6. 40分で覚える！jQuery速習講座学習スタイル：テキスト WebProfessionalというWebの情報サイトに掲載されているページです。これを読めばjQueryを使えるというくらい要点をきっちり絞って解説してあります。見やすいデザインもおすすめです。速習なので、今すぐ理解したいという方はぜひ一度ご覧ください。 40分で覚える！jQuery速習講座 7. jQuery入門学習スタイル：テキスト環境設定から、サンプルコードまでたくさん載っているサイトです。中級者向けの内容も入っているので、慣れてきた方におすすめです。 jQuery入門 8. 少しのコードで実装可能な20のjQuery小技集学習スタイル：テキストこちらは環境設定や基礎理解が完了した人におすすめのサイトです。jQueryで使える実装をコードとサンプルとともに紹介しています。このサイトを見ればいかにjQueryが簡単に実装できるかがわかるはずです。 jQueryを使うとどんな動きが出せるのか知りたい方は、このサイトでイメージを膨らませておくと良いかもしれませんね。少しのコードで実装可能な20のjQuery小技集 9. とほほのjQuery入門学習スタイル：テキスト jQueryのメソッドやAPIをまとめたサイトです。チュートリアルサイトというより、自分でjQueryをかくようになるとお世話になるサイトです。隅々まで解説してあるので、先に全体像を知っておきたいという方にはおすすめのサイトです。とほほのjQuery入門 10. CODEPREP 学習スタイル：ハンズオン(画面上で書きながら) Web上でコードを実行できるサービスである「CODEPREP」です。コードを書いてそのコードの解説まで行ってくれるので、コードを書く能力が身につきます。 CODEPREP 11. ポンクソフト学習スタイル：テキスト JQueryの入門サイトなのですがいきなり3回目でクイズゲームを作るなどかなり実践的で面白いです。その後もいろいろなゲームを作っていくのでやっていっても全然飽きません。ポンクソフト 12. おつぱの表4 学習スタイル：テキスト語り形式でjQueryを学んでいくことができます。優しく面白い口調なのでスイスイ読めてしまいます。7つのサンプルで学ぶことができますがもっともっと欲しくなってしまいます！おつぱの表4 13. Web Design Recipes 学習スタイル：テキストかわいい壁紙とガールズちっくなフォントでデザインも綺麗です。これで分かりやすくストレスなくjQueryの基本からプラグインの使用方まで学べるのでおすすめです。 Web Design Recipes 14. Webデザインラボ学習スタイル：テキストフォントが手書き風で可愛らしいこのサイト、しっかり入門者向けにjQueryを教えてくれます。実践というよりはjQueryを使ってプログラミングの基礎を学ぶのに良さそうです。 Webデザインラボ 15. jQuery write less, do more 学習スタイル：テキスト jQueryの本家大元サイト。英語ですが、もちろん言語作成元ですので正確な情報がきっちりと提供されています。少し敷居が高いかもしれませんが、学習を進めていってjQueryに何か不具合が起きた時などはどのプログラマもここを参照します。知っておいて損はないでしょう。 jQuery write less, do more 16. w3schools.com 学習スタイル：テキストこちらも英語サイトです。jQueryについてやりたいことを左のサイドバーをスクロールすれば見つけることができます。 w3schools.com 17. 読書メモ・感想とWebマーケティング雑感〜jQuery初心者（凡人）が1か月でjQueryを書けるようになった4つのポイント〜学習スタイル：テキストこちらは実際のコーディングではないですが、jQueryを独学で学んできた先輩の意見が伺えます。何事も先人の意見は大切です。是非参考に読んでみてください読書メモ・感想とWebマーケティング雑感 18. commte blog〜今風になった！Web制作で使える最近のjQueryプラグインまとめ〜学習スタイル：テキスト jQueryはプラグインを使うともっともっとすごいことがたくさんできます。むしろそっちの方が真骨頂と言えるでしょう。こちらのサイトはそのすごいことができるjQueryのプラグインをまとめてくれています。気に入ったものがあれば是非インストールして使ってみましょう。 commte blog 19. Coliss 学習スタイル：テキスト jQueryを使ったプラグインですごいもの綺麗なものがみられます。いきなりここまで行くのは難しいかもしれませんが、みてみて「こういうことができるんだ!」ということを理解して、憧れを持って勉強を始めてみるのもいいのかもしれません。 Coliss 20. AWWARDS 学習スタイル：テキストこちらは英語ページですがjQueryのWebサイトの特に優れたものを集めたものです。もうリストを見ているだけでワクワクしてきますね。海外のレベルの高さに是非触れてみましょう。 AWWARDS 今回はjQueryの入門サイトを紹介していきました。ここで挙げたサイトを参考に勉強を頑張っていきましょう。 jQueryを学習できる本も合わせてご覧ください。 TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

動きを簡単に実装する！jQuery UIを利用する方法【初心者向け】

JavaScriptのライブラリであるjQueryのjQuery UIを利用する方法を解説しています。 jQuery UIという動きを簡単に実装できる便利なツールの使い方を紹介しているので、jQueryを学習している方はぜひ参考にしてみてください。いろんな動きを手軽に表現することができるはずです。なお本記事は、オンラインブートキャンプフロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。 jQuery UIとは jQuery UIとは、jQueryの便利な機能をまとめたツールのことです。 jQueryは、もともJavaScriptを使いやすくするためのライブラリでしたが、そのjQueryをさらにパッケージ化したものなので非常に使いやすいものになっています。例えば、日付を入力する際にDatePickerを使ったり、入力の自動補完であったり、使うユーザーにとって嬉しい機能を簡単に実装することが出来ます。大石ゆかり jQuery UIというのは何でしょうか？田島悠介ユーザーインターフェースに特化したjQueryのライブラリのことなんだよ。大石ゆかりユーザーインターフェース(UI)というのは、デザイン的なことですか？田島悠介そうそう。操作や、部品的な素材、表示効果などに特化しているんだ。さっそくjQuery UIを実際に使用してみよう！ jQuery UIを利用する方法 jQuery UIの導入自体は二行で終了します。 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 一行目はjQueryを読み込むためのコードです。二行目がjQuery UIを読み込むためのコードです。 jQuery　UIはjQueryを使用して書かれているので順番を間違えるとエラーが出てしまうので気をつけて下さい。 [PR] フロントエンドで副業する学習方法を動画で公開中実際にjQuery UIを使用してドラッグしてみる。 div要素を自由にドラッグできるコードを書いてみます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script> $(function() { $("#div1").draggable();

JavaScript

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

TechAcademyでは、2015年6月14日に『非エンジニアサミット「プログラミングをシゴトにする」』というイベントを開催しました。これからプログラミングの学習を始める方を対象に、第一線で活躍するエンジニアから直接話を聞けるイベントです。第1回目となる今回は、株式会社クラウドワークスCTOの大場光一郎氏、株式会社Fablicの堀井雄太氏をゲストとしてお迎えしました。本記事ではイベントレポートをお届けします。これからプログラミングの学習を始める方は参考にしてみてください。ゲスト大場光一郎氏（株式会社クラウドワークス執行役員CTO） 2001年、伊藤忠テクノソリューションズ株式会社へ入社。在職中、Rubyの導入支援やRubyを用いたクラウドサービスの開発・運用に従事。グリー株式会社インフラストラクチャ部門にて、開発環境からプロダクションをつなぐDevOps周りを担当し、GitHub Enterpriseの導入による開発品質の向上や、デプロイメント支援システムをRubyで開発。 Rubyやソースコード管理に関する講演、著書多数。 2014年1月、株式会社クラウドワークスに参画、執行役員CTOに就任。堀井雄太氏（株式会社Fablic チーフエンジニア）「Fril(フリル)」を開発しているエンジニア。2007年、株式会社ECナビ（現：VOYAGE GROUP）に新卒入社。比較サイトの運営やディレクトリ検索サービス、広告配信システムの開発などを経験。2012年、株式会社Fablicを創業し女性向けのフリマアプリ「Fril」を開発、インフラ、サーバーサイドの開発担当。クラウドワークス大場氏講演まずは、大場光一郎氏から講演いただきました。講演では、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することをお話しいただきました。エンジニアになったきっかけ学研の教材に載っていたマンガがきっかけでBASICを使ってプログラムを書いてゲームを作りながら自分でやってみようと思ったのが、一番最初にプログラムを書くことのスタートだったとのこと。その後は、ハードウェアを組み合わせた業務システムを開発している会社に入社。当時は「プログラムさえ書ければいい」と思って社会人をスタートしたそうです。その時のことを大場氏は「今から考えると当たり前ですが振り返るとコードを書けるだけで会社を選ぶのは良くない」とも語りました。またその頃、働いていた会社とは別に、オープンソースを開発するプロジェクトに入り、そのプロジェクトの開発者との交流を通じて、組織の垣根を越えてプロジェクトを進めることを経験したそうです。そのため、大場氏の考え方の根本は「オープン」。実際仕事の中でもオープンソースのように仕事をしているのが特徴なんだそうです。クラウドワークスでの開発体制クラウドソーシングサービスのクラウドワークスの開発体制はどうなっているのでしょうか。特徴は、UX改善会を開催してユーザー体験を大切にした開発を重視していること。「UX改善会」は、3、4人のチームを組んで、ユーザー視点でサービスを使い、サービスにおける課題を見つけ、改善案などをプレゼンテーションに落とし込んで全社員に発表するというもの。社員はもちろん、エンジニアインターンの学生から率直な意見を聞いて改善に役立てているといいます。この取り組みにより、サービスを使い続けていると当たり前になって気づかないことを、改めてフレッシュな気持ちでサービスを見つめられ、実際にサービス落としこんで、日々改善ができているんだそうです。開発分野の他に、クラウドワークスでは日報の書き方にも工夫があり、お互いがどんな仕事をしているか共有し合えるように、他の部署の人でもわかる言葉で伝えることを推奨しているそうです。これからエンジニアを目指す人に期待すること大場氏は「今は技術が折り重なってできているので、深堀りすればするほど深いし、技術の移り変わりも早いので、エンジニアとしては多層的に折り重なる技術を同時に理解できないといけない状況です。」とエンジニアとして必要なことを語りました。そのような状況の中で、初心者としてプログラミングをはじめるのは、チュートリアルなどが充実しているため、比較的簡単で、初心者から中級者に上がるにはいろいろな技術をキャッチアップする必要がでてくるため、1人では限界があるとのこと。そのため大場氏は、勉強会を通して仲間を見つけることや、プログラミング学習のサービスの活用などを推奨しているそうです。また、JavaもRubyも最初は「おもちゃ」と言われていた背景があり、「おもちゃ」と言われているような技術を使ってみることの大切なんだそうです。「イノベーションを起こすようなものは最初おもちゃのように思われがちですが、だからこそチャレンジすることが今後のエンジニアに必要なのではないか」と大場氏は締めくくりました。 [PR] フロントエンドで副業する学習方法を動画で公開中Fablic堀井雄太氏講演続いて、堀井雄太氏に講演いただきました。大場氏と同じく、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することお話しいただきました。エンジニアになったきっかけもともとは経済学部出身で、大学でもプログラミングの授業で受けていたわけではない、いわゆる文系プログラマーだという堀井氏。それでも大学生のころから漠然とWebサービスを作ってみたいと思っていたそうです。そこで大学生のうちにいろいろな会社でインターンをとして働いていたのがプログラミングを学ぶきっかけ。最初はHTML/CSSを使ってWebサイトを作るところからはじめ、本を読み込んでサービスを作ってみるなど独学で学んだとのことです。その後、ECナビ（現在のVOYAGE GROUP）に新卒で入社し、自社プロダクトの開発と運用をして、後半の2年はインフラの部署に所属されていました。会社に所属することのメリットとしては、独学よりも体系的に学べる、先輩や同僚がいることで成長できるなどを挙げていました。堀井氏が講演の中で話した、「エンジニアとしては遅咲きだが、遅いということはない。意志があれば、とりあえずやってみるのが大事」という言葉が印象的でした。 Frilの開発体制株式会社Fablicは、2012年7月にフリマアプリのFril（フリル）をリリース。累計ダウンロード数が300万を越えているといいます。現在は、12、13人のメンバーで開発しているそうです。エンジニアはまだまだ増やしたいとのことで、募集も随時行っているとのこと。開発体制として特徴的なことは、ユーザーと一緒に開発すること。実際にFrilを使っているユーザーをカスタマサポートとして採用しているそうです。開発の現場にユーザーがいて、「困ったことがあったらユーザーに聞く」が信条で、実際の開発フローにユーザーが関わるようにしているといいます。これからエンジニアを目指す人に期待することどんなエンジニアになるかを意識することが大事とのことです。会社のフェーズによってエンジニアに求められることは違うので、技術の経験たくさんを積むことが大事。堀井氏自体も、サーバーサイドもインフラも関わってきましたが、今では全てが関係しているそうです。それぞれの領域を学んでいく中で、強みを形成していくのが良いとのことでした。また、技術を学ぶだけでなく、行動して実践することも大事。チームで開発できる、社内で共有できる、社外にアウトプットできる、リーダーシップを発揮できるなど、技術をもとに行動することが今後のエンジニアに求められていると語っていました。また、最後には「ものづくりは楽しいので、楽しみながら開発していくのが大事」というメッセージで堀井氏は締めくくりました。パネルディスカッション「これからのエンジニアに必要なスキルとは」続いて、大場氏、堀井氏によるパネルディスカッションです。モデレーターはTechAcademyを運営するキラメックス株式会社の代表取締役社長の村田がつとめました。パネルディスカッションでは、事前に参加者から募集した質問をもとに回答いただきました。質問はこれからエンジニアになっていくことを想定して、下記のセクションに分けて進めています。エンジニアになる前の段階エンジニアとして働く段階エンジニアとしてさらにスキルアップする段階エンジニアになる前の段階（村田）それではパネルディスカッションを始めていきます。非エンジニアの方のプログラミング学習が一歩前に進むきっかけになればいいなあと思っています。最後には会場のみなさんからの質問も受け付けます。（村田）まず1つ目の質問ですが、「どのプログラム言語から勉強するべきか」という疑問にお答えいただこうと思います。これみなさん非常に悩ましい点だと思うのですが、このあたりお二人はどのようにお考えでいらっしゃいますか？（堀井）最初はPHP、Perl、Rubyあたりから始めるといいのかなあと思っています。理由は、コミュニティが活発なので困ったらそういうコミュニティに相談して聞く環境があることですね。あとは、実際に企業に入ってみて使われていることも多いです。実際、私が新卒で入った会社も主要な言語がPHPであとPerlとRubyも少しあったので就職するときも有利だと感じています。（村田）なるほど。大場さんはいかがでしょうか？エンジニア歴も長いと思いますが。（大場）最初に触る言語としては僕はなんでもいいかなと思ってるんですけど、子供向けや教育向けと呼ばれる機能が制限された言語よりは汎用的な言語を使った方がいいかなと思っています。それがコンピュータが本来持っている能力を引き出せる可能性があるという理由です。なので、あんまり学びやすさとか初心者向けといった軸で選ぶよりは、なんでもできるような言語を選ぶのがいいのではないでしょうか。（村田）では続いてプログラミングを勉強する段階になった際に「どこから着手すればいいか」という質問に入っていきたいと思います。具体的にあれば教えていただけますか？（大場）さっき話したことと関係しているのですが、一つのサービスを成り立たさせるためにはいろんな技術の積み重ねがあって、一部分だけわかっててもサービスとしては成り立たないことがあります。だから、どこからというよりは「これが作りたい」とか「こんなサービスをやってみたい」といったところを目指して、それに足りないのはどこなのか、簡単そうなのはどこなのか、一番難しそうなのはどこなのか、そういう切り分けでちょっとずつ自分がどこにいるかわかるように進めるのがいいんじゃないかなと思います。この言語を覚えたいといった学習の仕方だとモチベーションが続かないと思うんですよね。（村田）それはありますよね。（大場）コンピュータという分野も3ヶ月勉強した人や10年仕事で使ってますという人とか経験にいろいろあっても、その中で「マスターしました」って自分で言える人はあんまりいないと思うんですよね。すごい奥が深い世界なんで。だからこの言語をマスターするまでやろうとなると結構どこまでいっていいかわからない。なので、道具として何をやりたいかというところを目標にすると続きやすいんじゃないかなと思います。（村田）目的ありきでその言語をツールとして使って、形にしていくところから足りない部分を補うのがいいんじゃないかということですよね。堀井さんはいかがでしょうか？（堀井）大場さんも仰ったように一つを学べば終わりというものではないですね。プログラミングをするモチベーションを保たないと結局意味ないので、自分がこういうのがあったら便利だなというものをとりあえず手を動かしながら作るのがいいと思います。（大場）さっきTechAcademyのオンラインブートキャンプの説明の中で、Twitterクローンを作るというお話しでしたが、あれってどこまでのクローンなんですかね？投稿するだけだと簡単だけどTwitterを真面目に作ると結構難しいと思うのですが。（村田）Ruby on Railsチュートリアルに載ってるくらいのマイクロポストみたいなレベル感ですね。ユーザー登録ができてフォローして、その投稿がそれぞれタイムラインに一列に出てくるクローンです。（大場）フォローもするということは、ある程度データベースの関係性もグラフみたいなところもやるんですね。そういう意味では歯ごたえのある感じですね。（村田）そうですね。実際に世界中で使われているようなサービスに近い形で作る方がモチベーションが上がると思っています。全く使わなそうな図書館データベースを作るよりもTwitterクローン作る方がイメージがわきやすいし面白いなと感じてもらえるはずです。プログラミングを学習するときのモチベーション、特に一人で勉強する時間が長いので、自分がやる気になるようなところから始めるのがいいのかもしれませんね。（村田）では次にいきましょう。「プログラミング習得をする上でつまずきやすいポイントとその解決方法」について聞いてみたいと思います。堀井さんいかがですか？（堀井）つまずくところいっぱいありますね。特に、環境構築が一つのハードルになるかなと思ってます。弊社でもインターンに来てもらうことが多いのですが、プログラミングを書き始めるまでの開発体制を整えるところで時間がかかることがあります。ただ、今はEC2とかHerokuとか、必要なパッケージがそろっている状態で始められるものもありますね。無料プランを使うか、少しお金を出せばサーバーが簡単に手に入るので、うまく使って最初のハードルを乗り越えてから本を一冊写経してみるといったことから始めるのがいいのかなと思ったりしますね。（大場）個人的には難しいところって技術と技術の境目の部分かなと。例えば、Rubyだとアプリケーション開発の知識がいるし、データベースにアクセスするときにSQLみたいな言語をわかってないといけないし、両方わかってないといけないようなシチュエーションがサービス開発の中でたくさんあります。両方の知識が求められるところでハードルがぐっと上がって、新しいことを覚えるのが難しいのかなと思いますね。その解決方法としては繰り返すということですかね。繰り返していると、「これはこのことだったんだ」みたいに理解できることもあるので、反復するところがコツかなと思っています。もう一つつまずきやすいところとしては、技術の中でそもそも難しいところです。C言語だったらポインタ、Rubyだったらブロックとかですね。そもそも考え方が難しいものがいくつかあって、それを変な例えで理解しようとしても、結局どこかで嘘が入っていたりして本質的には理解できないところがあります。それは難しいものだと受け入れて、わかるまで何回も繰り返すところが必要なんじゃないかなと思っています。（村田さん）そうですね。僕も最初はPHPから始めたんですけど、クラスみたいな概念がそもそも理解できなかったです。その時は、10日くらいわからないまま続けたら理解できました。繰り返しながらやっていくと、ピーンとわかるときがくるので諦めずに繰り返すのが重要ですね。（大場）悟るまでですね（笑）（村田）悟りが降りてきますからね。さて次の質問ですが、「おすすめのプログラミング学習方法はありますか」ということです。いま繰り返しやるとありましたけれど、もうちょっと具体的に聞きたいと思います。大場さんは仕事を始めてから学んだという感じですか？（大場）まあプログラムを書くのがもともと好きでゲームをつくるなかで学びました。Windows3.1が出たときに「マインスイーパ」というゲームが入っていたのですが、当時Windowsが動くパソコンがすごい高かったんですよね。なので、みんなができるように、MS-DOSのキャラクターベースでできるマインスイーパを開発してみんなに配ったとか、そのなかでいろんな技法みたいなものを学んでいったというところです。今はほんと一つのアプリケーションを成立させるのにいろんな技術が必要なので、競争仲間であるとか教えてくれる先輩とかそういう人がいる環境に身を置くところが大事かなという気がします。（堀井）小さいところから考えて手を動かすのがいいかなと思っています。会社に入ってみて思ったのが、システムって完璧じゃなくてすでに困っている人がいるんですね。そこで私もわからないなりに、管理画面にあったらいい機能とかを他の部署の人から聞いたりして、改善や機能追加できるところを調べながら徐々に開発技術を学んでいくところがありました。あとは、勉強会もおすすめです。新卒で入った会社では勉強会を定期的に開催していたので、自分の回が来たら学んできたことを発表しなきゃいけない場がありました。そういう半ば強制的にでも自分のスキルを底上げするようなイベントに身を置いてステップアップしていくのはいいかなと思います。（村田）なるほど。僕も自分で学習してきていたときは、何かインターネット上で気になるサービスをまねてそれと同じ動きを作ってみることをしていました。あとは、わからないところでずっと迷ってるとやる気がなくなっていくので、すぐ人に聞くというのは結構重要ですね。僕は新卒で楽天に入ったので、エンジニアの部署にいる同期を休日にカフェとかに呼び出して、わからないことを聞くというのを結構な頻度でやってました。（大場）あとはオープンソースの開発に関わっていくこともいいですね。そんなに難しくなくても手が足りないというプロジェクトはたくさんあって、それこそプログラムだけじゃなくてドキュメントの追加みたいな簡単なところから手伝うこともできます。それでコミュニティの人たちの顔がわかってきて、だんだん開発に協力していく中でいいプログラムをたくさん読んで、自分がやるならどうしようみたいなことを考えたりすることがスキルアップにつながると思います。エンジニアとして働く段階（村田）では次の項目に入っていきますね。「採用したいと思うエンジニアの特徴」について聞いてみたいと思います。具体的にこんな人がいいなというものがあれば教えていただけますか？（堀井）大前提としてプログラミングが好きなことが当てはまるのかなと思っています。やっぱ好きな人って勝手に自分でどんどん技術習得して、自分自身でスキルアップしていくので根本的にプログラミングが好き、ものづくりが好きという素養はまず見てますね。あとは、Githubとかを使って自分が書いたコードを他の人に見てもらう、シェアするみたいな文化があると思うんですけど、自分の恥をさらすことができる、自分の持っていることをシェアするとかオープンさみたいなものを持っている人は素晴らしいかなと思いますね。（大場）堀井さんのお話の中でもサービス志向のエンジニアみたいな話題がありましたけども、スキルはすごい優秀だけどうちの事業にそんなに興味ないみたいな人は今のステージでは採用が難しいです。なにかしら共感をもってるところのプラスアルファでエンジニアリングを見て採用してます。（村田）会社の規模とかフェーズによっても変わってくるかなと思うんですけれども、やっぱりそのそもそものエンジニアとしてのプログラミングが好きであったりとか、サービスが好きみたいなところは基本的には重要ですよっていうことですね。（村田）では次です。「優秀なエンジニアはどうやって見極めているんですか？」という質問です。大場さんいかがでしょうか？（大場）正直言って僕もこれだというものはないですけど、一番確実なのは一緒に働いたことがある人ですよね。やっぱりいろんな会社にいると、こいつは本当にすごいみたいな人が何人かいたりします。（堀井）優秀の定義にもよるかなと思うんですが、見極めるとしたら今はGitHubとかあるので、どういうコードをその人が書いているのか、アプリなど個人でプロダクトを出しているのかとか見たりしますね。（村田）結局その人がどういう人かとか、どれくらいできるのかっていうのが見えるかどうかっていうのは結構重要なのかもしれませんね。ポートフォリオなりGitHubなり、今だとそういうのが結構アピールしやすい時代かなと思います。（村田）次に行きますね。「プログラミングスキル以外でエンジニアに求めることはありますでしょうか」という質問です。堀井さんどうでしょうか？（堀井）これはもうたくさんあります。まず弊社もベンチャーなのでプログラミングだけできる人は結構厳しいのかなと。具体的に言うと、やっぱコミュニケーション能力が高い人がいたら嬉しいです。実際、弊社はユーザーにヒアリングすることがあるので、ちゃんとそのユーザーさんとコミュニケーションが取れるかとか、仕様が上から降ってくるのを待つのではなくて自分で考えたものをデザイナーやディレクターに発表して巻き込んでいく力みたいなのが問われるシーンが多いです。（大場）エンジニアに求めるコミュニケーション能力でいうと、そもそも人と話すのが苦手だからコンピュータを扱う仕事を選んだみたいなところもあると思うんですよね。立ち上げ初期のベンチャーだと、とにかく作るというところがメインになっていて、そんなにコミュニケーションする必要がなかったりします。でも組織がちょっと大きくなってサービスが伸びてくると、ある時点からチーム開発みたいなものが求められて個人技だけでは限界がきたりします。そういう時にちゃんと自分に求められている役割の変化を感じて、それについてこれるかは考えてほしいなと思ったりします。具体的にはさっきの仕様の話だと、ゆるふわで落ちてきた仕様に対してこんな仕様でできるかと思うか、僕が決めてもいいんだというように受け止めるかで大きな違いがあると思うんですよ。それってエンジニアリングのバックグラウンドがあって、そういう幅のある仕様のなかで可能性として見られるかどうかっていうのは大きな違いじゃないかなと。（村田）自分から能動的に動いて、与えられたものだけじゃなくてしっかりそれ以外も自分で発信できるっていうことを理解した上でスキルを上げていけるような方が優秀になってくるし、それが求められるかもしれないですね。（村田）次の質問ですが、「エンジニアとして働き始めてからどんな勉強が必要ですか」とのことです。基本的にはエンジニアは日々勉強みたいなところがあると思うんですけど、そういったこと以外に何か具体的にあれば教えていただけますか？（大場）最近だとエンジニアの向かう方向性としてフルスタックみたいに、いろんな層の技術をまたがって自分一人でもサービス立ち上げができるみたいなところを目指したりもしますけど、実際本当に伸びてくサービス開発のなかでフルスタックになっていくのはめちゃくちゃ難しいと思っています。他に得意な人がいればなかなか手を出すのも難しい、どこをやってもいいよと言われても躊躇してしまうというところがあったりします。その中でできることは、一つひとつ極めていくところだと思っています。ただ、一個の技術だけで戦ってるとやっぱりリスクも高いので、次はこの専門家になろうみたいな二つ掛け合わせるものが何かあるといいんじゃないかと思います。（堀井）私はどういう勉強をしてたかなと思い返してみると、やっぱり学んでいくには段階的になると思うんですよね。一つの言語を学んで、データベースのことも学んで、今度はその言語の上に動いているフレームワークのことを学んだりと段階的に自分が学んだことに派生して勉強してきました。なので、最終的に自分が得意であると言えるくらいのところまで行けるように深掘りして、一つの技術を学んでいくのがいいのかなと思いますね。エンジニアにもスペシャリストを目指すのか、ジェネラリストを目指すのかいろいろ方向性があると思うんですけど、ひとつ自分はこういうエンジニアだとか自分の代表するプロダクトはこれだとか、そういうものを作れるようになるまでは深掘りすることがいいかなと思いますね。（村田）やっぱりエンジニアとしてどこか一つでもいいので、ある程度極めるというか、できたというところまでやって、そこからスキルの掛け算みたいなところが重要になってくるということですよね。エンジニアとしてさらにスキルアップする段階（村田）最後の項目に入っていきたいと思います。「エンジニアとしてどんなキャリアパスが描けると思いますか」という質問ですが、エンジニアとしてキャリアの長い大場さんお願いできますか。（大場）いまエンジニアの責任者として会社の中での役割を担っていますが、究極的には「事業のためにエンジニアリングをどうするのか」みたいな話になっていくかなと思っています。なので、技術だけではなくて、最近だとよく読んでいるのはマネジメントの本とかビジネス書みたいなところからキャッチアップするような勉強をしたりしてます。（村田）技術だけではなくて、その先の事業をテクノロジーで解決していくみたいなところに進めるようなパスがいいんじゃないかという話ですよね。（村田）では次に、「エンジニアが仕事したいと思う環境はどんなところですか」という質問です。堀井さんいかがでしょうか？（堀井）やっぱりエンジニア目線でいうと自由度が高いであるとか、個人の裁量が大きい方がチャレンジングなことがしやすいですよね。なのでそういう環境をいまの会社で作っていきたいと思ってます。弊社ののコアバリューがいくつかあるんですが、「エンジニアもチャレンジする」というのもあります。ある程度エンジニアの裁量でどういう設計をするかなど決められるような体制になっているので、自分がいいと思ったものをすぐ試せる環境があるのはエンジニアにとっていいのかなと思いますね。（村田）なるほど。では最後の質問として「エンジニアとして成長するためにどんな人がいる会社で働くべきだと思いますか」という質問です。いかがでしょうか？（大場）前職のように本当にエンジニアリングに関して職人みたいな人がいっぱいいるところにいて感じるのは、自分より優秀な人がいるところに身を置くことですね。自分が一番下手になって、あとは登っていくしかないみたいなイメージです。例えば、学生時代にインターンで初めてプログラミングをして、ベンチャー企業を手伝いながら一番下っ端でがんばってたらいつの間にか自分が一番詳しくなっていた。その後、さらに強い奴に会いにいきたいと言って弊社にジョインしてくれたエンジニアがいます。僕自身もいかに自分より優秀な人に来てもらうか、自分自身がキャップにならないようにすごく気をつけていて、優秀な人が活躍できるような環境や会社やサービスが大事だなと思っています。（堀井）これは私もほとんど同意見なんですけれども、自分よりも技術において素晴らしいと思った人がいるところですね。あとは、自分のスキルセットに近しいのを持っている人がいるような環境にいくと、自分のやろうと思っていることが一段引き上げられるのでいいのかなと思っています。あと最近は勉強会とか発表された資料とかがWebサイトにいっぱい上がっているので、そういうのを参考にしながら企業を選んだりするのはいいかなと思ってます。会場からの質問（村田）ここからは会場からの質問を受け付けたいと思います。ーー大場さんにお伺いしたいのですが、ご自身が英語情報で技術をキャッチアップするために気をつけられていることや、社内の方に英語の情報をキャッチアップするためにどんなことをしているのか教えていただけますでしょうか。（大場）今やってることでいうと、オープンソースコミュニティがだいたい英語ベースになっています。日本人しかエンジニアがいないプロダクトでもコミットとかは英語じゃないと受け付けない感じだったりします。社内に関しては、こうしないとみたいなものは今はないのですが、今週の気になる技術みたいなのを社内のGitHubにスレを立てて共有して、みんなが気になった技術は突っ込むようにしています。そういうときに情報ソースが英語のものがたくさんあるので、おのずと危機感が醸成されればと思っています。（村田）他のご質問はいかがでしょうか？ーーエンジニアが少なくて採用が大変だみたいなことを何かで読んだのですが、雇われる側としてどう感じておられるかということと、あと村田さんは育てる側としてどう思われるか教えていただけますでしょうか？（村田）まず育てる側の僕の方から話をさせていただきますね。まずエンジニアが足りてないところは事実です。エンジニアの採用が難しいっていうのは、そもそもマーケットに人材が少ないから取り合いになってるっていうのが一つあります。あとは統計的にもアメリカでは2020年には100万人エンジニアが足りなくなると言われています。日本でも2020年には20〜30万人ぐらいは足りなくなると言われています。インターネットを使ったビジネスはすごい盛り上がって市場も拡大しているのに、そこで働く人が増えていなければ足りなくなりますよね。僕らはそれをエンジニアを増やすことで解決したいと思っています。エンジニアになりたいという方は多いと思っていて、それでも増えないのは仕組みの問題もあると思っています。それが解決できる仕組みがあれば、人が足りないということに対してひとつの力になれるんじゃないかなと。エンジニアが足りないということに対して、大場さんはいかがでしょうか？（大場）エンジニアが足りないと言ってる会社も、2種類あるかなと思っています。 1つはよくよく聞いてみると、あまりエンジニアを大切にするような文化がなくてエンジニアが定着しない会社です。そういう会社の方は、「来てくれても半年くらいで辞めるから、辞めると思ってアウトソースすればいい」といったことを仰る場合もあります。こういったことが負の循環になって常にエンジニアが足りないことが常態化してしまう。僕らみたいなエンジニアリングの重要性を理解していて、Webサービス中心の会社だとまったく事情は違っていて、サービスの成長にともなって、さらに成長させるためにエンジニアは、明確に足りていなくてまだまだ必要だと思っています。TechAcademyさんみたいな取り組みでエンジニアが増えていくのはこれからの日本にはものすごい必要だなと思っています。（堀井）ベンチャーで最近伸びているサービスであれば、やっぱりどうしても人が必要になってきて、実際に弊社でもエンジニアは常にどの職種も募集しています。私もベンチャーの友達とか知り合いも多くて起業する人もいるのですが、その立ち上げにはやっぱりそれなりにWebのことがわかる人がどうしても欲しくなるんですけど、そういうスキルの高い人たちは大手であるとか名の知れた会社とかに勤めています。そもそもその会社からあまり転職市場に出てこないというのは肌感としてはあるので、僕らみたいなベンチャーはいかにいい人たちを見つけて会社のことを知ってもらって、採用につなげるかについていつも苦労しています。なので、需要はかなりあると認識しています。（村田）最後付け加えますね。プログラミングを習い事の視点でみると、換金性の高い習い事だと思うんですね。というのも、例えば10万円払って勉強してプログラミングが習得できれば10万円以上稼げると思うんですね。もちろんクラウドワークスさんのようなクラウドソーシングサービスで仕事を探してそれに応募して自分で遠隔の仕事をするのも一つだと思いますし、自分でメディアを立ち上げるのというのも一つでしょうし。そういった意味でも企業に入るだけじゃなくて働く方法はいくつかあると思います。（村田）お時間になりましたので、最後にこの会の締めくくりということで「これからプログラミングを学習するみなさんへのメッセージ」をお二方からお願いします。まずは堀井さんお願いします。（堀井）私も最初はプログラミング初心者だったんですけど、いろいろ学びながら実際にものづくりができるようになりました。最初はハードルの高い部分もあるのかなと思いますが、楽しみながら学んでいくと自分の可能性も広がって、キャリアを積む上でもいい経験だと思います。ぜひみなさんがんばって欲しいです。プログラミングは楽しいです。（大場）僕からは作るだけじゃなくて問題解決していこうみたいな話もしましたけれども、一方で何かを作り出す・生み出すということは本質的に楽しいことだなと思っています。例えば、快適に作るための環境を整えることに丸一日費やすとか、自分のエディタの設定とか、これだから開発しやすいみたいなことを考えながらものづくりを純粋に楽しむところも実際にあるんですね。そういった気持ちってなかなか社会人になってしまうと忘れてしまったり、思い出せなかったりとかあると思います。今だと、エンジニアになろうみたいなフェーズだといくらでも失敗できるので、何度も作ったり壊したりしながら、ぜひものづくりの楽しみというところを大切にエンジニアを目指していただければなと思いました。（村田）堀井さん、大場さん今日はどうもありがとうございました。イベントレポートは以上です。 TechAcademyではこれからもプログラミング学習者のためのイベントを開催していきます。

イベントレポート

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次レベル別書籍まとめJavaScriptとは1. 確かな力が身につくJavaScript(初級)2. JavaScript本格入門(初級)3. JavaScript入門: 作って楽しむJavaScript(初級)4. 何となくJavaScriptを書いていた人が一歩先に進むための本(中級)5. jQuery入門道場(中級)6. JavaScriptライブラリ実践活用(中級)7. JavaScript 第6版(上級)8. JavaScript Ninjaの極意(上級)9. JavaScriptグラフィックス(上級)10. JavaScriptエンジニア養成読本(上級)おわりにそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！大石ゆかりえっ？オセロゲームを作るなんて、難しそうですね、、、田島悠介大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。大石ゆかりはい！よろしくお願いします！はじめに対象読者本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！入門向けのJavaScriptを学習できるサイト本記事の目的本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。設計から実装までの、エンジニアの思考プロセスを体験するゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛えるオセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！注意点本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間ゲームに限らず、いかなる実装においても設計は非常に重要です。機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。オセロゲームのルールを確認しようオセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。まずは前提条件となるオセロゲームのルールを確認していきます。オセロゲームのルール盤は8×8マスを利用する初期状態で真ん中の4マスに白黒の石を交互に配置する先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく石を置ける場所は、下記の条件を満たしている置くマスに他の石がないこと置くマスの上下左右、斜め1マスの場所に相手の石があること置いた石、相手の石があった方向の延長上に自身の石があること石を置ける条件を満たせない場合は、パスをして相手の番になるすべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）ゲーム終了時点で石の数が多い方が勝ちとなる以上がオセロゲームのルール概要です。ルール以外の要件を定めようゲームのルールのほか、今回の実装では以下の条件を適用することとします。自動でパスする機能は実装せず、「パス」ボタンを設置する「現在どちらの手番であるか」を表示するゲーム終了後、白黒それぞれの石の数と勝敗を表示するゲームの初期化機能は実装しない石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない画像は用いないそれでは、要件を確認したところで実際の設計に移りましょう。要件に沿って実装設計をしてみよう同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。本記事の執筆者は、以下のように流れを作成しました。上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。本セクションは以上です。休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。 [PR] フロントエンドで副業する学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分今回の開発に必要な環境は以下の通りです。コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）コードエディタを用意しようコードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説 Webブラウザの環境を整備しよう主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。必要なフォルダとファイルを作成しようまずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。（例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。 HTMLをコーディングしよういよいよコーディング作業に入ります！今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body>  <div id="stage" class="stage"></div>

JavaScript

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Doru Ciobanu氏によって投稿されました。 jQueryはまだ必要でしょうか？リリースから約10年が経過した現在、jQueryは、最も普及しているJavaScriptライブラリです。10年前のブラウザのエコシステムにおいては、HTMLのDOM操作の複雑さを最小限に抑えるために開発されたブラウザ同士の戦争が繰り広げられていました。こうした状況で登場したjQueryはクロスブラウザを実現できたため、数多くのエンジニアを混乱から救ったのです。基本的にjQueryは、粗悪なネイティブAPIに代わる新しいAPIを開発し、ネイティブAPIでサポートされていない機能を実装し、バグのあるネイティブ機能の複製からバグのない機能を作成しました。 JavaScriptコミュニティの中には、ブラウザ間の不規則性に対処できるjQueryのメリットは非常に誇張されており、実際にはquerySelectors( )メソッドの実装があるためにjQueryは人気を得ているのだと主張する声もあります。現在のブラウザのエコシステムは10年前ほど複雑ではありません。一部のブラウザにおいてはHTML5のいくつかのAPIに非対応であることもありますが、以前ほど問題となることはありません。Chromeで何も問題がなければ、FirefoxやEdgeにおいても上手くいくでしょう。 jQueryは生産性と効率性を向上することができる、きちんと整理されてドキュメント化された、数多くのプラグインを提供しています。以下に、無料の素晴らしいjQueryプラグインのリストを挙げています。ぜひ使ってみてください。 1. Freewall FreewallはクロスブラウザなjQueryの豪華なプラグインであり、CSS3のアニメーション効果を伴うグリッドレイアウトを構築することができます。フレキシブルレイアウト、画像を使ったレイアウト、ネスト構造のグリッドレイアウト、Pinterestのようなレイアウトなど、どのようなレイアウトを構築するとしてもFreewallは、デスクトップとモバイル両方において動的なグリッドレイアウトを構築できるオールインワンのプラグインです。旧IE8を含むほとんどのブラウザをサポートしていて、汎用性の高いツールです。 2. multiscroll.js multiScroll.jsは、Webサイトに多方向スクロールを追加するのに役立つ優れたプラグインです。2つの垂直方向のレイアウトまたはパネルを備えた、マルチスクローリングなWebサイトの構築を容易にします。 UXを損うことなく、最初のページでユーザーの注目を集めることが図られています。すべてのモダンブラウザで完全に機能し、従来のブラウザでも上手く機能します。言うまでもなくこのプラグインはモバイルフレンドリーです。 [PR] フロントエンドで副業する学習方法を動画で公開中3. rowGrid.js Googleの画像検索の表示のように、画像をすっきりとディスプレイすることができるプラグインです。親要素に合わせて、他の要素は行方向にまっすぐに並ぶように自動的に最適化されます。このとき全体的なバランスが取れるように、要素間の余白は調整され、要素のサイズは縮小されます。ただし同じ高さの要素を使わなければ、プラグインは正しく機能しません。 4. Slidebars Slidebarsは、プッシュメニュー（クリックすると開くメニュー）やサイドバーなど、canvas要素以外の要素をWebサイトに追加するのに役立つjQueryプラグインです。バージョン2は、マークアップを完全に書き直して改良され、canvas要素以外の要素を無制限に使用できるようになりました。 5. pagePiling.js シングルページのWebサイトを構築するときに最適なプラグインの1つです。スクロールのイベント発生時に、インターフェースは複数のページで構成されているように動作し、ユーザーに印象的なエクスペリエンスを提供できるでしょう。ナビゲーションの方向、スクロールの速度、アニメーションは自由にカスタマイズ可能です。カスタマイズに関してはこのプラグインの可能性は計り知れません。また完全にレスポンシブデザイン対応であるため、すべての画面上で正しく動作します。IE8を含めてほとんどのブラウザに対応しています。 6. Animsition Animationはページ間の自然な遷移を実現することで、楽しいユーザーエクスペリエンスを提供することが主な目的です。軽量なプラグインであり、ページ遷移に伴うスムーズで美しいCSSアニメーションを作成できます。標準的なフェード、フェードアップ、フェードダウン、回転、フリップx / y、ズームを含む60以上のさまざまな効果を表現できます。Animationは必須のプラグインです。 7. ZooMove マウスオーバーのイベント発生によって拡大される画像は、私は個人的には好きではありませんが、実装する必要がある場合にはZooMoveを使います。この洗練されたプラグインはスムーズで使いやすいです（添付したGIF画像だけでは十分に良さをお伝えできません）。 8. Rippleria Rippleriaは、Googleのマテリアルデザインからインスピレーションを受けた、軽量のjQueryプラグインです。クリック・タップのイベント発生によって波紋の効果が発動することで、ユーザーの視覚的なエクスペリエンスを高めます。 button要素、アイコン、div要素、image要素などのDOM要素に応用することができます。実装とカスタマイズは簡単です。 9. Flickity Flickityほど詳細なドキュメンテーションを備えたjQueryはありません。ドキュメンテーションは正確、詳細、論理的に構造化されているので、Flickityの開発者はドキュメンテーションの最高賞を受けるにふさわしいでしょう。製品自体も美しく目の保養です。最も優れたカルーセルプラグインの1つです。タッチフレンドリー、レスポンシブデザイン、フリック操作対応のイメージギャラリーを実装できるプラグインです。個人利用の範囲では無料ですが、商用利用には有料のライセンス契約が必要です。 10. Unslider Unsliderは、Webサイトにスライダを設定するときには最も速く最も簡単なプラグインです。小型ですが柔軟です。オプション、設定、メソッド、コールバックイベントなどを通して自由に変更できます。 11. Lightcase.js Lightcaseはライトボックスのための素晴らしいプラグインです。まだjQuery 3では動作しませんが、開発者は新しいリリースを計画中です。レスポンシブなCSS3アニメーションのライトボックスを作成するための素晴らしいツールです。 scrollTop、scrollRight、scrollLeft、scrollVertical、scrollHorizontal、scrollBottom、fade、fadeinline、elasticなどのメソッドによって、CSS3のアニメーションを表現できます。また、div、image、iframe、videoなどのDOM要素、text、Flashをサポートしています。 12. PhotoSwipe PhotoSwipeは、JavaScriptの画像ギャラリーを実装できる私のお気に入りのプラグインです。指で広げる（ズーム）、ピンチ（閉じる）、縦方向にスワイプ（閉じる）、横方向にスワイプ（切り替え）などのタッチジェスチャーをサポートしています。またシングルタップジェスチャーとダブルタップジェスチャーは、カスタマイズ可能です。他の多くの画像ギャラリーのプラグインと異なり、ナビゲーションフレンドリーな構築が可能です。またキーボードコントロールもサポートしています。HTML5による全画面表示モードによって、ユーザーにイマーシブな体験を提供できます。ページ読み込みが完了するまで、ギャラリーに使われているJavaScriptの読み込みを遅らせるよう設定できるので、プラグインがページの読み込みを遅らせることもありません。また、「ギャラリーを開くボタン」によって、プラグインのみ読み込みを開始することもできます。PhotoSwipeは、レスポンシブデザインの画像を詳細に保存することにも優れています。画像は最大サイズで表示され、表示領域が画像よりも小さい場合には拡大できます。これらの機能を合計しても約14 KBの容量であり、開発ツールキットとして必須のプラグインです。 13. Strip Stripは、Webサイトにエレガントなライトボックスを追加することができる柔軟なプラグインです。滑らかでスマートです。大きな画面においてはページを部分的に覆うだけなので、UIの要素、テキスト、その他のレイアウト部分を表示する余裕が確保されていて、インタラクションの邪魔になることもありません。小さな画面においては一般的なライトボックスとして機能します。このプラグインは使いやすく、調整するために数多くの設定が用意されています。 14. Turntable.js あなたの製品を紹介することができるショーケースのプラグインは数多くあり、玉石混交です。動的でイマーシブな体験を通してユーザーに製品を紹介したい場合、特に実体のある3次元世界の製品を販売しようという場合には、Turntable.jsが良いでしょう。最初に私がこのプラグインを試したときには、360°の全角度からこれほど滑らかなビューを作成できることに驚きました。従来のWebスライダーのスイートパッケージ製品、jQueryのスライダーや画像ビューアなどと比較すると、Turntableは革命的なプラグインです。このプラグインの最大の売りは、ナビゲーションアイコンを使わずに済むことであり、タッチスクリーン上でマウスや指を使って画像を回転・フリップすることができます。インストールは簡単で、クリーンなコードです。 15. Vide.js あなたのWebサイトの背景に動画を追加するための最も簡単な方法は、Vide.jsです。すべてのモダンブラウザでサポートされているため、プロジェクトで素晴らしい外観をデザインするのに役立つでしょう。動画のプラグインに通常期待される設定は備わっているので、あなたが必要とする外観を得ることができるでしょう。 16. Trianglify 背景で動画を再生したくはないものの、普通の画像や背景だけでは退屈だと思う場合には、Trianglifyが良い選択です。独自のアルゴリズムにより三角形のパタンを生成します。分散、セルのサイズ、色は指定できます。急ぎの場合にはTriangle Generatorを使うこともできます。パタンは、canvas要素、svg要素、png形式などにレンダリングできます。またレンダリングの実装をオリジナルに作成することもできます。 17. LazeeMenu Webページのメインメニューをシンプルにしたいのに、メニューツリーが巨大である場合には、追加のサイドバーメニューを使用すれば、使いやすさと完全性のバランスを図ることができます。 LazeeMenuは、順序付けされていないネスト構造のリンクを、複数の階層構造で構成されるナビゲーションメニューに変換します。少しの調整であなたのニーズに合わせたカスタマイズが可能です。 18. Web-ticker 開発したアプリの新しいバージョンを公開したときには、あなたは誇りと達成感を感じるでしょうか？こうしたニュースは世界と共有するべきです。Web-tickerの開発者は、使い始めるときに役立つ手順についてのガイドを提供しています。 Web-tickerには多くの設定が備わっているため、あなたの望む外観のデザインに合わせて微調整することができます。事例として、ニュース、告知、販売などに利用されています。また画像を配置することもできますが、ユーザーを動画で悪酔いさせたくなければ、この機能は使わないことを強くおすすめします。 19. Inputmask UXにおいては詳細が重要であるともいえます。無効な日付形式を入力したときに、フォームに再入力を求められる場面を経験したことはありますか？こうしたことは非常に面倒なので、私はフォームを実装するときには必ずInputmaskを使っています。あらかじめ定義されたフォーマットを保証することでユーザーの入力をサポートできます。日付、数字、電話番号などに使用できます。Inputmuskは軽量なプラグインですが役に立ちます。使いやすく、柔軟性があり、数多くのオプションがあります。また、動的データマスク、正規表現のマスク、オルタネーターマスクなどをサポートしています。 20. jquery.email-autocomplete.js また電子メールアドレスのドメイン部分を自動入力するための単純なプラグインが必要な場合は、jquery.email-autocomplete.jsが最適です。あらかじめ定義済みの電子メールのドメインリストに基づいて、対応するドメインをプラグインが提案してくれます。ユーザーは、タブキーまたは右矢印キーを押すか、提案をクリックすれば、ドメインの残りの部分は自動的にプラグインが埋めます。このプラグインはモバイル環境でも機能します。 21. tinyDatePicker 小さく、速く、拡張性と柔軟性の高い、日付時刻のプラグインとしてはtinyDatePickerがおすすめです。多くの機能が組み込まれていて容量は約5KBです。カレンダー、アジェンダ、予約システムなどがこのプラグインが非常に役立つ場面です。Bootstrapなどの他のフレームワークと統合することもできます。 22. ReadRemaining.js 「光陰矢の如し」ということわざがあります。20のブラウザのタブが同時に開かれ、スマートフォンに多くの通知が表示され、情報が流れ続ける現代においては、ますます読むための時間が少なくなっています。 ReadRemaining.jsは時間を魔法のように止めることができるわけではありませんが、ユーザーにWeb上の記事を読み始めてからの経過時間を知らせることができます。このプラグインはさり気なく、コンテンツを読む邪魔となることはありません。 23. Tooltipster Tooltipsterのツールチップとは、ユーザーのアクションに反応して表示されるテキストラベルのことです。ツールチップは悪用されない限り、アプリのUXを良い方向に強化してくれます。 Tooltipsterは拡張可能なjQueryプラグインであり、ツールチップで豊富な機能を実現するのに役立ちます。誰にとってもシンプルで万能なプラグインです。 24. TableExport.js 簡単に実装できるjQueryプラグインです。たった1行のコードだけで、HTMLのtable要素を素早く動的に、Excelのスプレッドシート、コンマで区切られた値、通常のテキスト、テキスト形式のファイル（.txt）などに変換します。とてもシンプルです。 25. Addel Addelは、form要素を念頭に設計された、HTML要素の動的な追加・削除をUIに実装するための軽量なjQueryプラグインです。このプラグインは直感的で柔軟性があり、動的なフォームを作成するときには時間の節約になります。 26. Chart.js Chart.jsは統計データを表示するのに最適なプラグインです。データの表示には、8つの図表のデフォルト設定を利用できます。拡張性を備えた図表を表現することができます。データを変更時には、遷移アニメーションを実装できます。すべてのモダンブラウザにおいてレンダリングのパフォーマンスも優れています。積極的に開発が続けられているプラグラインであり、定期的に新機能が追加されています。もはや退屈な図表となることはありません。 27. jQuery Flip-Quote テキストに躍動感を持たせるには最高のプラグインです。 Flip-Quoteはドキュメント内のテキスト引用符から引用を作成し、スクロール時に画面に表示されると、引用を表示しながら反転します。ドキュメントの引用元もハイライト表示できます。もはや退屈な引用符となることはありません。 28. Sharetastic あなたのWebサイト、アプリ、製品へのトラフィックを増やしたい場合には、ソーシャルメディアにおける存在感を維持することが不可欠です。Sharetasticはシェアボタンを表示するときに役に立ちます。完全にカスタマイズが可能で、3つのビルトインテーマが組み込まれていて、とても使いやすいプラグインです。 29. HideSeek HideSeekは、あなたが探して求めてきた検索用プラグインかもしれません。検索モジュールとしては最高のインタラクティビティが実現されています。検索された用語をハイライト表示したり、検索結果間にナビゲーションを表示したり、要素を無視したり、アクセント記号付きの文字を無視したり、見出しのあるリストをサポートすることもできます。 30. Timedropper Timedropperは楽しい外観のプラグインです。カスタマイズに優れていて、4つのスタイルオプション：プライマリー色・テキスト色・背景色・ボーダー色と、6つの機能（自動スイッチ・時刻表示形式・フォーマット・アニメーション・マウスホイール・現在時刻の自動取得）があります。 Timedropperと似たもっと多機能のプラグインも他にいくつかありますが、Timedropperは滑らかで直感的で動作を正確に実現できます。また、Timedropperの開発者による他のプラグインとしてはDatedropperがあり、8つのスタイルオプションと8つの機能オプションを備えているため、あなたが必要とする外観を正確に構築できます。おわりに TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。現役エンジニアがパーソナルメンターとして受講生に1人ずつ付き、マンツーマンのメンタリングで学習をサポートし、フロントエンドの技術をマスターすることが可能です。

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【レベル別に紹介！】JavaScriptを勉強できるおすすめの本10選

レベル別書籍まとめ

JavaScriptとは

1. 確かな力が身につくJavaScript(初級)

2. JavaScript本格入門(初級)

3. JavaScript入門: 作って楽しむJavaScript(初級)

4. 何となくJavaScriptを書いていた人が一歩先に進むための本(中級)

5. jQuery入門道場(中級)

6. JavaScriptライブラリ実践活用(中級)

7. JavaScript 第6版(上級)

8. JavaScript Ninjaの極意(上級)

9. JavaScriptグラフィックス(上級)

10. JavaScriptエンジニア養成読本(上級)

おわりに

関連するキーワード

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

今さら聞けない！jQueryとは｜現役エンジニアが徹底解説【初心者向け】

入門に最適！独学から始められるjQueryの学習サイト20選

動きを簡単に実装する！jQuery UIを利用する方法【初心者向け】

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

レベル別書籍まとめ

JavaScriptとは

1. 確かな力が身につくJavaScript(初級)

2. JavaScript本格入門(初級)

3. JavaScript入門: 作って楽しむJavaScript(初級)

4. 何となくJavaScriptを書いていた人が一歩先に進むための本(中級)

5. jQuery入門道場(中級)

6. JavaScriptライブラリ実践活用(中級)

7. JavaScript 第6版(上級)

8. JavaScript Ninjaの極意(上級)

9. JavaScriptグラフィックス(上級)

10. JavaScriptエンジニア養成読本(上級)

おわりに

記事を検索

関連するキーワード

関連する記事

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

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

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