Ankiで超効率勉強

プログラミングをしていると、覚えることがたくさんあります。
「HTML,CSSの勉強を終えて、JavaScriptの勉強に移り、久しぶりにCSSやったらプロパティ忘れまくっていた」
「Python,PHPの勉強を両方していて、どれがどれだか分からなくなる」
なんてことはあるのではないのでしょうか。
そこで、科学的に1番効果的な勉強ができるツールが「Anki」です。
[ankiのホームページ](https://apps.ankiweb.net/)
ここではインストール方法は紹介しません。
他に分かりやすいサイトたくさんありますし。

## Ankiのメリット
・フラッシュカードを紙も無し、書く必要も無しで簡単に作れる。
・科学的に立証された分散学習で、忘れかけたころにカードを提示してくれる。
・スマホと連携させればいつでもどこでも学習できる。

## Ankiのデメリット
・最初は使い方に慣れるのが大変。
・スマホ版はなぜか3000円する。

#Ankiの簡単な使い方
###①カードの追加・編集方法
デッキがまだ無い場合、下の「デッキを作成」からデッキを作成します。
その後、該当のデッキをクリックして「追加」からカードを追加しましょう。
既に他のツールでankiを使っているなら、「同期」を押せばOKです。
![ankiトップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/9c4b7bca-c0aa-bca5-5ffc-89ab36a99f22.png)
ちなみに、「共有デッキをダウンロード」を押せば、AnkiWebで公開されているデッキをそのまま引っ張ってこれます。
基本は英語ですが、探せば勉強に役立つものがたくさんありますよ！

---
##### 例
[4000 Essential English Words](https://ankiweb.net/shared/info/1104981491)
[HTML Tags](https://ankiweb.net/shared/info/1943363469)
[javascript es6 features](https://ankiweb.net/shared/info/1985501473)
[Linux Essentials](https://ankiweb.net/shared/info/269214285)
[Basic Git Commands](https://ankiweb.net/shared/info/2008086548)

---

それでは、カードを追加してみましょう。
「追加」ボタンを押すとこんな画面が出てきます。
右上でデッキを選べます。
左上のノートタイプは「基本」「穴埋め」「基本(裏面カードを任意選択)」ぐらいしか使わないと思います。
####基本
基本はシンプルにフラッシュカードの表・裏と一緒です。
あまりごちゃごちゃ書かずに、シンプルに小分けにする方が良い勉強に繋がるそうです。
(理想は1カード10秒以内で思い出せるようなもの)
👇例
![Anki追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/2b02f85a-6a18-08c4-260a-6adf7ae396d6.png)


「基本(裏面カードを任意選択)」にすれば、英単語カードみたいに「日⇛英」・「英⇛日」の両方のカードを1度に作れます。


####穴埋め
穴埋め部分は「Ctrl + c」で追加できます。
![anki穴埋め.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/b31e9b15-7db7-5195-8d56-b9869c7c6ca9.png)
このように、穴埋めは分けることができます。
また、右上で太字にしたり下付き文字にしたりできます。
ショートカットキーを覚えたら便利ですよ！
![anki穴埋めc1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/c5464eb1-25cd-958d-1ab0-e0a3ff2a3cfd.png)

![anki穴埋めc2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/a5c7d384-9cb3-3205-ce02-0b59399b4ca6.png)

Cの後の数字で分けられます。

###②カードを学習する
カードを学習するうえで、
「このカードもっと学習したかったのになぁ」ってことがあると思います。
その時に使えるのが、「カスタム学習セッション」です。
![anki学習完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/71d58db1-d626-c3c1-fe99-3537383560a1.png)
下の「カスタム学習」ボタンを押せばおけ。
全部まとめて学習したい時は、
「カードの状態やタグを選んで学習する」⇛「全てのカードを無作為に選択(詰め込みモード)」
を選びましょう。
![ankiカスタム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/08440dba-887a-8e12-0c23-7b3a6daf64bb.png)

このように、「カスタム学習セッション」が追加されます。

###③便利なアドオン
「ReviewHeatmap」というアドオンが便利です。
Anki2.1なら下記サイトです。
[ReviewHeatmap](https://ankiweb.net/shared/info/723520343)

👇このアドオンのダウンロード方法
①Ankiアプリのトップページ上の「ツール」⇛「アドオン」を選択  (Ctrl + Shift + A でもいける)
②「アドオンを取得」をクリック
③上記サイトに載っている番号を「コード」の部分に記入(723520343)
④「OK」を押す
⑤Ankiを再起動したら反映されます。

![ankiheatmap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/7cfa7487-e8c0-fcd6-b24c-c4a19cf9bd49.png)


他にも便利なアドオンがあるはずなので、随時追加していきます。

###④その他の設定
Ankiのカードはデフォルトでは、中央寄せになっています。
ただ、プログラミング系の勉強をするには中央寄せは不都合です。
![ankiQiitacenter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/225bf256-2411-cd52-deff-f1611e851987.png)
こんな風に、コードが見にくくなります。
コードを整えたい時は、次のようにしましょう。
![ankiqiitacenteredit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298112/0e9dd277-c12e-c871-7f94-08ca73dbfd55.png)
①問題のカードの左下の「編集」をクリック
②編集画面左上の「カード...」をクリック
③「書式」の部分のCSSをいじる。
```css
text-align: center;
```

これを```left```にすればいい感じになります。
ただ、このCSSは同じ種類のカード間で共有されます(穴埋めカードなら、それにに全部反映される)。
カードの種類は自分でも増やせるので、それでオリジナルのカードを作れば良いでしょう。