paiza開発日誌

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

機械学習をやるなら知っておきたい、初心者でもきちんと数学を学べる本5冊

f:id:paiza:20170908144414j:plain
Photo by David Joyce
こんにちは。谷口です。

最近「人工知能」や「機械学習」に関する話をよく耳にします。実際に機械学習の勉強をしている人や、機械学習に関連した研究開発の求人を探す人も増えてきたなーと感じます。弊社のITエンジニアにも機械学習を勉強中という人が結構います。

機械学習で難しいポイントの一つが、「ある程度の数学の知識が必要」ということだと思います。「数学についてもうほとんど忘れてしまった」「もともと数学が苦手で苦労している…」という声もよく聞きます。

というわけで今回は、弊社で機械学習を勉強中のエンジニアたちに聞いた、機械学習に必要な数学が学べる初心者向けの書籍をご紹介します。

■高校数学

◆長岡先生の授業が聞ける高校数学の教科書

長岡先生の授業が聞ける高校数学の教科書数学 (考える大人の学び直しシリーズ)

長岡先生の授業が聞ける高校数学の教科書数学 (考える大人の学び直しシリーズ)

数学から離れて久しいどころか高校入学早々に数学を捨ててしまったような人、基礎から体系的に学ばないとどうにもならないような人でも、長岡先生の授業ならわかりやすいかと思います。ちょっと高いんですけど、数学I~Ⅲ、数~Cがこの一冊(DVD-ROMつき)で学べると思えば安いです。

■大学数学

◆スバラシク実力がつくと評判シリーズ

マセマ出版のこのシリーズもすごくわかりやすいのですが、レベル感が大学生向けなので、高校数学が怪しい人は長岡先生の高校数学をやってからこちらのシリーズに進むのがよい気がします。

統計学線形代数微分積分など分野別

◆ゼロから学ぶ線形代数(ゼロから学ぶシリーズ)

ゼロから学ぶ線形代数 (KS自然科学書ピ-ス)

ゼロから学ぶ線形代数 (KS自然科学書ピ-ス)

◆完全独習 統計学入門(完全独習シリーズ)

完全独習 統計学入門

完全独習 統計学入門

こちらに限らず、小島寛之さんの数学入門書はすごく読みやすいですし、機械学習に必要な微分積分や統計などの書籍を多く出されています。

◆「超」入門 微分積分

「超」入門 微分積分 (ブルーバックス)

「超」入門 微分積分 (ブルーバックス)

高校の時に微分積分が理解できなくて苦手だった人、すっかり忘れてしまった人でも、これなら中学数学レベルの知識でも理解できる…と思うやさしい本です。逆に高校数学を学びきった後だとちょっと物足りないかもしれないですが。

■おまけが本編

・もりもり機械学習やってる人向け

↓MITのディープラーニングの教科書の和訳版が無料で公開されています。

Deep Learning

 

・数学入門以前の人向け

そもそも数学が苦手すぎて高校数学を学ぶことすらままならない、数学が嫌いすぎて気が重い…という拒否反応が出るレベルの人は、数学に少しでも興味や好意を持つために、この辺りの書籍を読むと数学に興味が出てきて勉強したくなる…と思います。

◆数学入門

数学入門〈上〉 (岩波新書)

数学入門〈上〉 (岩波新書)

数学ガールシリーズ

数学ガール (数学ガールシリーズ 1)

数学ガール (数学ガールシリーズ 1)

フェルマーの最終定理

フェルマーの最終定理 (新潮文庫)

フェルマーの最終定理 (新潮文庫)

博士の愛した数式

博士の愛した数式 (新潮文庫)

博士の愛した数式 (新潮文庫)

■まとめ

機械学習には数学の知識も必要ですが、「やってみたい!」と思ったら勉強を進めつつ、チュートリアル的に手を動かしてみると楽しいかと思います。

このブログでは、初心者でも機械学習でちょっと遊べそうな記事を過去にも書いているので、興味のある人は見てみてください。
paiza.hatenablog.com
paiza.hatenablog.com


また、プログラミングに関して「Pythonの書き方を基礎から学びたい!」という方に向けて、プログラミングが動画で学べる「paizaラーニングではPython入門編を公開中です。ぜひごらんください。
paiza.jp

Pythonの講座も公開中!プログラミングが動画で学べるレッスン


paizaは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」では、今回記事の中で使用しているPythonの入門講座も好評公開中です。ぜひごらんください!

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

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

複雑なCSSアニメーションが超簡単にJavaScriptで操作できる「Choreographer-js」を使ってみた!

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

今回は、複雑なイメージのあるCSSによるアニメーションをJavaScriptから簡単に扱えるようにしてくれるライブラリのご紹介です!

