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

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 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

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

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

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

① 環境開発づくり どんなプラグインをインストールしたらいいのか → 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を無効にする(整形がうまくいかずに崩れるから)

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

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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