百伊蔵のブログ(´・ω・`)

育児しながらプログラム勉強中です

Flask + React + Redux のボイラーテンプレート見つけた

探してたら、GitHubにそのものがありました(´ω`)わーい

https://github.com/dternyak/React-Redux-Flask

React、Redux、Flask(Python)で、さらに、Material-UI まで組み込んである! きゃー!作りたかった組み合わせで完璧!!

ボイラーテンプレートを公開してもらえて、一気にスタート出来るなんて!!

どこのどなたか存じませんが、ありがとう!

ディレクトリ構成も完成されている。 BackEnd、FrontEnd、それぞれ分けて実行可能

すばらしすぎる。

ただ、若干構成が古いのでパッケージのバージョンアップは必要ぽい。 自分の環境だと、node-sass のバージョン上げないと、node start した時にエラーで動きませんでした。 (Forkして新しいバージョンを公開しろよ、という話なのかもですが、、、いかんせん自信なく…)

これをベースにWebアプリ作っていきます! さっそくフリープランが出た IBM Cloud (旧 BlueMix)に乗せてみよう・・・

読了:作りながら学ぶReact入門

この3連休で、読み切りました。「作りながら学ぶ React入門

ふぅー

Reactというキーワードは以前から聞いていたものの、なかなか手を出すチャンスがなく、、、先延ばしになっていたのですが ようやく勉強することが出来ました。

フロントエンド系は特に進化が早い分野で、ようやく使い方がわかったと思ったら「まだxxxで消耗してるの?」みたいな記事で時代遅れ感を突きつけられたりするため、40歳を超えたエンジニアにとって、ある種の精神的な強さが求められる恐ろしい分野なのであります。(被害妄想)

適度な量と内容で、一気に概要をつかめる良書

技術書にも色んな種類がありますが、自分が新しい技術を勉強する場合は、以下の基準で本を選んでいます。

  • 読み切りやすい(200ページ前後くらい)
  • プログラムを動かして確認できる
  • 広く浅く

日中の仕事とは別で勉強時間を取っている場合が多いため、最初の一冊は長くても1〜2週間で読み切れる量にしています。(飽きちゃうので・・・)

また、そんなに理解が早い方ではないため、本文だけでなくプログラムを動かして確認出来るという点も重視しています。

フレームワークは、設計理念/概念の理解が大切だと思うのですが、目に見える何かがあるわけではないので、文章だけで理解を深めるのはとても難しいです。
そのため、プログラムを動かしながら本文の解説を何度も読み返し、頭の中で概念図が書けるようになるまで試行錯誤するようにしています。

なので、実際に動くプログラムが提供されているのはすごく助かります。

本書でも、じゃんけんアプリを少しずつ完成させながら、解説が進むので、とても読みやすかったです。

Reactを使って簡単なアプリを作る

コンポーネントの使い方を書き換えながら学習

Material-UIで、見た目を良くしてみる(書き換え)

ルーティングを足してみる(書き換え)

テストコードを追加してみる(書き換え)

とすすみ、本格的になっていきます。書き換えながらパワーアップしていくので、差分がわかりやすくて良かったです。

また、見た目(CSS Framework)の組み込みと、テスト自動化は、Reactと直接関連しませんが一緒に勉強しておきたい分野だったので、そこがサンプルコード付きで網羅されてたのは、とても助かりました。