マウスや画面スクロールなどの移動量をもとにして、リアルタイムなアニメーションを作成できるので楽しいWebページが作れますよ。

Choreographer-js

f:id:paiza:20170906163526j:plain

公式サイトでは、「Choreographer-js」を活用して画面を下方向にスクロールすることでロゴの文字列がアニメーションするのが分かりますね。

f:id:paiza:20170906163540g:plain

このような複雑な動きを簡単に実現でき、ユニークなWebページを作れます!

■「Choreographer-js」の使い方

それでは、まず最初に「Choreographer-js」を使うための準備から始めましょう!

最も簡単な方法としては、わずか数キロバイトの「choreographer.min.js」をGitHubからダウンロードするか、次のURLを使う方法があります。

https://christinecha.github.io/choreographer-js/dist/choreographer.min.js

npmを使ったインストールもあります)


あとは、簡単な枠組みであるHTML(index.html)ファイルを作って、JavaScriptをプログラミングしていきましょう!

<body>
    <h1>Choreographer-jsサンプル</h1>
        


    <script src="js/choreographer.min.js"></script>
    <script>


        //ここに処理を書いていく


    </script>
</body>

■基本的な構文について

Choreographer-js」を使ったサンプルを作るまえに、基本的な概念だけ先にご紹介しておきます!

…と言っても、それほど難しくはなくて、次の3ステップさえ覚えればOKです。

var config = {


    // ①ここに設定を記述する


};


// ②インスタンスを作成
var cgp = new Choreographer( config );


// ③アニメーションをスタートする
cgp.runAnimationsAt( position );


3ステップの概要は次のとおりです。

【ステップ1】
①設定の記述:どのHTML要素のCSSプロパティを使ってアニメーションするのかを記述する。

【ステップ2】
インスタンスの作成:①の設定をもとにして「Choreographer-js」のインスタンスを作ります。

【ステップ3】
③アニメーション開始:ここでマウスやスクロールなどの移動量をもとにしてアニメーションを生成します。


「ステップ1」の設定に関してはのちほど詳しく見ていくとして、最後の「ステップ3」は「移動量」を取得する必要があるので、実際には次のようなイベント処理をラップするカタチになるでしょう。

document.addEventListener( 'mousemove', function(e) {


    // 縦方向(Y軸)のマウス移動量に応じたアニメーション
    cgp.runAnimationsAt( e.clientY );


})


このように記述することで、マウスの縦方向であるY座標の値を取得することが出来るわけです。(e.clientXならX座標になりますね…)
f:id:paiza:20170906164054j:plain
このような「移動量」を使って、さまざまなアニメーションをリアルタイムに実現できるのが大きな特徴です。

■マウスの動きでアニメーションしてみよう!

それでは、簡単なサンプルを作りながらさらに詳しい使い方を見ていきましょう!

サンプル例として、マウスの移動量に応じて「透明度」を変化させていくアニメーションを作ってみましょう。


以下のように、画面左側を「divタグ」で黒色の背景にしておきます。
f:id:paiza:20170906164117j:plain
マウスを縦方向に移動すると、それに合わせて黒背景が透明になっていくというアニメーションになります。


そこで、先ほど解説したマウスの縦方向の移動量を取得するイベント処理と、インスタンスを作成しておきましょう!

// インスタンスの作成
var cgp = new Choreographer( config );


document.addEventListener( 'mousemove', function(e) {


    // マウスの縦方向(Y座標)を取得する
    cgp.runAnimationsAt( e.clientY );


})


あとは、「config」の設定を記述するだけなのですが、主に次のようなパラメータを記述するのが一般的です。

var config = {
  animations: [{


      // 以下に設定を記述する
      range: [0, 200],   //移動量の範囲


      selector: '.box',  //HTML要素


      type: 'scale',       //連続的な移動量を取得


      style: 'opacity',  //CSSの透明度を指定


      from: 0,              //最初の透明度の値


      to: 1                   //最後の透明度の値


  }]
};


まず、「range」にマウスの移動範囲を指定します。

上記の場合だと、マウスが縦方向(Y座標)に0から200まで移動する範囲を指定したことになります。


そして、この範囲内で「style: opacity」の透明度を0(from)から1(to)に変化させていくという意味になるわけです。
f:id:paiza:20170906164209j:plain
「selector」には変化させたいHTML要素を指定し、「type」は連続した移動量を取得したいので「scale」にします。


実行すると、こんな感じです!
f:id:paiza:20170906164224g:plain
マウスの移動量に合わせて、透明度が変化しているのが分かりますね。

サンプルのソースコードコチラから閲覧できます!


ちなみに、マウスの移動量を取得するイベント処理を、特定のHTML要素内に指定すれば操作パネルのようなUIを作ることも可能です。
f:id:paiza:20170906164646g:plain
このサンプルのソースコードコチラから閲覧できます!

