書籍「Vue.js入門 基礎から実践アプリケーション開発まで」を読んで、入門できなかった話

はじめに

年初から、ポートフォリオを「Vue.js」で作ろうと思い、以下本を読んでいたのだが、ついに途中で挫折して（心が折れて）しまった。

Vue.js入門 基礎から実践アプリケーション開発まで

誤解がないように言うと、この本自体は素晴らしい本だ。
ただ、私がこの本を手にするには、レベルが低すぎたという話。

ちなみに、私のスペックはJavaScriptを書いた経験はほとんど無く、なんとなくソースコードは読める程度だ。
そもそも、このレベルの人が、Vue.jsに手を出すのはちょっと・・・という話もあると思うが、それは一旦置いておく。

まずは、この本の素晴らしさ、Vue.jsの素晴らしさについて以下に書いていく。

1章がとても良かった

「1章かよっ」とツッコミを入れた人もいると思うが、1章では、複雑化していくフロントエンドの開発、それを踏まえた「Vue.js」の特徴を説明している。私が「あ、なるほどなぁ」と感じた部分は「すべてはUIコンポーネントから構成される」という言葉だ。 UIコンポーネントというのは、たとえばWebページにあるヘッダー。
ヘッダーにログインボタンや複数のリンクがあった場合、その纏まりを1つのコンポーネントと呼ばれる単位に置く。すべてのWebページは、このコンポーネントと呼ばれる単位で構成されているよ。という事。
さらに、コンポーネント単位で再利用が可能であり、どのWebページにも配置する事ができるエコシステムである。との事。 こういった再利用が可能な考え方は、個人的にも好きなので、とても楽しんで読むことができた。

Vue.jsってライブラリ？フレームワーク？

Vue.jsはフレームワークだという言葉を良く耳にする。（私だけ？）
でも、中にはライブラリと呼ぶ人もいる。
結局どっちなの！？というモヤモヤが私の中にずっとあったのだが、この本はこれを解決してくれた。

結論：Vue.jsはライブラリです。

ただ、「Vue.js」はプログレッシブフレームワークという考え方のもとに作られている。

プログレッシブフレームワークとは「Vue.js」自体はViewに焦点を集めたライブラリだが、＋αのライブラリやツールを用いる事で、フレームワークとして機能する。という考え方。
なので、「Vue.js」自体はライブラリだが、＋αの「Vue-Router」や「Vuex」等を組み合わせるとフレームワークとして使う事もできる。

これで私のモヤモヤが解決された。
また、この辺りも個人的にとても面白い仕組みだと思った。

2〜7章は、ひたすら写経

2〜7章はひたすら写経していました。
細かいところまで、丁寧に解説してくれているので理解しやすかった。
（今となっては、理解した気になっていただけですが・・・）

8章〜は鬼門

8章から「中規模・大規模向けのアプリケーション開発」に入っていくのですが、ここで挫折しました。
というのも、「JavaScriptチョットデキル」程度では、本から入ってくる情報量が多くて歯が立ちませんでした。
以下の知識・経験があれば、私のように挫折することはないと思います。

• JavaScriptのTDD開発の知識・経験
• Webpack
• ESLint

8章は「Vue.js」を使ってログイン画面とTrelloのようなタスク管理ツールを作ろう。というもので、内容はとても魅力的なのですが、上記についての知識がないと個人的には厳しかったです。

というわけで「挫折しました。Vue.js諦めます！」

とは、したくないので別のアプローチで理解を深めて行こうと思います。

そんな風に考えていたときに、以下記事と出会いました。 qiita.com

この方は「Vue Router」でプチパニックがおき、「じゃんけんゲーム」を作る事で「Vue」への理解を深めたとの事。
この記事に倣って「よし、私もじゃんけんゲームを作ろう！！」という考えに至りました。

Vue.jsでじゃんけんアプリを作ってみた

Vue.jsでじゃんけん

驚くべきことに、記事に書いてあった通り「Vue」への理解が深まりました。
だけど、もう少し理解を深めていきたいと思うので、あと１つ何か作ろうかと思います。