すぐに同じ構成で、アプリ開発を初められます。(∩´∀`)∩ワーイ

Redux などは補足扱い

React関連でインターネットの記事を読むとき、大抵はReduxがセットで語られます。
ところが本書ではReduxは補足情報扱いで深く触れられていません。

この点は、本書を買う時点で悩みました。「Reduxまで扱った本の方が良いのでは・・・」とも思ったのですが、読了してみると、まったく問題ありませんでした。

むしろ、Reactだけに絞って解説してくれている分、内容が複雑になりすぎず、サクサク進めたと思います。
Reduxは次に勉強しないと行けない部分ではありますが、まずは「Reactで簡単なアプリが作れる」という点では自信がもてるようになり、自分の中で良い足場が作れた気がします。

どんな人にオススメ

かなり丁寧に解説されているので、相当初級の方でも読める本だと思います。

とはいえ、「変数とは?」といったレベルは理解している前提ですので、全くの未経験では辛いでしょう。
できれば npm は使ったことがあって、JQueryでWebページを作ったことがあるくらいの知識量があった方が良いとは思います。

そのうえで、「最近よく聞く React というのを、ちょっと触ってみたい」という方には、かなりオススメです。
#ほぼ、自分を思い起こして書いてるだけですがw

よーし。
React使って、アプリ開発してみるぞ!!

作りながら学ぶ React入門

作りながら学ぶ React入門

サンプルコードの修正版つくりました。

本書では、Material-UI 0.19 を使っていますが、これを Material-UI 1.0.0 beta 19 に書き換えたコードをGitHubに上げました。
テストコードも動きます。

GitHub - momoizo/react-janken: 書籍「作りながら学ぶReact入門」のjankenプロジェクトです。Material-UI ver1.0 β.19 対応版

Sparkさん、存在感が薄れ深層学習をはじめる

日経BPさんの記事から。

分散処理ソフトのSparkは、2014年ごろには機械学習の大規模化に欠かせない存在だと認識されていた。しかしその後の深層学習の台頭によって存在感が薄れていた。

business.nikkeibp.co.jp

そうだったんですね… 今年の春、ようやく案件でSpark触れたと思っていたら、、、わずか3年で存在感が薄れてはったんですか…(´・ω・`)時代の流れ早い

少し前に深層学習(Deep Learning)というキーワードが大きく出始めた頃は、「深層学習は機械学習の中の一つの分野」という説明をよく見かけたのですが、もはや「深層学習」に対応出来ていないと、存在感が薄れてしまう時代になったのですね。

それだけ、現在のAI開発では深層学習を扱えることが大切ということなのでしょう。

まぁ、確かに深層学習ってひと皮むけた感はありますもんね。 機械が勝手に特徴量を見つけるというあたり、機械学習の人力感を大きく超えてる。

さて、オッサンプログラマとしては、この「深層学習」のキャッチアップが、今後どこまで必要になるのかが気になるところですよね。 自らの生き残り戦略的に。(´・ω・`)

はたして、Javaが流行った際の「オブジェクト指向」ほどの必須スキルになる、、、のでしょうか?

   

うーむ。ちょっとピンと来ないなぁ。

どちらかというと、データベース管理者のような専門職化という感じでしょうか。 AIアルゴリズムの設定とチューニングを実施するような。

ただ、身近な案件でサクッと深層学習を使って、チューニングが必要になるような場面は、まだ先のような気がします。 当面は、呼ばれるとしても大企業の実験的プロジェクトとかなのかなぁ。

で、一般プログラマは、「深層学習」の結果を受け取って表示するロジック書くだけと。

   

ただ、なんというか、、、現状のECサイトの、いまいち使い勝手の良くない検索機能とか、深層学習の応用方法が見えてきて一般化したら、次のステージに行きそうな可能性も感じるんですよね。 一気に、コンピューターの利便性が上がりそうな何かがありそうな、、、

というわけで、身につけておけば差別化にはなりそうですし、何より面白そうなので勉強しておこうかなと思います。

技術を知るには、まず実装/アルゴリズムの理解から。

人生3度めのチャレンジ中です。4章をもうすぐ読み終わりそう。 ここまでは、わかった。(多分)今度こそ最後までたどり着きたい…

深層学習系の本は、何冊か浮気しましたが、やはりこの本が一番わかりやすいです。 基礎の説明も丁寧だし、手を動かしながら確認出来るのが嬉しい。 改めて、オススメです。

でもやっぱり、40過ぎてから微分だの、線形代数だの、辛すぎるんですが・・・(´・ω・`)

MCP 70-473 合格しました!