■HTML要素を移動・拡大・回転させてみよう!

さて、基本的な動きを学んだところで、もう少しアニメーションらしいサンプルも作ってみましょう!

div要素で作成した次の3つのボックスに、さまざまなアニメーションを追加してみます。
f:id:paiza:20170906164739j:plain


基本的な考え方は先ほどとまったく同じで、configの設定だけを変更すればOKです!

var config = {
  animations: [
    {


          //1つ目のボックスの設定


    },
    {


          //2つ目のボックスの設定


    },
    {


          //3つ目のボックスの設定


    }
  ]
};

上記のように、複数のHTML要素をまとめて設定することもできるので覚えておきましょう。


設定の記述は基本的に先ほどと同じで、例えばX軸方向に移動するアニメーションの場合は次のようになります。

{
  range: [0, 50],
  selector: '#box1',
  type: 'scale',
  style: 'transform:translateX', // X軸に移動
  from: 0,
  to: 400,  // 最大でX方向に400まで
  unit: 'px'  // 移動する単位
},

移動させたいので「style」には「transform:translateX」を指定し、0「from」から400「to」まで移動するように指定します。

ポイントは新しく記述している「unit」で、ここに移動量の単位を記述します。

先ほどの「透明度(opacity)」には単位が無かったので記述していませんでしたが、たいていのCSSプロパティには単位があるので忘れないようにしましょう。


また、同じように回転させたければ「transform:rotate」を指定したり、ボックスの幅を変更したければ「width」を指定すれば良いですよね。

実行するとこうなります!
f:id:paiza:20170906164836g:plain
簡単ですね。

このように、任意のHTML要素へ好きなCSSプロパティを当てはめるだけで、簡単にアニメーションが実現するのは分かりやすくて良いですね。

このサンプルのソースコードコチラから閲覧できます。


ちなみに、1文字ずつ動きを指定すればこんなテキスト文字も作れます!
f:id:paiza:20170906164914g:plain
ソースコードコチラから!

■【おまけ】

これまでのconfig設定で「type」に「scale」と記述していましたが、他にも「change」という設定ができます。

「scale」は連続的な移動量を取得する場合に有効ですが、「change」は特定の範囲内にいるか範囲外にいるか…という検出だけになります。

つまり、スイッチの「ON / OFF」みたいな挙動を作ることができます。


例えば、マウスカーソルの位置に応じて「表示・非表示」の選択をするような使い方ができます。
f:id:paiza:20170906164953g:plain
これは、マウスカーソルが画面中央よりも上側なら非表示(OFF)で、下側にいれば表示(ON)になるように指定しています。


configの設定は次のとおり!

var config = {
  animations: [{


      range: [0, window.innerHeight / 2],  // 画面中央を分岐点にする


      selector: '.box',


      type: 'change',  // changeに変更する


      style: 'opacity',


      from: 1,  // 非表示


      to: 0  // 表示


  }]
};

画面中央を境目として「上側・下側」に分けるので、「range」の設定には0から画面中央までの意味で「window.innerHeight / 2」としています。

あとは、「type: ‘change’」と指定すればOK!
ソースコードコチラから閲覧できます)

JavaScript講座も公開中!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

また、現在paizaラーニングではRubyRailsの有料講座を期間限定で無料公開しているので、興味のある方はぜひごらんください。
無料公開の期間など、詳しくはこちら↓
paiza.hatenablog.com

■まとめ

今回は、「Choreographer-js」の基本的な使い方をご紹介しました!

イデア次第では、まだまだ活用範囲が広くさまざまな用途へ気軽に使えるので重宝しそうです。

独自の関数なども作れるように設計されているので、Webに変化が欲しい方などぜひ一度トライしてみてください!


<参考>





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

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

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

転職者インタビュー!開発未経験で、どうしてエンジニアになれたんですか?


paizaでは、転職を経験されたエンジニアの方、未経験からエンジニアになった方、またその企業の採用担当者の方のインタビュー記事を公開しております。

未経験からどうやってエンジニアになったのか、企業選びのポイントや転職で得られたこと、また採用時に見られるポイントや実際のエンジニアチームの働き方などについて、詳しく語っていただきましたのでぜひごらんください。

paizaで転職された方の声

求めたのは「働きやすさ」 エンジニアファーストの企業に転職

Webサービスの企画・開発を手がける株式会社セプテーニ・オリジナルに入社された高嶋さんと、取締役の平岩さんにお話を伺いました。


――前職でもエンジニアとして活躍されていたそうですが、今回の転職を考えたきっかけはなんでしたか?