NoSQLについて誤解していたことと学びについて

以前から気になっていたNoSQLについて調べてみた。
SQLは良く目にする言語なので、使用経験もあるのだが、NoSQLは使った事もないし、よくわからなかったで調べてみることにした。

ちなみに、NoSQLに対する私の知識は、AmazonのDynamo DBやGoogleのBigTableなどで使われる最近出てきた言語という事くらいしか知らない。

以降、調べてみた結果。

NoSQL（ "Not only SQL" と言われている）

関係データベース管理システム (RDBMS) 以外のデータベース管理システムを指すおおまかな分類語である。 関係データベースを杓子定規に適用してきた長い歴史を打破し、それ以外の構造のデータベースの利用・発展を促進させようとする運動の標語としての意味合いを持つ。

NoSQLという用語は1998年、SQLインタフェースを持たない軽量な関係データベースのオープンソースソフトウェアの名前として最初に用いられた。

(一部抜粋)ウィキペディアより：NoSQL - Wikipedia

まず、これを読んで思ったことは「用語の定義がかなり幅広い」ということ。しかも、1998年から存在していたとは・・・てっきり最近出てきた言語だと思っていた。
また、てっきりSQLのような新しいQuery言語を指すのかなと思いきや、全然違くて「RDBMS以外のデータベース管理システムを指す分類語」らしい。これは大きな勘違いをしていた。

少し自分の過去を振り返る

むかーし、XMLを扱うデータベースを使って仕事をした事があったのだが、もしかしすると、それもNoSQLになるのだろうか・・・・調べてみた。

ドキュメント指向（Document-oriented、Document store） - XMLやJSONといった、 スキーマレスでデータ構造が柔軟なもの。MongoDB、Apache CouchDB、Amazon DynamoDBなど。XMLデータベースなどのシステムでは、XQueryを利用できるものもある。

(一部抜粋)ウィキペディアより：NoSQL - Wikipedia

なるほど。XMLを扱うデータベースもNoSQLの1つらしい。ということは、私は昔、NoSQLを使って仕事をしていたという事になる。（NoSQLを使ったことがないというのは嘘だという事が発覚した |||orz）

こんな事を言うと偉い人に怒られるかもしれませんが、XMLを扱うデータベースは、XMLタグを含めるすべてのデータをDBに格納するので、データ量が1000件程度でQueryからのレスポンスが非常に遅くなり、大変扱いにくかった思い出があります。（ええっ、炎上案件でしたとも・・・）
また、データもXMLで非常に見辛く、とても辛いオシゴトでした。

気を取り直してNoSQLの話

NoSQLはRDBMS以外のデータベース管理システムを指すという幅広い定義であるため、多くのNoSQLのデータベースが存在する。これをデータモデルとアーキテクチャでデータベースの種類を分けることができる。
以下記事がとても参考になった。

qiita.com

www.atmarkit.co.jp

NoSQLといっても色々な種類のデータベースがあるのがわかる。
NoSQLで有名なのはAWSのDynamoDBやGoogleのBigTable、あとはMongoDBだと思うのだが、上記分類分けを見るとまったくの別物であることがわかる。NoSQLのデータベースを選定する時は、よく調べる必要がありそうです。

NoSQLを使ってみよう

私の場合、AWSを仕事で使っているので、DynamoDBについて学ぶのが良さそうです。AWS DynamoDBはAWSとDockerのアカウント、AWS-CLIさえあれば、簡単にローカル環境を構築できるので、ちょっと使ってみる分にはオススメです。

https://hub.docker.com/r/amazon/dynamodb-local

というわけで、さっそく使ってみる。
（事前にAWSとDockerアカウントの登録、AWS-CLIのインストールは必須です）以下コマンドを入力すれば、aws dynamodb-localが起動します。

docker run -d -p 8000:8000 amazon/dynamodb-local

"-d"オプションをつけることで、デーモン化してdaynamoDBが立ち上がるのでオススメです。

