React 環境構築
今回はReactの環境構築です。
Reactを学習していくにあたり、まずは環境構築が必要だったので実施！！
環境構築って1度やったら滅多にやらない作業で忘れてしまいがちなので、あとから見返せるように備忘録を残しておきたいと思います。
今回はFacebookが提供している「Create React App」というツール(なのかな？)を使う方法です。
環境
・Ubuntu18.04(Virtual Box)
まずは必要なnpmとnodejsのインストールです。
$sudo apt-get install -y npm $sudo apt-get install -y nodejs $sudo npm install n -g $sudo n stable $sudo node -v v12.18.2 ←nodeのバージョンが得られる
次にyarnをインストールしていきます。
npmでも出来るようなのですが、yarnの方が高速かつ信頼性が高いようなので入れておきます。
$sudo npm install --global yarn
こちらでインストール出来ているか確認。
バージョン情報が表示されれば、問題なくインストール出来ています。
$yarn --version
これで、Create React Appを使うための前準備が完了しました。
次に実際にCreate React Appをインストールしていきます。
下記どちらかを実施します。
※実は①の方法で実施したのですが、
yarnでのインストール時にエラーは出なかったのですが、
create-react-appが実行できない(create-react-app: コマンドが見つかりません)というメッセージが出てしまい、②に方向転換しました。
もしかしたら今後も同じ状況になるかもしれないため、両方載せておきます。
①
$yarn global add create-react-app $create-react-app testapp ←testappは作成アプリ名
②
$npm install -g create-react-app $create-react-app testapp ←testappは作成アプリ名
create-react-app実行後、作成にしばらく時間がかかりますが、下記が表示されればOKです。
Success! Created ~~~ ←作成したディレクトリ名
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd testapp ←testappは作成アプリ名
yarn start
Happy hacking!表示された通り、こちらを実行します。
$cd testapp $sudo yarn start
こちらのメッセージが表示されたら、webブラウザ上で
http://localhost:3000 or http://IPアドレス:3000を実行
Compiled successfully!
こちらのような画面が表示されたら無事環境構築は完了です。
作成したtestapp配下の、src/App.jsをこちらに置き換えると、
import React from 'react';
class App extends React.Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;下記のような画面に変わります。
最後に、、、
環境構築は無事完了！！
これから、Reactについて学びながら動くものを作っていきたいと思います！！
フロントエンドフレームワーク ReactにするかVueにするか
本格的にフロントエンド開発を学びたいな！！と思っている今日この頃。
今までHTMLやjavaascriptを用いて何となく作っていた部分を、フレームワークを使ってきれいに作りたいな！！と
思い、まずはフロントエンドのフレームワークを学習することにしました！！
が、、、
思ったより種類があり、かつ甲乙つけがたい！！
簡単に調べただけだと決めきれなかったので、、、ちゃんと調べることにしました！！
■調査
フロントエンドフレームワークとして有名なのは、
・React
・Vue
・Angular
のようです。
調べたところ、まとめるとこちらのようになるようです。
【React】
フレームワークではなく「ユーザインターフェース」になるようです。
このため、他のフレームワークと正確に比較できないのかもしれませんが、調べると比較した形で書かれた記事が多いので比較しました。
学習コストはVueと比べると高くなっていますがそこまで高くないようです。
最初は開発規模を落として後から規模を拡大させていくような柔軟さがありながら、大規模開発にも耐えられる堅牢さ・厳格さを兼ね備えているようです。
最後に、メモリ使用量が少ないにも関わらずある一定のフレームレートと速度を保つことができるようです。
【Vue】
学習コストが低く、React、Angularと比較して始めやすさは断トツのようです。
簡易な構造サンプルも公式で用意されているようです。
一方で、メモリ使用量が高くパフォーマンスは劣るといった印象です。
とりあえず簡単なアプリをサッと作りたい、という方にはお勧めのようです。
【Angular】
AngularはWebアプリに必要な機能が全部入りしたフルスタックになっており、大規模プロジェクト向きのようです。
Angularに合わせてしっかりと設計してしっかりと進めなければならないようで、手軽に試すことは難しいようです。
また、フルスタックであるが故に学習コストは高いようです。
大規模プロジェクトで開発・運営する場合には必須だけど、気軽にやってみる！！といった感じだと難しい感じでしょうか？
■結論
”React”にすることにしました！！
調べ始めたころは始めやすそうなVueにしようかな？
と思っていました。
決めては、
・パフォーマンス
・TypeScriptとの相性(堅牢・厳格さ)
です！！
はやり、遅いフレームは使いたくないな。。と思いましたし、
あいまいさがある状態でバグが出ると調査が困難になってしまうのである程度かっちり決まっていたほうがよさげだな
と思いました！！
■最後に
これからReactを勉強し、その経過報告を上げていきたいな？と思います！！
が、、、
前回も記載しましたが仕事が7～8月は仕事が忙しくなるため、本格的に始めるのは9月からかな？と考えております！！
※時間を見て、勉強できるなら、やっていきたいな。とは思っております。
上手く時間を見つけながら、仕事との両立が出来たらいいな。。。
ポケモンレーダーチャート表示アプリ ～part2～
前回作成したアプリに機能を追加し、努力値や個体値を触れるようにしたり、ポケモンを比較できるように2種類入力欄を設けたりしてみました！！
elsammit-beginnerblg.hatenablog.com
こんな感じになりました！！
技術的に真新しいことは何もないけど、、、
せっかく作ったので報告！！！
強いて言うなら、
今回apacheを用いたのですが、
Webアプリ更新時にキャッシュが残っていてソースが正しく更新されない現象が発生してしまい、少しハマったぐらいかな？
Ctrl + F5をすればキャッシュも開放して更新出来るので、ソース更新時にはCtrl + F5で更新するようにします！！
もし、Ctrl + F5でもjavascriptの更新ができない場合には下記を行うと良いみたいです。
vim /etc/httpd/conf/httpd.conf
#EnableSendfile機能をoffにする #EnableSendfile on EnableSendfile off
ソースコードはこちらに保存。
https://github.com/Elsammit/PokeChart/tree/master
ちょっと冗長なのが気になる。。。
後、同じような処理を複数個所でやってしまっている。。。後で直しておこう。。。
最後に、、、
作っていていつも思うのですが、設計って重要ですよね。
分かってはいるのですが、思いつくと作り始めてしまうのでそこは反省です。
これぐらいなら設計してなくても無問題だと思うのですが、規模が大きくなると。。。
これからは、しっかりと設計してから作りたいと思う今日この頃。
ポケモンレーダーチャート表示アプリ
色々行ったり来たりしてしまっていますが、、、
今回は、ポケモンレーダーチャートを表示するアプリを作成しました。
作成したアプリはこんな感じです。
テキストボックスにポケモンの名前を入力してClickを押すと、そのポケモンの種族値が表示されます。
種族値のリストは以前取得したcsvファイルを用いております。
elsammit-beginnerblg.hatenablog.com
言語はhtmlとjavascriptで作成しました。
初めてjavascriptでcsvファイル読み出しとレーダーチャートの表示を行いましたので、その部分だけ残しておこうと思います。
まずはcsvファイルの読み出しです！！
csvファイルの読み出しはこちらで実行できます。
function getCSV(){
return new Promise(resolve =>{
var req = new XMLHttpRequest();
req.open("get", "pokemon_status.csv", true); // アクセスするファイルを指定
req.send(null); // HTTPリクエストの発行
req.onload = function(){
p = convertCSVtoArray(req.responseText); // 読み込んだCSVデータをセット.
p.then(function(){
View_Chart();
resolve("0");
});
resolve("0");
}
});
}
function convertCSVtoArray(str){
return new Promise(resolve =>{
var result = []; // 最終的なデータを2次元配列で格納するための変数定義.
var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
// 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
for(var i=0;i<tmp.length;++i){
result[i] = tmp[i].split(',');
}
Name = document.getElementById("pokeName").value;
for(var i=1;i<tmp.length;i++){
if(result[i][1] == Name){
Name = result[i][1]
Attack = result[i][8]
Defense = result[i][9]
HP = result[i][7]
SpAtk = result[i][12]
SpDef = result[i][11]
Speed = result[i][10]
}
}
resolve("1");
});
}XMLHttpRequestにより指定したファイルを読み出すHttpリクエストを発行し、
レスポンスが返ってきたら読み出したCSVファイル内のデータを2次元配列に格納する処理になります。
コメントにもある通り、改行を元に行毎に文字列を分割、配列に一度格納し、
その後、1行毎にカンマ区切りで要素を取得しています。
Promise、thenを用いてシーケンシャルな処理にするために行いました。
csvファイルの読み出しや加工が重く、並列処理になってしまったためです。
次にレーダーチャートの表示の表示です。
コードはこちらになります。
function View_Chart(){
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["HP", "攻撃", "防御", "素早さ", "特防","特攻"],
datasets: [{
label: Name,
data: [HP, Attack, Defense, SpAtk, SpDef, Speed],
backgroundColor: 'RGBA(225,95,150, 0.5)',
borderColor: 'RGBA(225,95,150, 1)',
borderWidth: 1,
pointBackgroundColor: 'RGB(46,106,177)'
}]
},
options: {
title: {
display: true,
text: 'ステータス'
},
scale:{
ticks:{
suggestedMin: 0,
suggestedMax: 200,
stepSize: 20,
callback: function(value, index, values){
return value
}
}
}
}
});
}typeでradarを指定し、datasetsにデータをセットすればグラフが表示できます。
合わせて、suggestedMaxやsuggestedMinで最大値、最小値の指定が行えます。
最後に、、、
何とか時間を見つけて簡単なアプリですが、ポケモンに関わるアプリ作ることが出来ました！！
ちょっと余裕が出たのでポケモン関係のアプリを他にも作っていきたいな？と思っております！！
それにしても、、、
デザインはどうすればいいのだろう？？
うまく作れないので、テンプレートとか使えばよいのかな？？
ラズパイと直接Wifi接続
先日こちらの記事を記載したところ、友人よりこのようなことを言われました。
「rfcommは昔の技術なのになんで使っているの？」
「そもそも、なぜBluetoothで接続なんてしているんだい？ Wifi使えばよくない？」
「WifiでラズパイとPCを直接つなげないんだっけ？」
elsammit-beginnerblg.hatenablog.com
自分が完全に抜けていました。。。
ルーターがないのでWifiは使えない ⇒ 別の方法を探さなければならない ⇒ Bluetoothなら出来るんじゃね？
という発想だったので、そもそもルータなくてもWifi使える策がないか？を模索出来ておりませんでした。。。
視野が狭いですね。。。反省です！！
そこでラズパイとPC間を直接つなげないか？確認しました！！
今回も前回と同様にPCのOSは"Windows10"を用いたいと思います。
で、方法としてこちらの2つを発見しました！！
・アドホック接続
・Windows10 のモバイルホットスポット
そこでまずアドホック接続を試してみたのですが、、、
うまくいきませんでした。。。泣
実施手順とかは後日載せていきたいと思います。
今回はうまくできた、
Windows10 のモバイルホットスポット
について備忘録残していきたいと思います！！
モバイルホットスポットを用いた場合の構成図はこちらになります。
まずPC側です。
設定 ⇒ ネットワークとインターネット ⇒モバイルスポットの順で操作します。
モバイルスポット画面で、
・モバイルスポット：ON
・インターネット接続を共有する：Wifi
に設定する。
こうすると、
・ネットワーク名
・ネットワークのパスワード
・ネットワークの帯域
が表示されるかと思います。
その下にある"編集"を押下すれば、ネットワーク名やパスワード等が変更できるのですが、一旦デフォルトで進めたいと思います。
※変更したい場合には適宜変更下さい！！
次に、ラズパイ側です。
GUIでセットする場合には右上？のネットワーク一覧からPC側で登録したネットワーク名を見つけて、
パスワードを入力すればOKです！！
CUIの場合には、、、
まず、/etc/wpa_supplicant/wpa_supplicant.confを編集してネットワーク名やパスワードを登録します。
network={
ssid="ネットワーク名"
psk="パスワード"
key_mgmt=WPA-PSK
}次にwlan0を登録します。
※すでに登録済みであればセットアップは不要になります。
/etc/network/interfacesを編集して、、、
allow-hotplug wlan0
iface wlan0 inet manual
wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf一応wlan0が問題なく動くかを下記を実行してみます。
sudo ifdown wlan0 sudo ifup wlan0
もしくは、
sudo ifconfig wlan0 down sudo ifconfig wlan0 up
こちらのコマンドでエラーが発生しなければ準備完了です！！
ラズパイを再起動してみると、、、
PC側のモバイルホットスポットにて、接続されているデバイスが1機増えているかと思います。
そしてデバイス名がraspberry piでIPアドレスが登録されているかと思います。
こちらがラズパイにセットされているIPアドレスなので、このIPアドレスを指定してssh接続すれば、、、
PC - ラズパイ間を直接接続することが出来ます。
モバイルホットスポットを用いればラズパイがwifi接続していなくても、ログインすることが出来ました。
bluetoothに比べて使いやすそうなのはGood!!です。
PCがwifi接続していないと使えないようなのでそこは弱点でしょうか。。。
まぁ、PCさえWifi接続出来ればラズパイにログインできることになるので、よし！！です。
最後に、、、
助言した友達には感謝です！！
おかげで便利な方法を知ることが出来ました。
なぜアドホック接続出来ないか分からないので、もう少し調べたいと思います。
G検定 受験の感想
遅くなりましたが、昨日G検定受験しました！！
結果は7/13の週に出るようなのですが、、、おそらくダメです泣
理由ですが、
・最新技術をキャッチアップ出来ていなかった
・用語の理解だけになってしまっていてRCNNや言語解析などの細かい技術をしっかり腹落ち出来ていなかった
(なので細かい部分の問題に対応できずあたふたしてしまった)
・法律や規則をおざなりにしてしまった
かな？と考えております。
思った以上に最新情報や参考書に書かれている細かい部分が問題として多く出題されていたので、
細かい部分までしっかりと理解していないと解けないんだな。。と感じました。
こちらで報告した参考書にも載っていないような最新情報が結構出題されたのには結構驚きました！！
AI白書もチェックすべきだったか！！と試験中にすごく思いました。
もっと幅広く情報収集行えばよかった！！。。。とすごく後悔。。。
ディープラーニングについて学べたのはとても良かったです！！
次回受講するかは分からないですが、
今回学んだことを元に何か作れたら面白いかな？と思っております！！
あ～～っ！！！
受かりたかったな。。。泣
残念だ！！！泣
明日はG検定
明日G検定を受けます！！
G検定とは・・・
AI（ディープラーニング）の基礎知識を有し、適切な活用方針を決定、事業応用する能力を持つ人材を定義するための資格試験、
です。
www.skillupai.com
AIについてあまり分かっていない自分、勉強しようと思い立ち、
"ただ勉強するのもしゃくだから、合わせて資格も取っちゃお！！"
と考え、受験することにしました！！
■2か月前・・・
受験を行うにあたり、こちらの教科書を読みました。
思ったより難しい、、、難しくて理解するのに時間がかかりました。。。泣
■1か月半前・・・
教科書を読んで理解した気になった自分はこちらの問題集を解いてみました。
- 作者:スキルアップAI株式会社 明松 真司,スキルアップAI株式会社 田原 眞一
- 発売日: 2019/02/08
- メディア: 単行本（ソフトカバー）
教科書で勉強したので余裕だろうと思っていたのですが、、、全然解けない。。。泣
理解出来てなかったのかな？泣
ここから、1カ月間問題集と教科書を往復しながら勉強を重ね、、
今では理解が深まり、問題もほとんど解けるようになりました！！
■2週間前
6月末からダメ押しでこちらの本で学習！！
(本当は、1か月同じ本を使っていたので飽きてしまったから（笑）)
スッキリわかる ディープラーニングG検定(ジェネラリスト) テキスト&問題演習
- 作者:株式会社クロノス
- 発売日: 2020/03/28
- メディア: 単行本（ソフトカバー）
既に別本で勉強していたので大体は知っている内容でしたが、一部載っていなかったり詳しく載っていなかった部分が詳しく載っていたので買ってよかったと思いました。
※特に自然言語処理とかQ学習とかが比較的詳しく載っていたのがよかった！！
■今
勉強を進めたのである程度の内容が理解でき、問題も解けるようになりました。
ただ不安がことがあります。。。
専門家、著名人の名前が覚えられない泣。覚えられずに毎回間違える泣。
後、AIは日進月歩で技術や法律が変化しているようなのですが、最新情報の収集が出来ていない。。。
救いは選択式の問題という点です。。。
解ける問題を優先的に解いていき、難しい問題に時間を使っていきたいと思います！！
最後に、、、
久しぶりの試験、、何か懐かしい感情です（笑）
不安であり、何とかなると思っているところもあり。。。
せっかく受けるので受かりたいです！！
(落ちたらこの記事読むと悲しくなるから破棄しよう)
では、明日の試験頑張っていきます！！