ひょんなことから、会社からMicrosoft 認定資格試験の1つである「MCP 70-473 Designing and Implementing Cloud Data Platform Solutions」を受けるよう拝命されまして、、、 先日受験してきたのですが、無事合格することができました!

ワーワー(∩´∀`)∩

長く苦しい3週間だった、、、 もうこれで帰宅してから模擬試験をやらなくて良いかと思うと、心晴れやかな気持ちでたまりません。

しばらく資格試験は休憩したい・・・。

MCP 資格試験とは

Microsoft 認定資格のうち、技術者向けのものの総称を MCPと呼びます。 MCPに関する解説は、以下が非常に分かりやすかったです。

マイクロソフト認定資格 マイクロソフト認定プロフェッショナル(MCP)とは (1/3):資格Zine(しかくジン)

※どきどき制度変更等があるようなので、実際は最新の情報をチェックし直すのが良いでしょう。

ちなみに、今回受験したのは MCSE カテゴリの試験でした。 MCSEは、MCSAの取得が前提となっているため、MCSAカテゴリの資格2種を合格しないと「MCSE資格保持者」と名乗ることができません。 つまり今のままでは、宝の持ち腐れならぬ、合格の持ち腐れ的な状況になりそうです。

とほほー。 やっぱり資格試験、まだまだ受けなあかんのかーい。

勉強方法

■試験前の自分

自分は、SQL Serverは業務ではほとんど触ったことがありませんでした。 SQL Serverのログイン、ユーザー、スキーマといった考え方は、この試験勉強中に覚えたくらいです。

仕事の都合でOracleや、MySQLは多かったのですが・・・。(Oracleは9i のときに、これまた会社命令で資格試験でSilverを取りました)

ある意味、SQL Serverに関しては知識ゼロのスタートだったと思います。

※とはいえ、OracleMySQLを触っていて、レプリケーション等のデータベース管理に関する知識は間接的に役に立ったと思います。

■勉強方法

ひたすら模擬試験をやりました。

平日の業務時間中は勉強にあてられなかったため、帰宅後、休日の一部しか勉強時間がありませんでした。 そこで、まず模擬試験から着手し、間違えた問題を「なぜ間違えたのか説明できるレベルまで復習する」という勉強方法を繰り返しました。

自習書などで知識をつけてから模擬試験という進め方だと時間が足りないと判断したためです。

■模擬試験

模擬試験はMicrosoft公式サイトからリンクしている、こちらを注文しました。

www.mindhub.com

これは、ブラウザから行える模擬試験のサービスになります。 $99で30日間利用できます。

購入手続きはドルですし、サービスサイトも英語なのですが、模擬試験自体は日本語で受けられます。

本番の試験は、約50問前後の出題数ですが、模擬試験ソフトは全部で150問の問題が収録されていました。

特に、参考書等が販売されていない試験に関しては、出題傾向を知る手がかりが少ないため受験を検討されている方にはオススメだと感じました。 ただし日本語は、結構怪しい部分があります。

例えば、「エラスティックデータベースプール」が「弾力性のあるデータベース機能」のように表現されていたり。 エラスティックを弾力性って言われちゃうとなぁ、、、まぁ、そうなのかもしれないですが、、、

データベースが、ボヨンボヨン弾みそうだぜ。

試験対策

試験を振り返ってみて、役に立った点を整理してみます。

■模擬試験は役に立った

確かに、模擬試験とほぼおなじ問題もいくつか出題されていました。

ただ、割合的には20%程度だった気がしますので、模擬試験が合格ラインなら資格試験も合格できるか、、、と言われると、微妙なところはありそうです。

一方で、模擬試験で網羅している出題範囲は、本番試験でも同様の傾向で出題されていました。 ですので、どの技術に関して問われるのか出題傾向をつかむという意味では、非常に良かったと思います。

日本語参考書がありませんので、受験に不安を感じておられる方にはオススメです。

■誰かに説明するつもりで理解する

模擬試験に関しては、問いと回答をただ覚えるのではなく、「なぜ、その回答なのか。他の回答がNGなのはなぜか」誰かに説明するつもりで確認すると良いと思います。

例えば、「トランザクショナルレプリケーションは、レプリカに読み取り専用が多く、マージレプリケーションは、レプリカ側でも更新が多い」という解説が合った場合に、その内容をただ暗記するのではなく「それぞれのレプリケーションの特徴」を誰かに説明するつもりで理解しておくと良いと思います。

すぐに「なぜ?」「何が違うの?」と聞いてくる、ちょっとウザい会社のあの人を思い出して下さい。 あの人に質問された時の答えが思い浮かんだら、ひとまずオーケーです。

本番試験では、模擬試験で扱った技術が違う確度から問われる問題もあったのですが、上記のように「仕組みを理解」出来ていると対応しやすくなります。

画面操作や、コマンドなども可能であればマニュアルをちら見しておけると良いと思います。 使うツールが問われる問題などが出た際に、画面イメージで頭に入っていると、思い出しやすくなります。

#自分は、そこまで勉強しきれませんでしたが、、、

おわりに

期間が短かったこともあり、会社命令だしダメ元のつもりではあったのですが、それでもキチンと試験勉強しておいてよかったです。 合格出来たのもそうですが、SQL ServerやAzure SQL Databaseに関して体系的に勉強することが出来ました。

初めて知った機能等も多かったですし。

せっかく勉強したので、実際に使ってみながら本当の理解につなげていきたいと思います。

Visual Studio Codeの新規ファイル作成ショートカット(Ctrl + N)の挙動を変える

Windows環境でVisual Studio Codeを使って作業しているのですが、新規ファイル作成をするショートカット(Ctrl+N)のデフォルトの挙動がどうにも不便でした。 これを、うまいこと素敵な挙動に変更できました!ということで、そのメモです。

■元の挙動 まずは、現状のショートカット操作での不満点です。

Visual Studio Coeeで Ctrl + Nを押すと、デフォルトでは無題のドキュメントが新しいタブで追加されます。 しかし、このタブは、まだファイルとしての実態はありません。 ですので、ファイル拡張子に応じたシンタックスハイライト等も当然機能しません。 そこで、保存しようと思ってCtrl + Sショートカットキーを押してみると、Windowsのファイル保存ダイアログに飛ばされてしまいます。

このダイアログのデフォルトのフォルダは、常に現在開いているプロジェクトのルートフォルダになっています。 ですので、適切なフォルダに移動して保存が必要なのですが、Windowsのファイル保存ダイアログの操作はキーボードだけでは難しいため マウス操作が求められます。

これが面倒くさい!

せっかくプログラムをノリノリで作っていて、ただただ同じフォルダに新しいクラスを追加するためにプログラムを追加したいだけなのに以下の操作が必要です。 1. Ctrl+Nを押すと、無印のファイルが作られる 2. Ctrl+Sを押すと、Windowsの保存ダイアログが表示される 3. マウスで適切なフォルダに移動して、 4. マウスでファイル名欄にカーソルを移動させて、保存ボタンを押す

マウスに持ち替えないとイケナイだなんて!! アリエナーイ!! ノリノリのプログラミング作業で、リズム感途絶えるわーーー・・・(´・ω・`)

