【これが出来れば学習効率１０倍】英語力なくてもできる公式ドキュメント活用法！！

#公式ドキュメントは最強の教材である理由
**公式ドキュメントは技術者全員に与えられている最強の教材である。**
これを理解し、自由自在に使うことができれば一気に技術レベルを上げることも可能です。

その理由についてまとめてみました。

公式ドキュメントを読むことの重要性に気づかせてくれた良記事

- [私たちはどうして公式ドキュメントが読めないのか](https://qiita.com/hiraike32/items/f0a211cceb0ecc516b6c)
- [なぜ研究者は学術書を翻訳すべきなのか？](https://note.com/suz_dg/n/nd855ba5b66b2)

## 1.最も信頼でき、最も新しい情報である
「公式ドキュメント」は、言語やライブラリの公式の組織が出している文章であり。
**紛れも無く最新で最も信頼のおける一次情報である。**

言語やライブラリは、常に更新されていることもあり、プログラミングに置いてその情報が、
一時情報かそうでないかはについてはかなり重要なことである。

どんなに優れた記事や書籍でも公式ドキュメントの更新頻度についていくことは不可能であり、
書かれた時点での情報になってしますのでその時間差がある分、信頼性が欠けるなので公式ドキュメントをもとにどんどん一時情報を収集していって欲しいです

## 2.情報発信のネタの源泉であること
公式ドキュメントが、一次情報を得られる最も信頼できる文章だということは分かって貰えたと思うが、まだまだ積極的に公式ドキュメントを使って勉強する人が少ない。

そんなこともあり公式ドキュメントの中に、まだ取り上げられていない有益な情報が山ほど存在します。初心者でも、その情報を切り出し自分なりにまとめるだけで有益な情報発信ができるはずです。

ぜひ、今使っている言語やフレームワークの公式ドキュメントを読みまくってどんどん情報発信していって欲しいです。
## 3.どんな言語にも対応できる対応力が得られる
公式ドキュメントを自分の持つ最強のアイテムとして使いこなせれば、どんな言語やフレームワークに対応できるようになる。

いや、**どんな課題にも対応できる課題解決能力**が得られると言っても過言ではない。

プログラミングを勉強していると、新たな課題が次々と出てくるであろう。
その時すぐにドキュメントを参照でき問題解決ができると成長速度は凄まじくアップすることは間違いない。

これが出来るようになり対応力がつけば、他の言語を学ぶ時もスムーズに学べるようになると思います。
言うなれば、**プログラマーとしての基礎体力**がつきます。
いいこと尽くめですねww

#公式ドキュメントが読まれない理由
先ほども少し話しましたが、公式ドキュメントを積極的に勉強に使われるという文化はあまり浸透してないように思える。

その理由について分析してみた

**- 英語が読めないから、翻訳されていない文章は読めない
- 長くてどこを読めばいいかわからない
- サンプルコードが少ないので体系的に学べないし、自分のコードに落とし込めない
- 他のWeb記事や、書籍の方が読みやすいし体系的に学べる**

これは自分の経験から分析した結果ですけど、結構当てはまる人はいるのではないかと思います。このような悩みは僕も持っていました。
しかしやり方を少し工夫すると、公式ドキュメントをうまく使いこなすことができてきたのでその方法をシェアしていきたいと思います。

#【実践】英語力がなくても出来る公式ドキュメント活用法
前置きが長くなってしまいましたが、公式ドキュメントを用いた学習を実践していきます。

今回は、Flutterを使って実践していきたいので
こちらの[Flutterの公式ドキュメントのWidget catalog](https://flutter.dev/docs/development/ui/widgets)を使っていきます。

具体的な手順はこちらです。

**1. 使いたい技術を絞る
2. 公式ページ（なければどこでもいいです）からサンプルコードをコピーして自分の手元で出す
3. その技術の説明している部分を要点絞って読む
4. 手元のコードをどんどん動かして差分を確認。これを繰り返す**


これだけじゃわからないと思うので、実際に一つ一つ実践していきます。

## 1.使いたい技術を絞る
使いたい技術は、
実際に作業したときに詰まったところや、勉強したいところを自分で決めます。

今回僕は、Flutterで用意されているConainerというWidgetをターゲットにします！

## 2.サンプルコードを引っ張ってきて自分の手元で出す
今回は公式ドキュメントで提供されているサンプルコードを使わせてもらいます。

- まずは、[Flutterの公式ドキュメントのWidget catalog](https://flutter.dev/docs/development/ui/widgets)を開いて以下の手順でContainerの詳細ページを開き、サンプルコードを自分の手元で書く
![スクリーンショット 2020-08-02 20.29.30-side.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408813/dc43415d-8dd7-c7a2-2f56-e1c902eb4acf.png)

サンプルコードは、こちら

```dart:main.dart
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
       child: Container(
        margin: const EdgeInsets.all(10.0),
        color: Colors.amber[600],
        width: 48.0,
        height: 48.0,
      ),
    ));
  }
}
```

xcodeのシュミレーターの出力結果
<img width="393" alt="スクリーンショット 2020-08-02 21.10.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408813/c46e93c1-e567-eb5f-1ca3-0b5b1b74e15c.png">

公式ドキュメント通りに作れました。
ここまでは下準備です。ここから公式ドキュメントを元に応用していきます。

## 3. その技術の説明している部分を要点絞って読む
サンプルを表示させられたので、ここからは少し工夫しながらドキュメントを読んでいきます。

ここからが重要になるのですが、
**概念的な話より、使い方を説明しているところを探す**ことです。

今回の例で言うと、Propertiesという部分を読んで、手元で動かしみました。
![スクリーンショット 2020-08-03 0.11.14-side.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408813/59a55c15-9e05-9110-4bad-488262d28112.png)

日本語翻訳でだいたいどんなプロパティなのか見て行ってあとはどんどん値を入れてって挙動を確認するを繰り返していきます。
値は矢印の右側の型で返してあげなければいけないのでその型も調べると勉強になります。

それでは何個かプロパティを動かしていきたいと思います。

## 4.手元でどんどん動かしてみる

今回は

- decoration
を触っていきたいと思います。
何か問題にぶつかってしまった時は、問題解決できそうなプロパティを探してみて動かしてみればいいと思います。

### decoration
日本語翻訳では、

>子供の後ろに塗る飾り。

これじゃあ、なんのことかわからないのでどんどん動かしていきます。
あとは、Decorationという型で返してあげます。

Decoratonクラスはこちらで参照できます。
https://api.flutter.dev/flutter/painting/Decoration-class.html

```dart:main.dart
Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 1.shapeで形を変更
              Container(
                margin: const EdgeInsets.all(10.0),
                width: 48.0,
                height: 48.0,
                decoration:
                    BoxDecoration(color: Colors.amber, shape: BoxShape.circle),
              ),
              // 2.BorderRadiusで角の形を編集
              Container(
                margin: const EdgeInsets.all(10.0),
                width: 48.0,
                height: 48.0,
                decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(10)),
              ),
              // 3.Borderで枠線をつける
              Container(
                margin: const EdgeInsets.all(10.0),
                width: 48.0,
                height: 48.0,
                decoration: BoxDecoration(
                    color: Colors.amber,
                    border: Border.all(color: Colors.black)),
              ),
              // 4.BoxShadowで影をつける
              Container(
                margin: const EdgeInsets.all(10.0),
                width: 48.0,
                height: 48.0,
                decoration: BoxDecoration(color: Colors.amber, boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    spreadRadius: 1.0,
                    blurRadius: 10.0,
                    offset: Offset(10, 10),
                  )
                ]),
              ),
            ]),
      ),
```

ここでは、

1.　shapeで形を変更
2.　borderRadiusで角の丸みを編集
3.　borderを編集して枠線をつける
4.　boxShadowで影をつける
![スクリーンショット 2020-08-03 15.24.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408813/1dc656ae-fa00-9213-12b8-429f8ef8d538.png)

こんな感じで、画面で確認できました。
上手く公式ドキュメントを、ハンズオンで試せたと思います。

こんな感じで初学者の段階または、課題解決の時に公式ドキュメントを使って見て下さい！