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

Transcript

1. 2018年を振り返って ~アプリ開発を始めて 業務委託するまで~ Yuki
2. ⾃⼰紹介 Yuki（twitter:@YukiYuki0508） フリーランスのフロントエンド エンジニア 趣味は筋トレ
3. 本⽇のスライド 2018年を振り返って なぜアプリ開発をしようと思い、 アプリ制作の仕事に移りたいと考え、 業務委託に⾄ったか 2019年の抱負
4. 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
5. 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 まとめると。。。 ① 筋トレが好きすぎてアプリ開発を始める。 ② 悩む。。。 ③ アプリ制作の仕事に移りたいと思う ④ 業務委託開始
6. ①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③個⼈開発での悩み ④どう⾏動したか ⑤Webサイト制作中⼼の仕事から  アプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始 本⽇のスライドの流れ
7. ①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③個⼈開発での悩み ④どう⾏動したか ⑤Webサイト制作中⼼の仕事から  アプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始
8. 筋トレアプリが作りたい 制作動機 • 筋トレを始めてBIG3（ベンチプレス（BP）、スクワット （SQ）、デッドリフト（DL））をするようになったから。 • ⾃分のBIG3の成⻑具合をひと⽬で確認できるアプリがあればい いなーとおもったから。 アプリの⽬的 • BIG3を⼿軽に記録したい • BIG3の成⻑具合をひと⽬で確認したい ターゲット • ⾃分
9. ①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③個⼈開発での悩み ④どう⾏動したか ⑤Webサイト制作中⼼の仕事から  アプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始
10. なぜReact Native+Expo？ なぜReact Nativeをしようと思ったか • アプリが作りたい → どうせならiOS、Android両⽅のプラット フォームで動くものが作りたい → Udemyを物⾊ → React Native!? なぜExpoを採⽤したか • コードの変更がリアルタイムに反映される • ネットワークを通してシミュレータでも実機でも動作確認ができ る
11. UIはどうしたか？ UIについて • デザインが苦⼿ → でもUIは⼤事 → NativeBaseを⾒つける！ Native Baseについて • React Nativeで使うことのできるプラットフォームUIコンポーネ ント • iOS/Androidそれぞれに適切なUIが提供される
12. ①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③個⼈開発での悩み ④どう⾏動したか ⑤Webサイト制作中⼼の仕事から  アプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始
13. 個⼈開発で悩んだこと ① 環境開発づくりでなやむ ② グラフの描写⽅法で悩む ③ ルールが気になる ④ 経験値が気になる
14. ① 環境開発づくり どんなプラグインをインストールしたらいいのか → jsx、reactのeslintなどを導⼊してみる VSCodeでjsxを開いたらタグが崩れる!! → 拡張機 能「Beautifly」のせいとわかるまで結構悩 む。。 • ESLint（JavaScript のための静的検証ツール） • vscode-styled-jsx（スタイリング） • JS JSX Snippets（スニペット） • Full React/React Native/React Router/Redux/GraphQL/ES7/ Testing/PropTypes snippets（スニペット） • Beautiflyを無効にする（整形がうまくいかずに崩れるから）
15. ② グラフの描写 やりたいこと: 筋トレの重量をグラフに描写したい（縦軸重量、横 軸⽇付の横スクロール有りのグラフの描写）
16. グラフの描写するまでに 1. React Nativeのためのグラフ描写プラグインを探す 2. victory-nativeを使ってみる（スクロール機能が付いてる！） 3. スクロール中、重くてもたつく。。。 4. 他のプラグインを探して使⽤ → もたつくor欲しい機能がな い → プラグインを探す →... の繰り返し 5. RN朝活でWebViewを使うことを提案してもらう 6. Web⽤のJSライブラリ、Chart.jsをWebViewを⽤いてReact Nativeで使う 7. WebViewをScrollViewで囲むことで横スクロールをもたつき なく実装！ 8. 相談することの⼤切さを実感
17. ③ ルールについて ファイル名の命名ルール、ディレクトリの構造が 気になる → 他の⼈はどうしてるんだろう、慣習的なものは あるのかな？
18. ④ 経験値について ⾃分の場合、知ってる範囲で実装を済ませようと しがちな気がする → Webサイト制作のように業務委託したほうが知識 が増えるんじゃないか？
19. ①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③アプリを作り始める ④どう⾏動したか ⑤Webサイト制作中⼼の仕事から  アプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始
20. どう⾏動したか ConnpassでReactNativeの勉強会を探していって みたり、開発者にとにかくあってみよう。 • 7⽉ フリーランス仲間とReact、Reduxのもくもく会（この 当時はアプリ制作に転向しようと思ってなかったので楽しく もくもく） • 9⽉ React Native Meetup（はじめてのRNの勉強会でわくわ くする） • 9⽉ React Nativeアプリ開発（朝活） • 10⽉ 技術書店5（RNの本を買い漁って読む） • 10⽉ React NativeやReactの⼊⾨本を読んでみる • 11⽉ React Nativeもくもく会（業務委託のきっかけ！）
21. ①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③アプリを作り始める ④どう⾏動したか ⑤Webサイト制作中⼼の仕事から  アプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始
22. アプリ制作の仕事に移りたい アプリ制作を本格的にしたくなってきたが。。。 • 平均すると週0.5~1⽇しか時間を設けられてない • 仕事が⽴て込むと何週間もほったらかし → 何やってたか忘れる • 無からのスタート → 学ぶべきことが多い • 個⼈開発スタイルは今の⾃分には合っていない • 経験値がたまりにくい • マーケティング、UIの知識がない → アプリ制作を⽚⼿間にやるのは⾃分には無理！ → 業務委託！
23. ①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③アプリを作り始める ④どう⾏動したか ⑤Webサイト制作中⼼の仕事から  アプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始
24. なんで業務委託？ ⼀⼈では知ってる知識プラスαでできるものを考 えがち • ⾃⼰満になる（コードの質、運⽤のしやすさが疎かになる。ア プリの使い勝⼿も⾃分中⼼になる） • 開発経験を増やしにくい • 視野が狭い（解決策にたどり着かない） • コードの書き⽅が上達しにくい 他の⼈の開発環境、ルール、コードの書き⽅など を⾒てみたい
25. ①アプリが作りたい！ ②なぜReact Native+Expoで作ろうと思ったか ③アプリを作り始める ④どう⾏動したか ⑤Webサイト制作中⼼の仕事から  アプリ制作の仕事に移りたい ⑥業務委託したい ⑦業務委託開始
26. 業務委託して思ったこと 良かったこと • チーム開発を経験できる • アプリ制作中⼼の⽣活を送れる • 他の⼈の書いたコードに触れることができる！ • 丁寧にレビューしてもらえる • タスクをこなす度に知識が増える（できる範囲での実装から、実 装したいもの → 勉強、実装へ） • プログラミング以外のことに触れられる（マーケティング、UI） 苦労していること • スピード感、実⼒ → これらは経験、勉強、努⼒で埋める!!!
27. 2019年の抱負 戦⼒になる 業務で得た知識をアウトプットする 個⼈開発アプリを作りきる 筋⾁の⼤会に出る
28. ご清聴ありがとうございました