■修正後の挙動

この非常に面倒な挙動が、keybindings.json に以下を追加するだけで解決出来ました! ※既存の Ctrl+Nショートカットの動作を書換えています

[ { “key”: “ctrl+n”, “command”: “explorer.newFile” } ]

コレを追加すると以下のような挙動になります。

  1. Ctrl+Nを押すと、Visual Studio Codeのエクスプローラーで現在の作業フォルダに新規ファイルが追加され、ファイル名入力待ち状態となる。
  2. 適切なファイル名を入力してEnterを押すと、新規ファイルが作成され、すぐ編集が開始出来るようエディタに開く カーソルも新しいファイルに移っているので、後は書き始めるだけ!

すばらしい!2ステップです!

これで、新規ファイル追加のたびにマウスに持ち替えなくても良くなりました!(∩´∀`)∩

ノリノリプログラミングも、そのままのリズム感で作業出来そうです!素晴らしい! もう、製品のデフォルトをこの挙動でお願いします!!

Angular4時代にAngular-CLIでAngular2の雛形を作る

angular は、2系から CLI (コマンドラインのインターフェース)を使って、アプリケーションの雛形を作ることが出来るようになっています。

このツールは angular cli という名前です。

最近、こうした形式のプログラミングツール多いですね。 慣れるまでは、「なんでプログラム書き始めるまでに、こんな幾つものコマンドを覚えて実行しないとダメなのか」とクラクラしたものでした。

かると便利なんですけどもねー。 変化への適応能力落ちてるわー(´・ω・`)

