2017年9月度 勉強会で取り組んだ事項

Nagoya.Swift+ 9月度勉強会 - connpassで取り組んだ事項についての紹介記事です。

今回は参加された各位に作業中に調べたページについて教えてもらいました。

内容

1. Swift
2. Web開発
3. 機械学習

Swift

絶対に挫折しないiPhoneアプリ開発「超」入門 からRSSリーダーアプリ(Ch.9 RSS Readerアプリ)を写経して作成。

学習中の課題

1. 【解決済み】ListViewControllerクラスをストーリーボードに関連付けられない。

• アイデンティティインスペクタのClass項目に入力するならReturnで確定 or プルダウンで選択する

1. 【未解決】画面遷移をSelection SegueからAccessory Actionに変えた時、Detail Disclosure/Detailはタップできる筈なのに出来ない。

• セルの設定を設定しただけで、セグエの設定時にSelection Segueにしたままだったっぽい。作り直し辛い。

いつも忘れるXcodeの使い方

• エディタエリアをコードとストーリーボードで2分割表示
  • [option]を押しながら、ナビゲーターエリアをクリック

  [Qiita](http://qiita.com/ruwatana/items/8c138cde759a6bcf4bba “Xcodeを画面分割(Assistant Editor)モードで使う時に便利なショートカット集“)

教訓

• Enter/Returnが大事 (※TerminalとかでEnterは危険なので、TPOをわきまえましょう!)

Webアプリ開発

素のHTML, CSS, JavascriptでのWebアプリ開発と、Reactを利用した開発について。

HTML, CSS, Javascriptでの開発

ドットインストールの動画を参考に、レッスン一覧から次の３つを作成。

• JavaScriptでカウントダウンタイマーを作ろう

• JavaScriptで割り勘電卓を作ろう

• InstagramでログインするWebサービスを作ろう (全16回) - プログラミングならドットインストール

InstagramのAPIって使いやすいんでしょうか…？

Reactを用いたWebサイト開発

Reactを使おうとすると、npmとかBabelとかWebpackとか色々入ってきて、急に現代的な感じになりますね。取り組んだ方がブログ記事を書かれています。

• Nagoya.swift+勉強会に参加(React) - 明日会社がなくなっても

「Reactを使うとこれがいいんだよ！」の説明で思いっきりStyled Componentsの話をしてしまったのですが、Reactってこれが副次的に解決されたイメージなので正確ではないかもしれないです。

• CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components

React

ReactはクライアントサイドでDOMを組み立てるのが面白いです。これ自体は別にReactを使わなくても出来ますが、フレームワークでこれを協力に支援しているイメージです。

今まではサーバーサイドで色々レンダリングしていた(PHPとかRailsとか)のをクライアントサイドに持っていき、サーバーサイドではjsonだけ返すステートレスなREST APIを作成してマイクロサービス化したいのかな、という印象です。

このときにデータの変更を反映する仕組みと、クライアントサイドでの状態管理が必要になるのですがReactはデータの変更を反映する仕組みだけ請け負っている、と理解してます。このあたりもっと理解したい…。

• Hello World - React

• コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」 | maesblog

• いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック（クジラ飛行机） | 書籍 本 | ソシム

• React.jsの開発環境をできるだけ簡単に作る！ – Game Users 開発ノート

• 石器時代みたいなWebアプリ開発をしていたエンジニアがReact.jsに導かれて2016年にやってきた話 - Sanwa Systems Tech Blog

Babel

• Babel · The compiler for writing next generation JavaScript

• Babel CLI（babelコマンド）の使い方 | maesblog

• Exponentiation operator transform · Babel

• Babel で IE8 対応する地獄 - Qiita

Javascript

• べき乗演算子が実装された - JS.next

• for...of - JavaScript | MDN

• テンプレート文字列 - JavaScript | MDN

Debugger

Javascriptを用いたアプリのDebugの方法、特にMinifyされたソースコードのデバッグについて。

• JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | プログラミング | POSTD

• ソースマップを使用する - 開発ツール | MDN

• Source Map Revision 3 Proposal - Google ドキュメント

• Source Map Revision 3 Proposal (Ver. November 18, 2013) 抄訳メモとリンク - Qiita

• Console.table() - Web API インターフェイス | MDN

Visual Studio Code

Node.js関連の開発やるときにVisual Studio Codeは割りとおすすめです。個人的にはAtomよりも好きです。Markdown専用エディタにしている方もいらっしゃいました。

• Visual Studio Code チートシート - Qiita

Node.js

• HTTP | Node.js v8.5.0 Documentation

• NodeSchool

機械学習

AWS上でGPUインスタンスを使ってKerasを動かすのと、Dockerで作成した開発環境にリモートデバッグする方法について。

AWS上でGPUインスタンスを使ってKerasを動かす

スポットインスタンスでGPUの付いた仮想マシンを立ち上げて機械学習ってのは本当にかっこいいですね。

Keras

• 映像物体検出（SSD_Keras）を簡単に実装する方法 for maxOS | AI coordinator

• 物体検出用SSD_Kerasで使える学習モデルの作成方法 | AI coordinator

• 物体検出アルゴリズム(SSD : Single Shot MultiBox Detector)を学習させてみる - Qiita

• ディープラーニング実践入門 〜 Kerasライブラリで画像認識をはじめよう！ - エンジニアHub｜若手Webエンジニアのキャリアを考える！

AWS

• AWS Marketplace: Deep Learning AMI Amazon Linux Version

Dockerで作成した開発環境にリモートデバッグ

長いので別記事にしました。

• VSCodeでのPythonのデバッグと、Dockerコンテナ環境に接続してリモートデバッグする方法 - Qiita

次回予告

次回は10/21(土)の予定です。

• Nagoya.Swift+ 10月度勉強会 - connpass