MLの第2版(英語版)が出たので早速買って読んでみました。構成としては基本的に第一版と同じようですが、TensorFlowなどのライブラリバージョンアップに伴って内容がアップデートされているようです。日本でも第一版は翻訳されていますが、翻訳がまずいのかイマイチ評判はよくないようです。実は第一版はかなり前に読んだのですが、あまり理解できないところが多かったので第2版に改訂されたのを期にもう一度再読してみようと思います。読んだ内容は何回かに分けてまとめていきたいと思います。本の内容は全体的にこのような構成になっています。TensorFlowモデルの展開とスケールアップ全体的に前半が非ニューラルネットアルゴリズムについてに書かれていて、後半はニューラルネット/ディープラーニングという構成になっています。読んだ感じでは、今回の改訂で変更、追記されたのは主に後半部分ではないかと思います。サンプルプログラムはこちらのURLからダウンロードできます。Notebook形式になってますので、実行結果を確認しながらコードを読むことができます。ハンズオンと本のタイトルにもあるように、実際にコードを動かすことを基本とする内容なので、ぜひとも自分のPCに実行環境を作って動かしながら読み進めてください。初回ですので実行環境を作る説明をします。私の実行環境はMacですが、他のプラットフォームでもそんなに違わないと思います。Pythonをインストールする必要がありますが、おすすめはAnacondaというパッケージシステムを使うことです。www.anaconda.comAnacondaはPythonだけでなく、いろんなライブラリを簡単にインストールできるディストリビューションです。機械学習関連のライブラリが充実していて、アップデートもコマンドで簡単にできます。上のURLからPython3のバージョン(2019年11月現在Pythonのバージョンは3.7)のインストールイメージをダウンロードしてください。ダウンロードファイルは、インストールプログラムになっているので実行してインストールします。ターミナルを開いて、Pythonがインストールされていることを確認します。3.7.3前にダウンロードしたサンプルファイル(handson-ml2/)内にrequirements.txtというファイルがあります。これは、サンプルコードを動かすために必要なPythonライブラリの情報が書かれています。packagesjupyter==1.0.0matplotlib==3.1.1numpy==1.17.2pandas==0.25.1scipy==1.3.1....以下のコマンドでrequirements.txtに書いてあるライブラリを一気にインストールできます。requirements.txtただ、requirements.txtはpipというコマンドの形式なのでcondaでインストールするとパッケージが見つからないと言われることがあります。その時はpipコマンドで個別にインストールします。[ライブラリ名]サンプルコードはJupyterノートブックという形式になっています。これはブラウザ上でPythonを動かせる環境で、実行結果がブラウザ上に表示されるので試すのにとてもいいです。Notebookを起動します。notebookブラウザでhttp://localhost:8888にアクセスすると以下のページが表示されます。Notebook次回からいよいよ内容について書いていきたいと思います。Ed.2(イントロ)Tweet2019-09-29(おまけ)ディープラーニングを学んで思ったこと前のエントリーでディープラーニングについて書きましたが、学ぶ中で思ったことや考えたことが色々あったので書いておこうと思います。ニューラルネットはソフトウェアのイノベーション今までのソフトウェアは、人間がいちからプログラムを書かないと正しく機能しませんでした。ニューラルネットではデータを与えることによって自ら改善していくようになったことはエポックメイキングなことだと思いました。ある意味、いままで実現できなかった自動プログラミングが可能になったということだと思います。これが進化すれば、プログラミングさえもコンピューター自身が行うこともいずれ可能になるでしょう。ソフトウェア開発だけでなく、あらゆるものの製造やデザイン、研究などもできるようになるかもしれません。全てをコンピューターに代替するのは難しくて、物事の善悪を判断したり文化的背景を考えたりすることは難しいと思います。コンピューターに依存する場面はこれからますます増えていきますので、すべての人がコンピューターについて正しい知識を持つ必要がある時代になっていくのではないでしょうか。デバイスの進化がイノベーションを可能にするディープラーニングの技術は最近出てきたように思われているかもしれませんが、元々のアイデアは40年前に考えられていたのですが(しかも日本人!)いろいろな意味で早すぎたため注目されませんでした。それが、半導体チップの集積率が上がって実現可能な技術となったため一気に知られるようになりました。華やかなイノベーションも地道な努力があったから可能になったということなのでしょうね。昔、私がPCをはじめて買った頃はゲームしかできない高いおもちゃで役に立たないとさんざん言われましたが、ここまで来るとは想像もできなかったです。学習が一番負荷がかかる機械学習で一番負荷のかかるのは学習です。大量のデータを用意するのも大変ですが、それをニューラルネットに入力して学習させるのにかなりのCPUパワーが必要です。そこで機械学習に特化したチップやGPUなどを使って高速化する技術も出てきました。アプリケーションによってデバイスにも技術革新が起こるという点で興味深い現象です。そんな機械学習を学んでいると、ふと人間の学習についても考えるようになりました。人間でも小中高大と16年もかけて学習していますが、そんなに長期間かけてるのにちゃんと学習できているのかと思いました。テストで点数を取ることばかり気にして本当の理解ができていないのではないか、それは機械学習で言えばテストが通るようなモデルを作っているのと同じだと思います。機械学習には過学習という問題があって、特定のデータに最適化された学習が行われると正しい判断ができないモデルになってしまうことがあります。人間の教育もあまりにもテストを重視するために過学習状態になっている人が多いのではないでしょうか。最近の日本のエリートの劣化を見ると、そんなことも考えてしまいました。技術から人間のあり方が洞察できるというのもおもしろいですね。多くの試行錯誤がいいモデルを作る機械学習では、バッチでひとまとまりのデータを複数回与えてニューラルネットを改善していくことが基本動作になります。最初は赤ちゃんと同じで何もできない状態ですが、試行錯誤しながら学習することによってうまく処理できるようになっていきます。ここで思ったのが、日本社会はこの対局にあるなということでした。学校でも減点主義でミスするとバッテンをくらいますし、企業ではミスすると左遷されたり給料査定を下げられたりします。いうことをすると学習する機会を奪われることになります。一般にはディープラーニングは話題になっていますが、今の日本社会では受け入れられない技術ではないかと思います。日本企業は終身雇用で長く働いている人が多いので、自分が用済みになりそうな技術を積極的に入れようとは思わないでしょう。いう意味で私は日本社会には絶望していますので、機械学習でビジネスするのなら海外がいいのではないかと思っています。ブラックボックスではないAIはブラックボックスで中身がわからないとよく言われますが、これは正しくありません。前のエントリーでも説明したとおり、ニューラルネットのキモはニューロン間の接続の重みデータです。これは見ることはできますが、ただの数値の羅列なので人間がその意味を理解できないだけです。それをわかりやすく表示するツールや挙動を分析するツールなども出てきてますのでこれからだんだんと可視化されるようになるのではないかと思います。怖がるのではなくちゃんと理解して付き合うことが大事だと思います。エッセイ風に書いてみましたが、いかがだったでしょうか?私はディープラーニングをインターネット以来のイノベーションだと思っています。技術的な進歩というだけでなく、仕事がなくなったり誤った使われ方をするなどの負の側面を考えることによって、これから人はどうあるべきなのかを考える機会にもなるのではないかと思います。いずれにしても機械学習によってよりよい社会になってほしいなと思います。11:40(おまけ)ディープラーニングを学んで思ったことTweet2019-09-27ディープラーニングは難しくない機械学習ディープラーニングという言葉は今では専門家だけでなく多くの人が知るようになりました。自動運転車や顔認識などニュースや身の回りで使われるようになっているから広く知られるようになったのでしょうが、ディープラーニングがどのようにして動いているのかエンジニアでも知らない人も結構います。今回、集中的にディープラーニングについて学んだのでそのまとめと学んでいて感じたことを書いておこうと思います。ディープラーニングを学ぼうと思った時に本屋さんで色々見てみたのですが、その多くが数学の教科書みたいなものばかりでした。大学で発展してきた技術なので仕方ないのでしょう。実際に学んでみて思ったのが、線形代数や確率などの数学は使う分にはそこまで数学は必要ではなく、実際のプログラムではライブラリが難しい部分をやってくれるのでがちで数学が必要なところはそんなにありません。後、ほとんどの本が詳細なところにフォーカスしていて全体的にイメージしにくいと思いました。著者が学者かエンジニアの人ばかりなので細かな所に気が行ってしまうのでしょうが、私のような初心者には全体をイメージできるほうが理解がしやすいなと感じました。そんな中で比較的理解できたのが次の2冊でした。見るこの本はPythonを使ったディープラーニングの本ですが、極力ライブラリを使わず底辺から作っていくスタイルなのでディープラーニングのしくみを学ぶにはとてもいいと思います。数学の記述も多少ありますが、高校レベル+線形代数の基礎くらいで読みとけるのでそんなに難しくないと思います。見るこの本もPythonを使っていますが、TensorFlowやKerasなどのライブラリを使っています。前の本はゼロから作っていましたが、こちらの本ではライブラリを使うので実践で使うにはこちらのほうがいいかもしれません。後、ネットの情報などでも色々学んでみて思ったのはディープラーニングの基本的なアイデアは単純だということでした。ディープラーニングの元となるニューラルネットのアイデアは20年以上前からあったらしいのですが、最近ブレイクしたのはコンピュータの処理能力が上がったからでした。学ぶことは多いですが基本はシンプルですので理解するのはそんなに難しくないと思います。ディープラーニングについて詳しく説明していきましょう。ニューロンディープラーニングの元々のアイデアは生物の脳の研究が元になっています。生物の脳がどう動いているかは解明されていませんが、その基本要素である神経細胞(ニューロン)はどう動いているかはわかっています。この図のようにニューロンは電気信号を伝える細胞で、複数の入力と一つの出力を持つ素子になっています。入力信号がある閾値を越えるとニューロンが発火し信号を出力します。ディープラーニングはこのアイデアを元にコンピューター上で実現された技術です。ニューラルネットでは、このアイデアをディープラーニングではどう使われているのでしょうか?ここでニューラルネットというものが出てきます。ニューラルネットとは、ニューロンを複数束ねてそれぞれを信号線で接続した形のものを言います。下図のようなものが一例です。ニューロンを複数持つグループが層になっていてそれぞれ接続されているものをニューラルネットといいます。図のように入力層、隠れ層、出力層と呼ばれる層で構成されていてこの順番で信号が流れます。この隠れ層が100以上持つようなニューラルネットがディープラーニングでは使われます。当たり前ですが、この層が増えるに従ってマシンパワーが必要になります。ディープラーニングがコンピューターの能力が上がらないと実現できなかった技術であることがこれで理解できると思います。ディープラーニングワークフローディープラーニングでは、データを読み込んで学習し、学習結果が正しいかをテストした後にAIとして使えるようになります。ディープラーニング入門でよく使われる手書き文字認識の例で具体的に説明します。コンピューターに学習させるために教師データというものを用意します。この例では、教師データは手書き文字画像とそれがなんの文字であるかを表すラベルがペアになっています。その教師データをニューラルネットに大量に入力します。この学習の処理がディープラーニングで一番負荷のかかる処理です。学習の結果、ニューラルネットが手書き文字認識のために最適化されますので、それがちゃんと正しいかをテストします。テストデータは学習したときと同じ形式のデータを使いますが、データ内容は別のものを用意します。学習データに都合のいいニューラルネットになっていないかをチェックするためです。ニューラルネットには過学習という問題があり、特定のデータに過度に最適化されると違うタイプのデータをうまく処理できなくなるからです。何を処理するかにもよりますが、正解率99%以上が現実に使えるニューラルネットのようです。テストで問題なければ実際のデータで画像認識を行います。これが一般的な機械学習処理のワークフローになります。ニューラルネット上で学習処理はどう行われているのかを次に説明します。前にニューラルネットは層で別れていてニューロン同士が接続されている構成をしていると説明しました。この図ではニューロン同士がフルメッシュで接続されていますが、特定のニューロンの接続だけを取り出したのが次の図になります。x2から入力されたデータがyで出力されるということを表しています。w2という値で「重み」と呼ばれている値です。これはニューロン間の接続に付随する値で、w1はx1にかけられw2はx2にかけられます。ちなみにbはバイアスと呼ばれていてニューロンの発火のしやすさを制御します。この例では右にある方程式の計算が行われて計算結果が0より大きければyは1、0以下ではyは0となるニューラルネットを表しています。先程の手書き認識の例でいうとx1,x2は入力画像データです。w2は学習処理のときに設定されます。機械学習とはこの重みデータを最適な値に設定する処理のことをいいます。これはすごくシンプルな考え方だと思いませんか?私が最初にこのことを理解したとき、機械学習ってこういうことなのかと目からウロコでした。重みの値を変えることによって手書き文字が読めるようになったり翻訳できるようになったりするのです。実際は、後で説明するように特殊なニューラルネットを使ったり速度を上げるためのテクニックとかあるのですが、基本はこれです。これを抑えておけばあとはTipsみたいなものと考えていいと思います。あともう一つ説明しなければいけないのが活性化関数についてです。前に、ニューロンは入力によってしきい値を越えると発火すると言いました。したがって、どのような値で発火するか判定する関数を定義する必要があります。それが活性化関数です。上のニューラルネットの図のyのニューロンで重みをかけて計算した結果を活性化関数に渡しています。上図の右の方程式は、重みによる計算結果を活性化関数に与えてニューロンが発火するかどうかを判定しています。活性化関数としてはシグモイドとReLUが代表的ですが、グラフにあるようにある閾値を越えるとyの値が増えるのがわかると思います。活性化関数もライブラリで用意されてますので引数を渡して呼べばいいだけです。重みデータの最適化はどのように行われるのでしょうか?最初は、重みデータは0で初期化されていたりランダムな数値が設定されていたりします。それを、教師データを読み込んで正解と予測値を比べて差異がなくなるまで繰り返し試行錯誤を行います。上の図で損失関数というのが正解と予測値の差を求める関数で、オプティマイザーは差の値を元にニューラルネットの重みデータを更新します。損失関数には二乗和誤差とか交差エントロピー誤差などがあり、オプティマイザーのアルゴリズムもRMSPropやAdamといったものがありますが、扱うケースによってライブラリのパラメータで指定することができますので内部の詳細なアルゴリズムまで知らなくても使うことができます。(もちろん、興味のある方はぜひ勉強してみてください。)CNN(畳み込みニューラルネット)ディープラーニングが一番脚光を浴びたのは画像認識です。動物や人の顔を見分けたり地形を検知したりいろんなところで応用されています。Net)と呼ばれるものです。上図に畳み込み層とプーリング層というのがあると思いますが、これは画像の特徴あるところを抽出する層です。詳細は本を読んでいただいたほうがいいと思いますが、例えば人が猫の写真を見た場合、顔の形とか目などの特徴を抽出して判断しているらしいのですがそれと似たことをCNNでも数値処理として行っています。後、ソフトマックスというのは複数の値を出力するための層で、例えば猫である確率と犬である確率と人である確率を出したい場合は3つの出力を持つソフトマックスということになります。いまやディープラーニングは人間の認識能力を上回るようになりました。人間でも気づかないような特徴をコンピューターが認識できるようになったということなのでしょうね。RNN(リカレントニューラルネット)ただ、CNNには過去のデータを覚えられないという弱点があります。文脈で判断する必要のある文章や過去の動作情報が必要な対物検知など時系列のデータを扱うものには使えません。上図左のRNNが一つのニューラルネットを表していて、自分の出力を入力に再投入します。右図は詳細の図で、前のニューラルネットの結果を次のニューラルネットに入力することによって前のデータの反映した出力を行うことができます。した説明になってしまいましたが、ディープラーニングを学ぶ上でこれだけ前知識があれば本を読む時にかなり理解しやすいと思います。ご紹介した2冊は私が見た中では一番わかりやすいのでぜひ読んでみてください。ネタが溜まってきたらブログでまとめたいと思います。ElixirElixirはマルチプロセスを前提とした関数型プログラミング言語でエリクソンが電話交換機プログラムのために開発したErlangという仮想マシンシステム上で動作します。Elixirが流行ってきた背景として、CPUが複数コアで構成されるようになり個人のパソコンでも8コアや16コアのCPUが使われるようになってきたのがあると思います。CやJava,Pythonなどの現在主流の言語はシングルコアのCPUを前提にした言語なのでマルチコアをうまく扱えません。そこでGoやRustなど新しい言語が登場してきたのですが、Elixirはその中でも比較的とっつきやすく関数型プログラミングのよさもうまく取り込んだ言語です。古いタイプの言語に慣れている人にはそこがとっつきにくい部分かもしれません。最新の情報を得たかったのでこちらの本で学びました。ペーパーバックこの商品を含むブログを見るElixirを使ってみて私がいいなと思ったのはこんなところでした。複数プロセス間のメッセージ通信が簡単Lispっぽいリスト昔、EmacsというエディタでLispという言語を使ったことがありますが、Elixirの配列はLispによく似てると思いました。Lispはリスト構造が基本でcarやcdrというリストの先頭やそれ以外を取得する関数があります。それと同じような機能がElixirにもあります。配列の先頭を取得するには以下のように書きます。]ちなみにiexはElixirのシェルみたいなものでRubyでいうirbと同じものです。この言語を作った人は明らかにLisperですね。mapというデータタイプを使うことができます。map[:a]1mapとはキーと値がペアになっているデータで、他の言語では連想配列と呼ばれているものです。スキャン処理などを高速に行えるようにハッシュ値のようなデータです。Rubyのシンボルを同じですね。再帰を使ってループを使わないLispでは再帰呼び出しというテクニックをよく使いますが、Elixirでもよく使われます。再帰とは関数の中で自分自身を呼ぶことをいいます。フィボナッチ数を計算する関数はこんな感じです。2)endフィボナッチ数は最初0と1から始まるので停止条件として書いておくべきなのですが上の例では省略しました。CやJavaで書く場合はforループなどで集計していくことが多いですが、再帰で書くことによってシンプルな記述になるところがいいですね。再帰は慣れていないと訳がわからないコードになりがちなのでプログラマーの習熟が必要です。再帰は普通スタック領域をたくさん消費したり実行速度が遅かったりするのですが、Elixirではうまく最適化してくれているようです。関数シグネチャーを使って条件分岐を行う例えば、C言語でエラー処理のコードはこんな感じになります。}}Cでコード書いていると条件分岐でエラー処理だらけになることが多いです。Elixirではこういう書き方ができます。endend波括弧の引数はタプルと呼ばれているデータ型で変更できない配列です。上の例では同じ名前で引数の違う関数func1が定義されます。Elixirでは同じ関数名でも引数を変えることにより別の関数として定義することができます。したがって、この例では:okを引数に与えると通常の処理をして:errorを与えるとエラー処理が行われます。このように、Elixirではifなどの条件分岐をできるだけ使わないようにしてコードの見通しをよくすることができます。関数を複数つなぐパイプオペレーターシェルをご存知の方はコマンド同士をつなぐパイプという機能があるのをご存知だと思います。-lUnixのコマンドは一つ一つは単純な処理しかできませんが、パイプで組み合わせることによって様々な処理を行わせることができます。Elixirにもパイプオペレーターというものがあり、関数をつないで複雑な処理を行わせることができます。rocks"という文字列がString.upcase()関数の第一引数として与えられます。rocks")を呼んでるのと同じことになります。次のString.split()も同様にデータが流れます。Unixエンジニアにはあたかもシェルスクリプトを書いているみたいでたまらない機能ですね。大量プロセスを起動してもオーバーヘッドが少ないElixirでは簡単に複数のプロセスを立ち上げて並列で処理させることができます。ここでいうプロセスとはOSネイティブのプロセスではなくElixirのVM上で実行するプロセスなのでとても軽いものになっています。プロセスの生成は以下のように行います。[function_params])例えば、複数のプロセスで合計するプログラムはこんな感じになります。endend大まかに説明すると、spawn(..)でプロセスを生成してpsum()という関数を別プロセスで並列に動かしています。psum()関数はcalc_valの要素を合計します。このプログラムをプロセス数1000,10000,100000で動かした結果がこちらです。:ok}run関数のパラメータがプロセス数で結果の数値は実行時間をマイクロ秒で出力します。ご覧の通り、10万プロセスで0.1秒ほどしかかかっていません。プロセスによるオーバーヘッドはほぼないと考えて開発できますね。複数プロセス間のメッセージ通信が簡単Elixirの一番の売りはプロセス間通信が簡単なことです。次の例はエコーサーバーを生成してクライアントのメッセージをそのまま返すプログラムです。World!"というメッセージを送信するとサーバーがそのまま返します。do...のところで受信しています。msg}->のところは送られてきたメッセージのパターンを記述するところでマッチすればそれ以下の処理が実行されます。したがって、このパターンを複数持たせればメッセージパターンによって違う処理をさせることができます。LinuxでC言語でデーモンを書くよりはるかに簡単ですね。触ったところではこんな感じでした。ElixirにはRailsに似たウェブフレームワークのPhenixや組み込み系フレームワークのNervesなどがあっておもしろそうです。Elixirはマルチプロセスで通信しながら処理を行うのが当たり前なのでRubyやPythonとは違った作りにできると思います。次回ウェブアプリ開発を行うときはElixirを使ってみたいなと思いました。Vue.jsVue.jsはReact,Angularに並ぶJavascriptフレームワークです。フロントエンド開発にはかかわらなかったのでいろいろハマりましたが、備忘録も兼ねてまとめてみました。Vue.jsのいいところリアクティブシステムVue.jsはリアクティブシステムになっています。リアクティブシステムとは、ある変数の値を変更するとブラウザ上の表示も自動でアップデートしてくれるしくみをいいます。200)にしてもtotalの値は変わりません。リアクティブシステムではpriceの変更にともなってtotalが更新されます。Vue.jsでは以下のように書きます。2000と入力するとTotalが自動で20000に更新されます。これによりネイティブアプリのようなダイナミックなウェブアプリを作ることができます。リアクティブでないJavascriptで同じようなことをやろうとすると、自分で変数の更新をチェックし変更されたらターゲットフィールドの値を更新するという処理を自分で書かなければいけません。ダイナミックなウェブアプリを開発するときにとても便利ですね。UIを部品化できるVue.jsは、コンポーネントと呼ばれるしくみによってソフトウェアを部品化して再利用できるようになっています。ボタンの押した回数を表示する部品はこんな感じに書けます。times.</button>'})コンポーネントをVue.jsで利用するためには以下のように書きます。})counterというタグでクリックすると数えてくれるパーツとして扱えます。フレームワークがある幸せ複数のメンバーでチームで開発する場合、フレームワークがあると規約に則って開発することができるのでメンバー間で話し合いながら作るときにはとても役に立ちます。Vue.jsでは単一ファイルコンポーネントという形式があります。center;}</style>templateタグのところが表示するHTMLで、scriptタグがJavascriptコード、styleタグがCSSコードを記述するところです。通常、それぞれのタグ部分はHTMLファイル、JSファイル、CSSファイルに分けて記述されますが、一緒に書けるようにすることでモジュール性を強化しています。vue-cliを使えば自動的にディレクトリ、ファイルを生成して整えてくれます。vue-cliパッケージをnpmでインストールしてプロジェクトの雛形を作成してみましょう。createでは以下のようなファイルが作成されます。Vue.jsプログラムファイルはsrcディレクトリ下にあり、以下のようなファイル構成になっています。App.vueとmain.jsがプログラムメインファイルで、componentsディレクトリ以下のファイルがコンポーネントのプログラムファイルです。このようにvue-cliでプロジェクトの雛形が作成されます。Vue.jsのイマイチなところコンポーネント間のデータやりとりが面倒コンポーネント構造になっていることによってプログラムの規模が大きくなってもプログラムがスパゲッティー化しないのでいいのですが、コンポーネント間で情報をやり取りする必要が出てきて結構面倒くさいです。コンポーネント間のデータのやり取りは2つの方法があります。propによるデータのやりとり親のコンポーネントから子のコンポーネントへデータを渡すには子コンポーネントにpropsを定義します。v-bind:my-message="こんにちは"></child-component>...HTML上では属性名は大文字小文字を区別しないので、タグ名はchild-component、属性名はmy-messageという感じでキャメル形式をケバブ形式に変換しています。propsを使う方法は親から子への一方向でしか情報をやりとりできません。子から親に情報を伝えるためにはemitを使って可能です。情報の伝達方向でやり方が違うというのもいまいちな感じです。Vuexによるデータのやりとりしかし、コンポーネント間の関係が親子関係であるとはかぎりません。いうときはVuexを使います。Vuexとは、Vue.jsアプリケーションローカルに持つことのできるDBのようなデータ格納領域を作成するライブラリで、全てのコンポーネントからアクセスすることができます。Vuexのストアを定義します。}})stateに格納するデータを、myMessageと定義して文字列を持つようにします。Vuexでデータを更新する場合は、commit()を呼ばなければいけないお約束になっていて、mutationsはその関数を定義するところです。次に、main.jsでstoreをVue.jsに読み込みます。store}).$mount('#app')次に、コンポーネントでstoreにアクセスしてみます。}}</script>これはテキストボックスに入力してボタンを押すとVuexの情報が更新される例です。これでVuexを介してコンポーネント同士のデータのやり取りができるようになりますが結構面倒ですね。Vuexについての詳しい解説は以下のURLを参照してください。vuex.vuejs.orgリアクティブシステムがわかりにくいリアクティブシステムはリッチなUIを作るには便利なのですが、どのタイミングで更新されるのかがわかりにくいというのがあります。}}</script>VuexデータのshowFlagでコンポーネントを表示したり消したりしたいのですがうまく動きません。(これで結構長い間悩みました。)VuexストアのshowFlagが更新されたらshowComponentが呼ばれてほしいのですがそうはなりません。v-ifのほうでリアクティブな変数をモニターしているみたいなのですが、computedメソッドの中までは見てないみたいです。いうところが最初とまどうところです。学習コストがやや高め通常プログラムは記述した順番に実行されるものですが、リアクティブシステムは何かを変更したらキックされるイベントドリブンなシステムなので慣れるまで少しかかります。モジュール化でソースが複数ファイルに分かれてしまうので、なれないと全体が見えづらいというのもあります。結論ちょっと使った感じでは、Vue.jsは規模の大きなフロントエンド開発向けなのかなと感じました。うまく動かないときに調べるのが結構大変だったのでデバッグがもう少しやりやすくなるといいと思いました。Reactも少し触ってみましたが、なんでもかんでもJavascriptのコードにしてしまうReactよりVue.jsのほうがわかりやすい印象でした。あと、VuexとVue-Routerはほぼ必須で使うコンポーネントだと思います。最初は少しとっつきにくいですが、慣れれば使って損はないのではないでしょうか。CSSウェブページでレイアウトするときは、いままではdivでボックス作ってスタイルシートのfloatで並べるというのが一般的な方法でした。(ちなみに、ウェブ黎明期はtableで全てレイアウトしていました。最近はCSSグリッドなるものがあるというので使ってみたら、とても便利だったのでブログ記事にしました。例として、以下のようなレイアウトをCSSグリッドで作ってみましょう。HTMLは以下のようになります。</section></body></html>divボックスにそれぞれbox1,box2,box3とIDをつけておきます。次に,CSSファイルは以下のようになります。gridとしてCSSグリッドを使う指定をします。次に、行方向のグリッドのレイアウトを以下のように定義します。20px;これは以下のように両側に20pxの余白をつけて中央にコンテンツを200pxの幅で配置するレイアウトになります。カラムの区切りは左から1,2,3...と番号がふられますので、これでコンテンツを表示する位置を指定します。このページはsection部分が表示されるコンテンツですので、sectionのgrid-columnを2に指定します。次に、列方向のレイアウトの指定を行います。こちらも行と同じように以下のように設定します。200px;[head]とか[r1]というのが追加されていますが、これは列を番号ではなく名前で指定できるようにするための設定です。headerで以下のように設定します。head;...表示コンテンツを含むsectionは、以下のように設定します。...これで、大枠のレイアウトが完了です。4つのdivはさらにsectionの中でグリッドを設定してレイアウトしています。このようにグリッドを使えば、方眼紙の上でデザインするようにレイアウトすることができます。floatを使うより直感的なので慣れればこちらのほうがデザインしやすいのはないでしょうか。ウェブ開発FirebaseはGoogleが提供するBaaSと呼ばれるクラウドサービスです。firebase.google.comこれからは自分でサーバーを構築する時代でもないと思ったので、Firebaseを試してみました。firebaseに登録してウェブアプリをデプロイするところまでやってみたのですが、ちょっとハマったところもあったのでまとめておきました。新しいプロジェクトを作成します。作成方法についてはこちらを参照してください。Shellを開きます。これはブラウザからクラウドのインスタンス上でシェルを使うためのものです。GCPダッシュボードの右上のプロンプトマークをクリックします。すると、下にシェルのターミナルが開きます。サンプルウェブアプリのソースを以下のコマンドでダウンロードしておきます。https://github.com/firebase/friendlychat-web次にFirebase(https://firebase.google.com)のサイトにブラウザでアクセスして、プロジェクトを作成します。プロジェクトを作成すると以下のようなページが表示されます。Firebaseは以下のようなサービスで構成されています。クラウド関数サンプルアプリを動かすためにAuthentication,Database,Storageを設定します。Databaseの「データベースの作成」をクリックします。「テストモード」を選択し、「データベースを作成」をクリックします。データベース作成完了です。次に、認証機能を設定します。左メニューのAuthenticationをクリックし、「ログイン設定ボタン」をクリックします。「ログイン方法」タブを選択した後、ログインプロバイダーとしてGoogleを選択し「有効にする」スライダーをオンにします。Chatと入力します。Google認証が有効になりました。次に、Storageの設定を行います。「スタートガイド」ボタンをクリックします。「セキュリティルール」ダイアログのOKボタンをクリックします。これでFirebase側の設定は完了です。次に、サービスアカウントを作成します。サービスアカウントとは、アプリケーションや仮想マシンに属する特別なGoogleアカウントです。GCPからFirebaseにアクセスするには事前に作成しておく必要があります。「認証情報」をクリックします。「認証情報」の「認証情報の作成」-「サービスアカウントキー」を選びます。「サービスアカウント」メニューで「新しいサービスアカウント」を選択し、「役割」メニューは「Project」-「オーナー」を選択します。アカウントが作成された後、暗号鍵が含まれたJSONファイルがダウンロードされますので、PCの適当なところに保存してください。PC上のエディタでダウンロードしたJSONファイルを開いてテキストをコピーします。次に、GCPコンソール上でvi等のエディターを開いてペーストしてファイル保存してください。$HOME/friendly_chat_web/web/fbtest.json)そして、GCPシェル上で保存したJSONファイルのパスを環境変数GOOGLE_APPLICATION_CREDENTIALSに以下のように設定します。GOOGLE_APPLICATION_CREDENTIALS=$HOME/friendly_chat_web/web/fbtest.json次に、アプリのディレクトリで以下のコマンドを実行します。--no-localhostブラウザでアクセスして認証するためのURLが表示されるので表示されたURLにアクセスしてサービスアカウントのアクセスを許可してください。以下のコマンドをGCPシェルで実行してください。initラジオボタンになっているところの「Database」と「Storage」に上下カーソルキーで移動しスペースキーでチェックを入れてリターンします。project)を選びます。その後、何回か聞かれますがリターンで問題ないです。アプリケーションのデプロイを行います。プロジェクトIDプロジェクトIDは、Firebaseのプロジェクトの設定で確認できます。URLをブラウザでアクセスするとウェブアプリが動作していることを確認できます。GCPとFirebaseの接続設定のところで結構はまりましたが、認証やデータベースをFirebaseに任せられるのはいいですね。いじってみたいと思います。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。