最新の angular-cliは、1.0.3 になっています。

GitHubのページを見ると、インストールは以下のコマンドで実行することになります。

npm install -g @angular/cli

これで ng コマンドが使えるようになり、ng new で雛形を作ることが出来るようになります。 が、、、生成される雛形は、angular 4.0 を使ったものになります。

生成された雛形のpackage.json を見ると、以下のようになっています。

“dependencies”: { “@angular/common”: “^4.0.0”, “@angular/compiler”: “^4.0.0”, “@angular/core”: “^4.0.0”, “@angular/forms”: “^4.0.0”, “@angular/http”: “^4.0.0”, “@angular/platform-browser”: “^4.0.0”, “@angular/platform-browser-dynamic”: “^4.0.0”, “@angular/router”: “^4.0.0”, “core-js”: “^2.4.1”, “rxjs”: “^5.1.0”, “zone.js”: “^0.8.4” },

では、angular 2系の雛形は、どうやって作れば良いのでしょう?

この答えが分からずに2時間程ハマってしまいました・・・。 オプションや環境変数などで、angularのバージョンを指定出来るのでは?と思い調べてみたのですが見つからず、、、

最終的に、上記でインストールした @angular/cli を一度アンインストールして angular-cli をインストール しなおすことで対応しました。

npm uninstall -g @angular/cli npm install -g angular-cli

まさか、ツールの名前が変わっていたとは・・・。

angular-cliも ng コマンドを使って雛形を作ります。 試しに使ってみると、angular のバージョンは 2.3.1 でした。

“dependencies”: { “@angular/common”: “^2.3.1”, “@angular/compiler”: “^2.3.1”, “@angular/core”: “^2.3.1”, “@angular/forms”: “^2.3.1”, “@angular/http”: “^2.3.1”, “@angular/platform-browser”: “^2.3.1”, “@angular/platform-browser-dynamic”: “^2.3.1”, “@angular/router”: “^3.3.1”, “core-js”: “^2.4.1”, “rxjs”: “^5.0.1”, “ts-helpers”: “^1.1.1”, “zone.js”: “^0.7.2” },

ふーむ。 つまり、angular2 の雛形用が angular-cli で angular4 の雛形用は、@angular/cli と分かれている、ということなのでしょうか。

でも、ヘルプ等を見ると”angular-cli”って、近いうちに非推奨になるぽいんですよね。

C:> ng help

As a forewarning, we are moving the CLI npm package to “@angular/cli” with the next release, which will only support Node 6.9 and greater. This package will be officially deprecated shortly after.

To disable this warning use “ng set –global warnings.packageDeprecation=false”.

うーむ。

コレを見ると、@angular/cli に移った方が良いのかなぁ。 でも、その場合に angular2 の雛形ってどうやって作るのかな~・・・ わからん。

ご存じの方おられましたら、教えて頂けるとありがたいです。 あークラクラするわー。(適応力低)

コード書いてないのに3時だよ・・・ 寝よ寝よ

オッサン、速聴に期待をかける

私、残念なことに結構な感じで本読むのが遅いのです。