$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
amazon/dynamodb-local   latest              26ea09a4a680        5 months ago        446MB
$ docker ps -a
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                    NAMES
7e92210ebb4a        amazon/dynamodb-local   "java -jar DynamoDBL…"   32 seconds ago      Up 30 seconds       0.0.0.0:8000->8000/tcp   tender_newton

テーブルの作り方、データ挿入方法はamazonのマニュアルを参考にしました。

CLI の使用 - Amazon DynamoDB

試しに、上記作り方に記載しているMusicテーブルを作成してみます。 なお、dynamodb-localを操作するには"--endpoint-url http://localhost:8000"オプションが必須です。
このオプションをつけていないと、自分のAWSアカウントのDynamoDBにテーブルを作るので注意が必要です。（ちゃんとAWSの設定をしている場合に限る）

$ aws dynamodb create-table \
>     --endpoint-url http://localhost:8000 \
>     --table-name Music \
>     --attribute-definitions \
>         AttributeName=Artist,AttributeType=S \
>         AttributeName=SongTitle,AttributeType=S \
>     --key-schema \
>         AttributeName=Artist,KeyType=HASH \
>         AttributeName=SongTitle,KeyType=RANGE \
>     --provisioned-throughput \
>         ReadCapacityUnits=1,WriteCapacityUnits=1
{
    "TableDescription": {
        "TableArn": "arn:aws:dynamodb:ddblocal:000000000000:table/Music",
        "AttributeDefinitions": [
            {
                "AttributeName": "Artist",
                "AttributeType": "S"
            },
            {
                "AttributeName": "SongTitle",
                "AttributeType": "S"
            }
        ],
        "ProvisionedThroughput": {
            "NumberOfDecreasesToday": 0,
            "WriteCapacityUnits": 1,
            "LastIncreaseDateTime": 0.0,
            "ReadCapacityUnits": 1,
            "LastDecreaseDateTime": 0.0
        },
        "TableSizeBytes": 0,
        "TableName": "Music",
        "TableStatus": "ACTIVE",
        "KeySchema": [
            {
                "KeyType": "HASH",
                "AttributeName": "Artist"
            },
            {
                "KeyType": "RANGE",
                "AttributeName": "SongTitle"
            }
        ],
        "ItemCount": 0,
        "CreationDateTime": 1548505321.099
    }
}

データを挿入してみます。

$ aws dynamodb put-item \
> --endpoint-url http://localhost:8000 \
> --table-name Music  \
> --item \
>     '{
>         "Artist": {"S": "No One You Know"},
>         "SongTitle": {"S": "Call Me Today"},
>         "AlbumTitle": {"S": "Somewhat Famous"}
>     }' \
> --return-consumed-capacity TOTAL

scanコマンドを使って、挿入したデータの確認。
ちゃんと追加されていますね。

