hAcKTion

日々のアウトプット場所。

storybook導入時のメモ(1)

なんだかんだで新規プロジェクトに入れたことがないので、Next.jsで作り始めるついでに、下地だけ準備することに。以下を参考に進める。

storybook.js.org

npx sb init

/storybook 以下にサンプルコードが出るが、 .storybook/main.js にて対象とするパスをしている。 storybookをどこに置くか検討して、対象とするパスを書き換え、サンプルコードを削除したい。

読書メモ(React Nativeに支えられる企業・Software Design (ソフトウェアデザイン) 2021年8月)

久々に本を買って少し斜め読みではありつつ、覚えている内容をメモします。

 React Nativeに支えられる企業

techbookfest.org

技術書典という技術系の同人即売会があるのですが、今回気になるタイトルの書籍があったので購入してみました。 「React Nativeに支えられる企業」という本です。 いくつかの採用している企業の背景だったり、構成とか、頑張った点とか、ノウハウが詰まった良い本でした。 stand.fmという社内で一時流行ったサービスもReact Nativeで作られていたそうで、なるほど〜〜と思いました。 あとは、人材不足の背景がすごく伺えました。アプリ開発者もそうですが、Webの開発者そのものも少ないようで、1人でバババっと開発できるという点がReact Nativeの強みなのかなと感じました。

Software Design (ソフトウェアデザイン) 2021年8月

第一特集の「もう怖くないReact 3つの壁とその越え方」の目次で即買い。 自分がどれくらい雰囲気でコード書いてるかを測る目的もありました。 3章立てで、2章までは割と自分の中でうまく言語化できないけど、理解しているという感じで読めましたが、3章のそれぞれのhooksだったりの使い方については、雰囲気でやっているのがよくわかりました(苦笑) 丁寧にわかりやすく書いてあるので、反復して読んでみようと思います。

React Native入門(2)〜タブナビゲーションに1つタブを増やす〜

前回にReact Nativeに入門したのですが、サンプルはタブナビゲーションのタブ数が2つしかないので、3つに増やすことを今回はやっていきます。

hacktion.hateblo.jp

さて、まずは screens/TabThreeScreen.tsx に画面を表示するための記述を追加していきます・・・が、今回はサンプルなので、 screens/TabTwoScreen.tsx をコピペして、 TwoThree に置換しました。

次に、ナビゲーションバーにTab Threeへ遷移するボタンが必要です。

navigation/BottomTabNavigator.tsx に以下を加えます。

<BottomTab.Screen
  name="TabThree"
  component={TabThreeNavigator}
  options={{
    tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
  }}
/>

さて、 name で怒られますが、 types.tsxBottomTabParamList にないと怒られているので、ここに TabThree を追加してあげます。 さらに、 componentTabThreeNavigator がないと怒られるので、これを作っていきます。

navigation/BottomTabNavigator.tsx の最後に、 TabTwoNavigator() を参考に、以下を書き足します。

const TabThreeStack = createStackNavigator<TabThreeParamList>();

function TabThreeNavigator() {
  return (
    <TabThreeStack.Navigator>
      <TabThreeStack.Screen
        name="TabThreeScreen"
        component={TabThreeScreen}
        options={{ headerTitle: 'Tab Three Title' }}
      />
    </TabThreeStack.Navigator>
  );
}

TabThreeParamList がないので、 types.tsx に、これまた TabTwoParamList を参考に以下を書き足します。

export type TabThreeParamList = {
  TabThreeScreen: undefined;
};

そして、 navigation/BottomTabNavigator.tsx でインポートします。

さて、ボタンを追加するだけと思ってコピペしてしまったため、エラー解決のために一気にルーティングの設定まで行ってしまったのですが、React Native向けのルーティングや画面遷移を実現してくれる React Navigator というものを使っているようで、ここの記述を追加した形になります。

reactnavigation.org

React Routerの <Router> が、React Navigatorの <x.Navigator> に相当して、 React Routerの <Route> が React Navigatore の <x.Screen> に相当する感じかと思います(乱暴)

さて、これで3つ目の画面ができました。

今回の差分はこちらとなります。

次は、この3画面目にリスト表示をすることをやっていきます。

React Native入門(1)

React Nativeに入門してみました。 Ionic + Capacitorは独力でできるようになったので、React Native, Flutterあたりと使い分けできるようにしておきたいなと思ったのと、副業案件がなぜかReact Nativeに偏ってるので、少しスキル幅を伸ばしたいなと言う思いから、まずはReact Nativeに手をつけてみました。

reactnative.dev

expoというフレームワークを使うのが今は主流っぽいので、それを使ってハローしてみた。

$ npm install -g expo-cli

$ $SHELL -l

$ expo init hello-react-native

$ npm start

f:id:akt-uehr:20210704154941p:plain

Metro Bundlerというものが立ち上がって、どうやら、ここから表示確認するためのマネジメントができそう。

試しに、 Run on iOS simulator を押してみたら、なにやらシミュレーターの準備が始まって、忘れた頃に立ち上がりました。

f:id:akt-uehr:20210704155111p:plain

Xcodeなしで確認できるのはよいですね。 ちなみに、これ実際にビルド配布したりストア申請するときは、Xcode使うのかな。また後々調べてみよう。

で、 Run in the web browser を選択すると、数秒かかって、ブラウザでも確認できました。