多分、一般の人の半分くらいなんじゃないじゃろか。 もう恥ずかしくて人に言えないレベルですよ。

しかも活字読んでると睡魔が襲ってくるスキルがあるので、普通の人の4倍ほどかけて本読んでる気がします。

学生時代、読書をしなかったバツでしょうか。 社会人になっても、「趣味が小説ですとか、気取りおってからに」などと謎の跳ねっ返りで、読書を敬遠していたバツでしょうか。

悔い改めて本読みます。なので、神様お許しを・・・(´・ω・`)

ということで、年初来から速読の本を何冊か読んでます。 速読の本を遅読で読むので、なかなか読み終わらない悲しさ・・・。

これ、早く脱出したいわー。

が、速読もなかなか難しいもんですね。 すごい勢いで目を動かして単語単位で見るようにして、数ページ進んだところで全く頭に入ってないことに気づいたり。 身につく兆しもありません。トホホ・・・。

速読と一言に言いましても、大きくは2つに分類出来るようです。

一つは、文書を写真のように捉えて読むもの。 もう一つは、処理効率を上げて読むもの。

前者はフォトリーディングが有名です。 マスター出来た暁には、ページを見た瞬間に内容をインプット可能という脅威の性能が特徴です。

インプットした情報は何故か後から記憶として定着するらしく、読んでいる瞬間は理解出来ていないという点もおもしろ特徴です。 ただ、マスターへの道のりは険しいようで、私の周りでもチャレンジした人は多数いましたが、体得出来ている人は一人もいませんでした。 トレーニングも、文字を見ないために焦点をずらしたり、視野を広げてページ全体を見るようにしたりと難易度が高いです。

後者は、、、有名なメソッド名が思い出せませんでしたが、努力で鍛えていくような速読系です。 早口で音読を繰り返したり、目の動きを早くして情報をインプットする速度を上げたりと、通常の読書で発生する作業を個々に効率化を目指します。

こちらも右脳の活用というキーワードは出てくるのですが、フォトリーディングのような捉え方ではなく、文章を読んだそばからイメージ化(映像化)して理解に落とし込むという活用になります。 特に、読書時の脳内音読を止めて一気に映像変換を目指すトレーニングは、いろんな方法でも共通しているように感じました。 こちらは、平たく言ってしまうと「頭の回転が良ければ読むのが早くできる」ということのようです。 ですので、頭の回転がそもそも早い人は、コツを掴んでサクサクっと2~3倍早くなることがあるようです。 すごいな。

身近にも出来ている人が何人かいたりして「あの人のように早く読めるようになりたいな」と目標にしやすい点が良いです。

ただ、私のように元の頭の回転が悪いと、やはり努力が必要で、効果も即効性があるわけではないので辛い修行が続きます。 というか、前述したように「高速で文字を追うだけで読めてない」など、空回り気味です。

筋トレで腹筋を割るにしても、まずは基礎的な筋力やスタミナが必要なように、速読をやるにしても「脳力」を上げておかないとダメなのかもしれません。 能力を上げるために、速読マスターして本を沢山読もうと思ってたんだけどな~・・・

鶏が先か、卵が先か・・・みたいな状況になってきました。

そんなとき、ひょんなことから「速聴」というキーワードを見つけてしまいました。 なんと、音声を数倍速で聞くだけで頭の回転が早くなるというのです。 さらに一説によると、そこから集中力、記憶力、判断力なども玉突きで向上するのだとか・・・。

まぢか。

でも確かに、本読んでてそもそも自分の脳内読む速度が遅いと感じるんですよね。 読むより早い速度で音声が飛び込んできたら、脳が活性化しそうな気も。

ふむーーーー!

もはや人生を完全に折り返したオッサン世代としては、一刻の猶予もありません。 行けそうな方法を見つけたら、やらねばならないのです。(必死) これは、速聴にかけてみるしか・・・!

よしゃーーーー! 明日の通勤から、Audibleで倍速での速聴を試してみるぞ!