=≡Σ((( つ•̀ω•́)つ

yoshiyoshiのプログラマ日記

新しい技術を学ぶために必ずやること(React編)

もうすぐゴールデンウィークですね。
まとまった時間が出来るので、新しい技術で何か作ろうと思っています。

今回学習するのはReactに決めました。

休みに入る前に何を使うか決めておかないと決めるだけで休みが終わりそうなので、
今のうちに概念理解&環境構築をやっておこうと思いました。
Reactについて調べて聞くと、React単体ですべてが出来るわけではなく、
Redux,react-router,material-ui,axios,ES2015,Babel,webpack,ESLint…etc
これらをinstallしてコンパイルするとあったので、実際にやってみたのですが、なかなかうまくいきませんでした。
何かないかとsampleを探しに公式サイトを見に行ったら、「create-react-app」なるものが…
installしてみると、package.jsonに今までにないreact-scriptsが…
何?とググってみるとBabel,webpack,ESLint,severとかよろしくやってくれる…

うわああああああああああ

ReactのサイトなのだからReactしかinstallしてくれないと思いこんでいました。
これにRedux,react-router,material-uiを入れればなんとかなりそう。

結論

何か新しいものを学ぶためには最初に公式サイトを見ましょう。絶対!!

ハイブリッドアプリ(Ionic)の開発を終えて…これから開発を考えている人へ

会社でWebサービスの開発をしていたのですが、人に説明するときにアプリ版が欲しいと言われ、
お試し版として、3週間で選定から開発、リリースまで1人で行いました。

ネイティブアプリとハイブリットアプリで迷ったのですが、 開発期間がなかったのと、お試し版と言われたので、 iOS/Android両方のアプリを同時に作れると巷で言われているハイブリットアプリ(Ionic)で開発をしました。
今回は今後開発を検討している方に向けて、自身が苦労した点を挙げていきたいと思います。

学習コスト

見た目部分はマニュアルを見ながらコードを書けばそれっぽく出来るのですが、 IonicはControllerにAngularを使っているため、がっつりAngularの学習コストがかかりました。
他のハイブリットアプリのフレームワークにも言えることなので、 すでにWebサービスで使った経験があるJSフレームワークを使っているハイブリットアプリのフレームワークを選びましょう。

見た目と動きについて

Web系の人にはBootstrapといえばわかりやすいでしょうか…最初からある程度形が決まっているんですよ、 だから「ここの見た目を変えて」、「こういう動きにしてー」と言われるとかなり厳しいものがあります。 幸い、Ionicはコミュニティが大きく情報量が多かったため、なんとか対応出来ました(全部英語でしたが)。 それでも足りない部分があり、Autocompleteを独自実装したのですが、かなり大変でした。

iOS/Androidの違いについて

私はAndroid版を一通り完成させてから、iOS版の開発を行ったのですが、 見た目が思った通りになっていない箇所が何箇所かありました。 なので全く一緒にはなりません…といっても本当に数カ所なので気にならないレベルですが。

テストについて

iOS/Androidで微妙に違う箇所があるため、結局テストは両端末でやらなければなりません。

どういうものが向いているのか

とてもシンプルな見た目でデフォルトから変更予定がないもの、独自色を出さないものなら良いと思います。
特に見た目についてこだわりがある発注者には、作り始める前に見た目と動きが固定なことを必ず伝えましょう。
と言っても、どんなものができるか伝えるのが大変だと思いますので探しました。
いま出ているアプリだとGameWithの「モンスト 全国マルチ掲示板 & 攻略」は、ハイブリットアプリっぽいです。
なので発注者には、こんな感じの見た目と動きになることを伝えると幸せになれると思います。

感想

私は事前に発注者に無理が出来ないことを伝えていなかったため、地獄を見ました。
相当応用が簡単にならない限り、ハイブリットアプリを作ることはもうなさそうです。
次からは必ずネイティブで作るよう説得していきたいと思います。

今まで読んだ技術書の中から役に立ったもの(※随時更新)

今まで読んだ技術書の中で役に立ったものを挙げていきます。 (※もう使われないだろうと思われるのは除いています)

コンピュータシステムの基礎 第16版

この本は大学で情報専攻でなかった私にとっては、教科書的な存在でした。
コンピュータの歴史から、現在のシステムがどう構成されて動いているかが解説されていて、とても勉強になりました。
大学で情報専攻ではなかった人は必ず読んだほうが良いと思います。インフラ周りの知識が一通り付きますので。

スッキリわかるJava入門 第2版 (スッキリシリーズ)

私はこの本を読む前に他の本でJavaを学んでいたのですが、 何か圧倒的に知識が足りないと思い、この本を読んでビックリ!! わかりやすさに愕然としました。 Javaを初めて学ぶならおすすめです。

スッキリわかる Java入門 実践編 第2版 (スッキリシリーズ)

上記の本の実践編ですね。これもセットで読むことをおすすめします。
この本を読んだ後に「これで自分もJavaマスターだ」と浮かれていたのを思い出します(そしてその後深淵を知り絶望することに)。
ここまでで、例えるなら中学生英語レベル、日常会話レベルです。
一応コードが書けるレベルまで行きますが、並列処理や例外処理やラムダや…etcなど色々足りないため、 あくまで作業者レベルで、設計は出来ません。

ExcelVBA逆引き大全620の極意2013/2010/2007/2003対応

突然、ツール作ってと言われたときに役に立ちました。SIerあるあるですね。
さらに、現場はネット繋がらなかったんで本当に助かりました。

達人に学ぶDB設計 徹底指南書 初級者で終わりたくないあなたへ

DB周りの知識が基本情報で学んだレベルだったので、いざ設計しろと言われたときに困ると思い、読んでみました。
内容的には知っている知識も多かったのですが、いざ設計するときには手元に置いておきたい一冊です。

プログラマのためのDocker教科書 インフラの基礎知識&コードによる環境構築の自動化

仮想マシンKVM、そしてDockerと時代の移り変わりを感じ、とりあえず読んでみることに。
この本を読むとDockerについて一通りの知識が付きます。逆に読まないとネットにある情報だけでは限界を感じました。
これからは開発環境を作るのに必須知識だと思うので、読むことをおすすめします。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

今までレスポンシブデザインはBootstrapにまかせていたが、APIを作って画面に表示をさせるように言われたため、レスポンシブのやり方を学ぶために読んでみることに。
HTML、CSSについて基礎知識がある前提で書かれているので、本当にデザインを学びたい人向けの本です。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

すごく出来る人とペアプログラミングをしているときに、コードの違いに愕然とし、何かないかと探し、読んでみることに。 文章がただ翻訳してみました的な書き方なので若干読みづらいが、内容はとても素晴らしいのでプログラマなら必ず読んだほうが良いです。

GCP(GAE)+WordPressで1ヶ月でいくら位かかるのか実際に運用して確かめてみた

今のレンタルサーバーって大体1ヶ月1000円くらいかかりますよね。
なので、GCP(GAE)+WordPressで1ヶ月でいくら位かかるのかを知るために前回、

yoshiyoshi7.hatenablog.com

で実際に環境構築をしました。
そこ今回、実際に運用してみて、いくらかかったのか公開します。

f:id:yoshiyoshi7:20170307204334p:plain

合計で¥1,617でした。

内訳

かかっている料金は全部Google Cloud SQL…つまりdatabaseです。
最近、Google Cloud SQLって第2世代になったのですが、第1世代と違って第2世代って常時接続なんですよ。 そのせいで、結構料金が上がっています。
他のサービスと比べてのメリットを挙げると、Googleのサーバーでキャッシュを作ってくれるので、アクセスが爆速になるぐらいかな…。

これ以上安くするには

他の方法としては、WordPressサイトを静的HTMLに変換するプラグイン(WP Static HTML Outputとか)で吸い出して、
Google Cloud Storageに上げれば200円ぐらいには出来ると思われる。

なんでやらないかと言うと、自分が文章を書く能力なさすぎて、そもそもサイトが維持できないので断念した\(^o^)/

GCP(GAE)+WordPressでサイト構築してみた

今までクラウドを触ったことがなかったので、ちょっとやってみようかとGCP(GAE)+WordPressでサイト構築してみた話です。
全部書くとものすごく長くなってしまうため、要点を掻い摘んで説明します。

GAEにWordPressを構築

こちらを参考に構築しました。
ちょっと情報が古いので変えた点は

です。

Cloud-SQL v2にしたことで、ユーザーがGUIから作成できなくなったため、
Google Cloud Shellを使い、SQLでユーザー作成を行いました。

独自ドメイン

お名前.comでドメインを買いました。
GAEでの独自ドメインの設定はこちらを参考に構築しました。

SSL証明書

SSL証明書こちらを参考にしました。
Unix環境がなかったため、Google Cloud Shellを使い、証明書を作成しました。

最後に

以上で、サイト構築、独自ドメインhttps化まで出来ると思います。
次回に実際運用していくらぐらいかかるのか紹介したいと思います。

私がMacBook Pro(Late 2016)を買った理由

私は今までMacを買ったことがなかった。
生まれてこの方WindowsLinuxしか触ってこなかったし特に仕事上困リませんでした。

・・・言い過ぎました。実は一度だけ触ったことがあります。 会社で開発用にMacBookを買ったときに操作しました。
その時手取り足取り操作を教えてもらったのですが、電源の切り方もわからず、 いい年して電源の切り方もわからないなんて・・・って悲しくなってそれからApple嫌いになっていました。
もちろんスマートフォンもずっとAndroidでした。
Androidはファイル管理がPCと接続すれば楽ですし、何より野良アプリが動くのが大きい・・・(艦これですが、これのせいで当分iphoneは買えない)

月日が経ち、個人で開発したものをGitHubに挙げるのが当たり前みたいな時代になりました。
私もこの業界にきて3年が過ぎ、一通りのことはできるようになったので、最新の技術で何か一人で作って公開してみようかなと考えるようになりました。
そこで色々なフレームワークの環境構築をやってみたり、便利そうなプラグインを調べてはインストールしていました。
いや違います・・・構築しようとやってみました。
何が違うかというと、ERRORが出て構築できないのがあったのです。

なんで書いてある通りに出来ないんだろうとググって調べていると、あることに気が付きました。
環境構築で構築する環境(OS)が書いていないのは全部macOSだったのです。
つまりはこういうことになります。

  • Windowsと書いてある→Windowsで構築できる
  • macOSと書いてある→macOSで構築できる
  • 何も書いていない→macOSで構築できる

この事実に私は愕然としました。 だって何かやるにしてもググるときに「 windows」と付けなければならないからです。
これって結構ストレスが溜まりますし、時間だって馬鹿になりません。

別にLinuxでもよかったのですが、世間ではmac最高!!と書いてあったのでちょっと高かったですが、MacBook Proを買いました。

でも結局、Mac内を汚したくなくて、Docker使っているので、ほとんど意味ないです。