はじめに

この記事では、私自身まだまだ未熟ですが、学習初期に行っていた学習方法を紹介しています。
至らない点や非効率な点もありますが、誰かのヒントになればと思い、投稿します。
少しでも参考になれば、幸いです。

オンライン教材を使った学習について

メリット・デメリットはそれぞれいくつもありますが、オンライン教材だからこそ、できる使い方があると思っています。それは、スクショをとることができる点です。黒板を使った授業や紙のテキストを使った学習では写すことに手間がかかってしまいますが、オンライン教材なら、自分だけのノートを簡単に作りあげることができるのです。

ざっくり言ってしまえば、わからないところのページだけ、スクショを撮ってノートアプリに貼り付けるということです。

これを紙でやろうとすると、相当手間です。まず、コンビニに行って（笑）、10円を払ってコピーして、帰ってきてハサミで不要なところを切り、のりを使って貼る。実に面倒だし、家にコピーできる機械があればいいですが、いちいちコンビニに行くことなんて効率が悪いです。プログラミングの学習において、文字を書いて覚えなければいけないことなんて、何一つ無いのだから、あくまで、自分の苦手なところや大切だと思ったことをストックしておく程度の感覚でノートを作っていけばいいのです。
いや、「デジタルにしろ、ノートを作ること自体ナンセンス」という考えもあるかと思いますが、あくまで一例ということで、ご容赦ください。ノートアプリは思考の整理にも私は使っています。

今思えば、Progateの学習でも紙のノートに書かないで今回紹介する学習方法を使えばもっと効率的だったと後悔しています。

ツール

前提として、Mac系のパソコンを使っていることとします。Windowsは、よくわかりません。

• iPad
• Apple pencil
• GoodNotes5(iPad版有料アプリ)
• GoodNotes5(Mac版有料アプリ)←これについては、【具体例1】で取り上げています
• iCloud（無料の5GBで十分）

※iCloudはMacとiPadで同じAppleIDで同期しておく必要があります。

基本的な使い方の流れ

1. パソコン画面をスクショ（自動でiCloudのフォルダに保存されるように設定しておく）
2. iPadのGoodNotes5を開いている状態で、Slide Overを出す
3. Slide Overの1のスクショが保存されたフォルダを開く
4. スクショ画像をドラックアンドドロップでノートに貼り付ける
5. スクショ画像をトリミングする
6. スクショ画像を好きなところに配置
7. メモ書き

補足

1 パソコン画面をスクショ（自動でiCloudのフォルダに保存されるように設定しておく）

パソコン画面のスクショの保存先を変更するには、スクショを撮る状態（カメラマークが出ている状態）にして、「オプション」から設定することが出来ます。

2 iPadのGoodNotes5を開いている状態で、Slide Overを出す
3 Slide Overの1のスクショが保存されたフォルダを開く

↓この状態

4 スクショ画像をドラックアンドドロップでノートに貼り付ける

5 スクショ画像をトリミングする

ちなみに、下のボタンを切り替えることで、フリーハンドでトリミングすることも可能です。

【具体例1】

MVCの流れが掴めていなかったとき

Railsを学んでいて、「謎だなー」と思っていたのは、それぞれの繋がりについてでした。例えば、コントローラーで

def index
  @text = Text.all
end

みたいな記述があると、Textはモデルとの関わりだし、@textをビューにも表示させることができるしで、その記述が他のファイルとどんな繋がりがあるのかがゴチャゴチャになることがよくありました。
これを整理させるときに、GoodNotes5を使って自分なりに整理していました。
使い方としては、関わりがありそうな部分のコードをそれぞれスクショ、トリミングして、ひたすらコードとコードを線で結びました。

とても恥ずかしいですが、3ヶ月程前に書いたノートをそのまま貼っておきます。間違っていたり、メモが書いてあったりしますがご容赦ください。

今見返してもグチャグチャで、自分でも理解するのに時間かかります（笑

自分の理解をメンターさん相手に話して確かめるときも、このノートを使いました。画面共有をしたときに、まさにこのページを使って、自分の理解があっているのか、また、わからないことについて話をしました。
パソコンを使って画面を共有する場合（zoomなど）に、
ツールであげた、GoodNotes5(Mac版有料アプリ)が必要になります。

今思えば、こうしてそれぞれの繋がりを理解しようとしたことが後々の学習に役立ったと思います。

【具体例2】

Rubyの問題を解いていたとき

paizaなど、ネット上にはプログラミングの問題がたくさんあります。自分の知識を深めたり、論理的思考を磨いたりするためには問題を解くことも一つの手だと思います。
私はただ解いて、「できた」「できない」で終えたくなくて、ここでもGoodNotes5を活用しました。

GoodNotes5に貼ったり書いていた内容

1. 日付
2. その問題が扱っているテーマ
3. 問題文（スクショ→トリミング）
4. 自分の回答（スクショ→トリミング）
5. 模範解答（スクショ→トリミング）※あれば
6. メモ
7. 自分はどこまでわかっていたのか、出来ていたのか
8. わからなかった（知らなかった）メソッドや記述方法や用語を調べてまとめる
9. 解いた感想

ざっと、こんな感じのことを大体1ページに収めて書いていました。
私が問題を解いて、まとめる過程で大切にしていたことは、

自分は、どこまで理解できていて、何が理解できていないか。

を把握することでした。
また、できたときには、その問題をできなかった人に説明するとしたら、ポイントはどこになるのかをまとめるようにしていました。

とってもお恥ずかしいですが、これも現物を載せておきます。

私のレベルの低さが露呈してしまいました…

最後に

2日間、想いを込めて執筆したつもりだけど、伝わる文章になっていないなぁと反省です。

学習方法って、正解がないし、今でもこれが正しかったのかわかりません。
ググっても、優良な教材は出てくるけど、それをどう学習するのが効率的かってのは、なかなか情報がないなぁと思っていました。自分に合った学習方法を模索していく過程で、ベストな方法にたどり着けるといいですよね。
とはいえ、この投稿が、私と同じようにプログラミングの勉強を始めた人の参考になったら嬉しいです。

長々と書きましたが、ここまで読んでいただき、ありがとうございます。