$ aws dynamodb scan \
> --endpoint-url http://localhost:8000 \
> --table-name Music
{
    "Count": 1,
    "Items": [
        {
            "Artist": {
                "S": "No One You Know"
            },
            "SongTitle": {
                "S": "Call Me Today"
            },
            "AlbumTitle": {
                "S": "Somewhat Famous"
            }
        }
    ],
    "ScannedCount": 1,
    "ConsumedCapacity": null

まとめ

• NoSQLとは、関係データベース管理システム (RDBMS) 以外のデータベース管理システムを指す。
• SQLのようなQuery言語を指すわけではなく、データベースの分類用語。
• NoSQLのデータベースは多くあり、データモデルとアーキテクチャで分類分けできる。また、XMLやJSONを扱うもの等、個性もある。
• AWS使っている人は、まずはDockerのdaynamodb-localがオススメ。

Pythonチュートリアルを読んで学んだ事（例外処理）

はじめに

最近、カックさんのブログで「「Python 3 エンジニア認定基礎試験」に合格した」という記事が話題になっていて、Python 3を仕事で使っている身としては、非常に興味深かった。

kakakakakku.hatenablog.com

そもそもPython 3の認定試験なるものが存在する事をこの記事を読んで、はじめて知りました。Pythonを学ぶにあたっての1つの目標になりそうですね。
さて、そのPython 3の認定試験（Python 3 エンジニア認定基礎試験）ですが、以下オライリー本「Pythonチュートリアル第3版」から出題されるとのこと。

Pythonチュートリアル 第3版

しかし、この本、なんとウェブ上で無料公開されているとの事で、大変驚きました。 Pythonについて学習したい方は、一度見てみる事をオススメします。（Pythonのバージョン毎に内容が異なってくるので、注意してください）

docs.python.jp

というわけで、私もさっそく復習を兼ねて読んでみました。

意外と知らないことが多かった例外処理

改めて読んでみると、意外にも知らない（すでに忘れていた）事が多々あり、勉強になった。その中でも例外処理の独自例外について、個人的に興味深かったので纏めておく。

Pythonでは、例外を独自で作る（独自例外という）ことができる。以下の様に事前に例外用のclassを宣言しておけば作成可能だ。

class MyError(Exception):
    pass

try:
    raise MyError
except MyError:
    print("[ERROR] MyError")

>
>[ERROR] MyError

classなので、初期化用の関数（__init__()）を宣言することができる。 exceptした後の処理は、初期化用の関数が動いた後に動く。
また、独自例外は引数を使った値の受け渡しも可能だ。

class MyError(Exception):
    def __init__(self, code, message):
        print('初期処理：',code, message)

try:
    raise MyError(400, 'not found')
except MyError:
    print("[ERROR] MyError")

>
>初期処理： 400 not found
>[ERROR] MyError

例外処理は、__str__()関数に定義されている。__str__()関数に処理を書くと、確かに実行された。

class MyError(Exception):
    def __init__(self, code, message):
        print('初期処理：',code, message)
        self.code = code
        self.message = message

    def __str__(self):
        print('[Error] MyError CODE=', self.code)
        print('[Error] MyError MSG=', self.message)

raise MyError(400, 'not found')

>
>初期処理： 400 not found
>Traceback (most recent call last):
  >File "<stdin>", line 1, in <module>
>[Error] MyError CODE= 400
>[Error] MyError MSG= not found
>__main__.MyError: <exception str() failed>

上記では、try: except:しなかった。というのも、どうやら優先順位があるようで、__str__()関数の処理よりもexceptが優先される模様。恐らく、__str__()関数は、例外を発生させる関数という位置付けなので、exceptを使って例外をハンドリングさせている場合は、「動かない」という事だろう。

class MyError(Exception):
    def __init__(self, code, message):
        print('初期処理：',code, message)
        self.code = code
        self.message = message

    def __str__(self):
        print('[Error] MyError CODE=', self.code)
        print('[Error] MyError MSG=', self.message)

try:
    raise MyError(400, 'not found')
except MyError:
    print("[ERROR] MyError")

>
>初期処理： 400 not found
>[ERROR] MyError

まとめ

• Pythonでは、classを事前に用意することで、独自例外を作ることができる。
• 独自例外では、初期化用の関数__init__()と、例外を発生させる関数__str__()を宣言できる。
• __init__()はraiseされた瞬間に呼び出される。__str__()はexceptされていなければ呼び出される。（逆にexceptされていると呼び出されない）

そうだっ！「ポートフォリオサイト」を作ろう！

はじめに

今年は「ポートフォリオサイト」を作りたいと思います。
前回のブログで、今年は「技術力を磨く」事を重点に活動して行くと決めました。 とはいえ、何から手をつければ良いのか・・・そのあたりはノープランだったので、色々と考えた末、以前から作りたかった「ポートフォリオサイト」を作る事から始める事にしました。

どうやって作るか？

以前から苦手意識のあるJavaScriptを学び直して、Vue.jsを使って作ってみようと思いました。サーバーを用意すると管理・維持コストが掛かるので、SPA、サーバーレスで作りたいなぁというのと、技術的にも興味があったからです。というわけで、今年の始めからJavaScriptとVue.jsを勉強しています。

なぜJavaScriptに苦手意識を感じるのか？

うーん、ここはなかな言語化するのが難しい・・・
確かに今までの経験上、フロント側を触ることは、ほぼ無かったからと言えばそうなのですが・・・

ただ、JavaScriptを勉強していて思ったのは、やたらと無名関数を使うケースがあり、コードが読み辛いなぁと感じる事が多々あるのが苦手意識を感じる理由の1つかもしれません。
たとえば、以下のようなコードです。console.logに出力される数値は「20」ですが、無名関数をつかっているせいか読み辛く感じます。（私だけっ？）

var test = function() {
    var item_a = function() {
            return 2;
    }
    var item_b = function(item_a) {
        var hoge = function() {
            return 5;
        }
        return item_a * hoge();
    }
    return item_a() * item_b(item_a())
}

console.log(test())

あとは、必要なフレームワークやライブラリが多くあり、どれも個性が強そう・・・というのもあります。
とくにNode.jsのnpm（モジュール管理ツール）は、webpack等、サーバーサイド以外のJavaScriptでも使われる事があるので時折「あれ？Nodeが必要なの？」と驚きます。

とはいえ、何かモノを作るときにはフロント側の知識、JavaScriptは必要になってきますし、バックエンドでもフロント側を知る事で得られる情報は多いと思うので、引き続きJavaScriptとVue.jsに取り組んでいきたいと思います。

Vue.jsってどうよ？

良いですね。
とくにコンポーネントシステムの考え方（コンポーネントとして、使い回せるところは使いまわそうーという考え方）はわりと好きです。このあたりは、別途記事に纏めようと思います。

最後に

目標としては、今年の3月までにはVue.jsを使って「ポートフォリオサイト」を作れたらいいなぁとか考えてます。頑張らねばっ・・・！！

2019年の抱負について

今週のお題「2019年の抱負」

明けましておめでとうございます。
今年も頑張ってブログを続けていきたいと思っておりますので、どうか宜しくお願い致します。

あれ？ブログのページ何か変わってない？

今年も少しブログをリニューアルしました。 変更点はざっくり以下の通りです。

• 記事の白地の幅を拡大、背景色の変更
• サブタイトル変更、サブタイトルをタイトル下に移動
• サイドバーにあるQiitaの記事タイトルフォントサイズを縮小
  （タグのフォントサイズも縮小したら背景が潰れたので後日修正予定orz）
• サイドバーにあるTwiiterを英語版に変更
  （日本語で「ツイート」って書いてあるのが気になっていたので・・・）
• サイドバーにGitHubのGraph（いわゆる芝生）を追加

「気分を変えよう！」くらいの気持ちでやってる事なので、「見やすくなったねー」くらいに捉えて頂ければ幸いです。

2019年の抱負

ブログ継続

---

昨年のブログ更新記録を更新すること。可能な限りブログでのアウトプットを継続したいと思います。

勉強会・コミュニティ・カンファレンスへの参加

---

実は子供が産まれてからは、勉強会（Tama.rb）への参加を止めていました。
理由は、妻が平日に子供の面倒を見ていてくれる分、自分は休日に子供の面倒を見て妻の負担を減らしてあげたいのと、転職後はRubyに触れる機会がなかったからです。
なので、子供の様子を見ながら徐々にRubyとは違う勉強会やコミュニティ、カンファレンスに参加していこうと考えています。（Tama.rbの皆さんには名残惜しい気持ちでいっぱいですが・・・orz）

スキル向上

---

私が転職を選んだ理由に「技術力を身に着けたい」というのがありました。
転職はできたので、あとは技術力を身に着けていくのみです！！
今のところ、JavaScript／Python／PHP／AWS／CMSを軸に技術力を学んで行こうと考えています。（残念ですがRubyは除きましたorz）

Gitの可視化

---

「技術力がついた」「技術力がある」と証明（アピール）するには、何かしら可視化が必要なのでは？と思いました。そこで、GitHubのGraph（いわゆる芝生）をブログに貼る方法があったので、これを使いました。
（ご覧の通り！　今は草が全然生えていません・・・orz）
草が生える＝技術がある事にはなりませんが、「あれ？今日コード書いてないぞっ」という気付きにはなると思うので、頑張って草を生やして行きたいと思います。

まとめ

というわけで、今年の抱負は「技術力を磨く」です。
がんばりますっ！！