2018年を振り返って~アプリ開発を始めて業務委託するまで

by yuki

Slide 1

Slide 1 text

2018年を振り返って ~アプリ開発を始めて業務委託するまで~ Yuki

Slide 2

Slide 2 text

⾃⼰紹介 Yuki（twitter:@YukiYuki0508）フリーランスのフロントエンドエンジニア趣味は筋トレ

Slide 3

Slide 3 text

本⽇のスライド 2018年を振り返ってなぜアプリ開発をしようと思い、アプリ制作の仕事に移りたいと考え、業務委託に⾄ったか 2019年の抱負

Slide 4

Slide 4 text

2018年を振り返って 1⽉ 2⽉ 3⽉ 4⽉ 5⽉ 6⽉ 7⽉ 8⽉ 9⽉ 10⽉ 11⽉ 12⽉ジム筋トレ PT GG アプリ開発筋トレアプリを作ろう本格的にアプリ開発したい仕事にしたい業務委託イベント Reactもくもく会 RN朝活 RN Meetup RNもくもく会 • イベントを探す • React、RNの本を読む • 相談 → 受託へ • Webサイト制作を託す 7,8,11⽉に週0.5~1⽇きっかけ技術書店5

Slide 5

Slide 5 text

Slide 6

Slide 6 text

①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③個⼈開発での悩み ④どう⾏動したか ⑤Webサイト制作中⼼の仕事からアプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始本⽇のスライドの流れ

Slide 7

Slide 7 text

①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③個⼈開発での悩み ④どう⾏動したか ⑤Webサイト制作中⼼の仕事からアプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始

Slide 8

Slide 8 text

筋トレアプリが作りたい制作動機 • 筋トレを始めてBIG3（ベンチプレス（BP）、スクワット（SQ）、デッドリフト（DL））をするようになったから。 • ⾃分のBIG3の成⻑具合をひと⽬で確認できるアプリがあればいいなーとおもったから。アプリの⽬的 • BIG3を⼿軽に記録したい • BIG3の成⻑具合をひと⽬で確認したいターゲット • ⾃分

Slide 9

Slide 9 text

Slide 10

Slide 10 text

なぜReact Native+Expo？なぜReact Nativeをしようと思ったか • アプリが作りたい → どうせならiOS、Android両⽅のプラットフォームで動くものが作りたい → Udemyを物⾊ → React Native!? なぜExpoを採⽤したか • コードの変更がリアルタイムに反映される • ネットワークを通してシミュレータでも実機でも動作確認ができる

Slide 11

Slide 11 text

UIはどうしたか？ UIについて • デザインが苦⼿ → でもUIは⼤事 → NativeBaseを⾒つける！ Native Baseについて • React Nativeで使うことのできるプラットフォームUIコンポーネント • iOS/Androidそれぞれに適切なUIが提供される

Slide 12

Slide 12 text

Slide 13

Slide 13 text

個⼈開発で悩んだこと ① 環境開発づくりでなやむ ② グラフの描写⽅法で悩む ③ ルールが気になる ④ 経験値が気になる

Slide 14

Slide 14 text

① 環境開発づくりどんなプラグインをインストールしたらいいのか → jsx、reactのeslintなどを導⼊してみる VSCodeでjsxを開いたらタグが崩れる!! → 拡張機能「Beautiﬂy」のせいとわかるまで結構悩む。。 • ESLint（JavaScript のための静的検証ツール） • vscode-styled-jsx（スタイリング） • JS JSX Snippets（スニペット） • Full React/React Native/React Router/Redux/GraphQL/ES7/ Testing/PropTypes snippets（スニペット） • Beautiﬂyを無効にする（整形がうまくいかずに崩れるから）

Slide 15

Slide 15 text

② グラフの描写やりたいこと: 筋トレの重量をグラフに描写したい（縦軸重量、横軸⽇付の横スクロール有りのグラフの描写）

Slide 16

Slide 16 text

グラフの描写するまでに 1. React Nativeのためのグラフ描写プラグインを探す 2. victory-nativeを使ってみる（スクロール機能が付いてる！） 3. スクロール中、重くてもたつく。。。 4. 他のプラグインを探して使⽤ → もたつくor欲しい機能がない → プラグインを探す →... の繰り返し 5. RN朝活でWebViewを使うことを提案してもらう 6. Web⽤のJSライブラリ、Chart.jsをWebViewを⽤いてReact Nativeで使う 7. WebViewをScrollViewで囲むことで横スクロールをもたつきなく実装！ 8. 相談することの⼤切さを実感

Slide 17

Slide 17 text

③ ルールについてファイル名の命名ルール、ディレクトリの構造が気になる → 他の⼈はどうしてるんだろう、慣習的なものはあるのかな？

Slide 18

Slide 18 text

④ 経験値について⾃分の場合、知ってる範囲で実装を済ませようとしがちな気がする → Webサイト制作のように業務委託したほうが知識が増えるんじゃないか？

Slide 19

Slide 19 text

①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③アプリを作り始める ④どう⾏動したか ⑤Webサイト制作中⼼の仕事からアプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始

Slide 20

Slide 20 text

どう⾏動したか ConnpassでReactNativeの勉強会を探していってみたり、開発者にとにかくあってみよう。 • 7⽉フリーランス仲間とReact、Reduxのもくもく会（この当時はアプリ制作に転向しようと思ってなかったので楽しくもくもく） • 9⽉ React Native Meetup（はじめてのRNの勉強会でわくわくする） • 9⽉ React Nativeアプリ開発（朝活） • 10⽉技術書店5（RNの本を買い漁って読む） • 10⽉ React NativeやReactの⼊⾨本を読んでみる • 11⽉ React Nativeもくもく会（業務委託のきっかけ！）

Slide 21

Slide 21 text

Slide 22

Slide 22 text

アプリ制作の仕事に移りたいアプリ制作を本格的にしたくなってきたが。。。 • 平均すると週0.5~1⽇しか時間を設けられてない • 仕事が⽴て込むと何週間もほったらかし → 何やってたか忘れる • 無からのスタート → 学ぶべきことが多い • 個⼈開発スタイルは今の⾃分には合っていない • 経験値がたまりにくい • マーケティング、UIの知識がない → アプリ制作を⽚⼿間にやるのは⾃分には無理！ → 業務委託！

Slide 23

Slide 23 text

Slide 24

Slide 24 text

なんで業務委託？⼀⼈では知ってる知識プラスαでできるものを考えがち • ⾃⼰満になる（コードの質、運⽤のしやすさが疎かになる。アプリの使い勝⼿も⾃分中⼼になる） • 開発経験を増やしにくい • 視野が狭い（解決策にたどり着かない） • コードの書き⽅が上達しにくい他の⼈の開発環境、ルール、コードの書き⽅などを⾒てみたい

Slide 25

Slide 25 text

Slide 26

Slide 26 text

業務委託して思ったこと良かったこと • チーム開発を経験できる • アプリ制作中⼼の⽣活を送れる • 他の⼈の書いたコードに触れることができる！ • 丁寧にレビューしてもらえる • タスクをこなす度に知識が増える（できる範囲での実装から、実装したいもの → 勉強、実装へ） • プログラミング以外のことに触れられる（マーケティング、UI）苦労していること • スピード感、実⼒ → これらは経験、勉強、努⼒で埋める!!!

Slide 27

Slide 27 text

2019年の抱負戦⼒になる業務で得た知識をアウトプットする個⼈開発アプリを作りきる筋⾁の⼤会に出る

Slide 28

Slide 28 text

ご清聴ありがとうございました