前職はバリバリの超ベンチャーとも呼ぶべき会社で、自分でなんでもやらなければならなかったので、ビジネスマンとしての「仕事力」は大きく成長できたのですが、一方で技術的に求められるものは必ずしも高いものではありませんでした。また、人数が少ないためにかなりハードな仕事でもありました。今後はもう少し落ち着いた環境で技術的な挑戦にフォーカスして働きたいという思いが強くなり、転職を考えました。


――今回の転職にあたり、会社選びでこだわったポイントはどこでしたか?

しっかりこだわったのは働きやすさという一点ですね。技術面では、自分のスキルセットでできることをベースに、これまでできていなかったこと、これまでよりも高いレベルのことに挑戦できる環境でやりたいと思っていました。それが実現できるのであれば、特定の開発言語や業界・分野にこだわらず幅広く考えていたので、スカウトメールをいただいた企業は、とりあえずカジュアル面談でお話を伺うようにしていました。一方で……

続きはこちら!
求めたのは「働きやすさ」 エンジニアファーストの企業に転職



その他のインタビュー記事はこちら!
エンジニア中途経験者へのインタビュー一覧
paiza.jp



未経験から転職された方の声

夢の実現を目指しキャリアチェンジ 音楽講師からエンジニアに転職

主に法人向けシステムを開発されている株式会社アルカディア・プラスに入社された野呂さんと、営業人事課の新井さんにお話をお伺いしました。


――大学で音楽を学び、前職も音楽の講師。一見プログラミングとは関係ないプロフィールに見えますが、なぜ興味を持ったのでしょうか。

もともとプログラミングに興味がなかったわけではないのですが、高校までは特に作りたいものとの接点がなく、始められずにいました。初めて本格的に触れたのは大学に入ってからで、音楽作品の制作にMaxと呼ばれるグラフィカルプログラミング言語を扱ったことがきっかけですね。

その後、作品の制作を続けるうちに、自分が制作したいものの規模が徐々に大きくなってしまって。だんだんと「文字で打ってプログラミングしていかないと、今後は自分が意図するものをきちんと作れなくなりそうだな」と感じるようになったんです。それからは本格的に独学でプログラミングを勉強し始めました。


――そうなんですね。ただ、プログラミングを勉強していたとはいっても、これまで音楽をメインにやってきた野呂さんが、このタイミングで別業種かつ未経験のエンジニアに転職したのは大きな決断かと思います。どういう理由からだったのでしょう?

音楽を教えることは楽しい半面、自分の知っている知識以上のものがなかなか得られない環境でした。今後プログラミングを使って作品やサービスを作っていこうと考えたときに……


続きはこちら!
夢の実現を目指しキャリアチェンジ 音楽講師からエンジニアに転職

実務未経験でもスキルで勝負できた フリーターからエンジニアに転身

システム開発事業を展開する株式会社i-Vinciに入社された竹下さんと、代表取締役を務める川下さんにお話をお伺いしました。


――現職に就かれるまでにプログラミング経験はありましたか?

はい。プログラミングを始めたのは大学入学後でしたが、大学では情報系の学部でした。そこでプログラミングの面白さを知り、大学在学中の後半には、これを仕事にしたいと思っていましたね。卒業研究では、自分でプログラミングして書籍のレコメンドシステムを作ったりもしていたんです。

――そんな竹下さんが、大学卒業時、就職活動をしなかったのはなぜなのでしょう?

最初は個人でアプリ開発者として成功したいと思っていたんです。自分の力がどこまで通用するか確かめてみたい気持ちもありましたし。当時は一人でiOS用のアプリやWebアプリなどを作っていました。そうやって個人アプリ開発者として活動していたのは、だいたい2年ほどでしょうか。


――2年ほど個人で活動されて、このタイミングで就職活動をしようと思った理由をお聞かせください。

個人で活動していた2年間で、自分の実力、身の程を知ったような気がしていて。エンジニアとして働きながら、自分に足りないものを補っていきたいと思ったのが大きな理由です。そして、自分がそれまで住んでいた広島では、東京のようにプログラミングの勉強会が盛んに開かれているわけではなかったので、プライベートでも、これまでよりスキルアップできる環境に身を置いたほうがいいと感じていました。

――実際に就職活動をしてみてどうでしたか?

実は2回の期間にわたって就活をやったのですが……


続きはこちら!
実務未経験でもスキルで勝負できた フリーターからエンジニアに転身



その他のインタビュー記事はこちら!
開発業務未経験からエンジニア職への転職を成功させた方へのインタビュー一覧
paiza.jp




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

paiza転職」は、自分のプログラミング力が他社で通用するか(こっそり)腕試しができる、IT/Webエンジニアのための転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。
paiza.jp
まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。
paiza.jp

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


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

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