f:id:akt-uehr:20210704154641p:plain

タブが2つあるサンプルが表示されました。

これだけだとちょっとやった気分にならないので、画面に何か追加してみます。

./screensTabOneScreen.tsxTabTwoScreen.tsx があったので、TabOneScreenに少しコンポーネントを追加してみた。

<View> <Text> <TextInput> というのが、コアコンポーネント らしいので、使ってみました。差分はこちら

f:id:akt-uehr:20210704155504p:plain

スタイルの付け方も react-native のライブラリで用意されているものを利用する形で、イメージとしてはCSSをオブジェクトで表現した感じ。

ここまで触った印象として、React Nativeのコンポーネントを知らないと、どのように表現したらよいのかがちょっとわからないかもしれない・・・。 ToDoリストを作ってみるまでやってみるかな。

というわけで、次は3画面目を作るという目標でやってみます。

LINE公式アカウント Basic認定試験に合格しました。

LINE公式アカウント Basic認定試験に合格しました。

www.linebiz.com

 

学習時間的には約4時間ほど。ただ1日数十分とかなので、期間的にはとっかかりから1ヶ月強かかっています。

 

試験内容はもう忘れましたが(笑)資料スライドを結構読み込んでおかないといけないのと、可能なら一回運用された方が理解が早そうです。正直時間ギリギリで落ちたかと思いました(笑)

 

勉強して思ったのが、LINEの集客力とそれを分析するツールがとても揃っていること、そして利用する側がそこまで知識がなくても、こういった資格なども通して必要な情報を揃えていること。さすが利用者が桁違いのツールだな・・・ということ。

 

そりゃー、昨年行政がアンケートとるために利用するだけあるわと思わされました。

 

運用知識があったら、副業で支援とかできるかもと思ったりするので、Advancedも検討したいと思います。

キャリアプラン定点観測(2021/06/26)

キャリアプランを見直す機会があったので、せっかくなのでブログにも残しておこうと思う。 また、定点観測として定期的に今後の変更を定期的にしていこうと思う。

今回、キャリアプランを見直そうと思ったきっかけは、自分へのステ振りが散らばり始めたり、自分以外への時間の投資が増えた事で、停滞感を感じていたから。新卒の人を見るとアグレッシブだし、基礎スペックがすでに高かったりするので(笑)おじさんも負けないぞーとちょっと意気込んでいる。

短期と中・長期のざっくりスパンで、その中で役割とチャレンジでちょっと分けてみた。 中・長期はその先にどうなりたいかによってチャレンジは未定。

役割とチャレンジ

短期

  • 役割
    • UXエンジニア
      • 具体的には、要件定義〜開発〜運用の全フェーズにおいて、フロントエンドエンジニアとしてのスコープで、プロダクトを支援できる
  • チャレンジ
    • 短期の役割を伸ばすためにすること
      • バックエンド技術やそれのフロントエンド連携技術と、CI/CDまわりに明るくないので、2021は月並みに理解できる事を目標
      • フロントエンドの幅としては、2020年に得たマルチプラットフォーム開発をIonicだけでなく、React Native, Flutterへと広げていく
    • 中・長期の役割を目指すためにすること
      • PMロールを兼務もしくはPMチーム(PdMチーム?)に異動して経験を積む

中・長期

  • 役割
    • PdM支援を行うPM/PdM
      • プロダクトの企画立案から、要件定義を行い、開発者と連携してスコープを策定する。ローンチ後はKPI観測による課題の整理や洗い出しを行った上で、継続的にプロダクトを成長させる。
      • そこそこに全部理解をした上で、職種境界が曖昧なところを橋渡しする
      • 必要な支援・資源を計画してチームビルディングして、POを理解して翻訳して、提案してブレーン
        • 管理が心配な場合はサブで入ってもらう
      • 誰とでも円滑なコミュニケーション・幅広いナレッジ・主体的に行動できる

というわけで、PM復帰説が出てきています。 ただ、自身としては、PM???という「?」が少しついているので、次はこの「?」とさせているものを深掘りしていこうと思います。

2020年9月の振り返り

8月でほぼピタッとブログ投稿が途切れてしまいましたが、9月は主に個人でやっているパン屋さんの販促物制作業務の納品ラッシュでした。

 

140点もの商品のプライスカードを、商品名・価格・説明の確認から、印刷、ラミネート加工、切り抜きを行ったので、9月の1/4くらいはこれに費やしました。また、新製品の撮影・写真加工・プライスカード作成が末にどどっと来たり、Facebook更新に加えて、Instagram開設、Facebook/Instagram広告・・・etcとパン屋さん業務で残りの3/4もほぼ全部費やしました。

 

業務の方は、Capacitor + Ionic + Reactのハイブリッドアプリと、Nifty Cloud Mobile Backendとの連携調査に2週間ほど費やしてしまって、とてもブルーな気持ちでした。遅れていたガワ制作も後半の2週間(といっても連休であまり時間なく)で集中して、ようやく遅れが取り戻せてきているかなという感覚です。

 

体調面では、今年は季節の変わり目がスパッと分かれているのもあるのか、腰痛が最近治らず、ややメンタルへの影響が気になる感じ。

 

ちょっとした息抜きにはMagic the Gathering Arenaで遊んでます。

 

そんなこんなで、10月も引き続きパン屋さんがお仕事たんまりあるので、アウトプット少なめですが、頑張っていきます。