スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。 ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。 詳細は↓に引用した。 StackNavigator StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル BottomTabNavigator アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル 実践していく まずは移動するページが欲しいので、 mkdir src mkdir src/screens touch src/screens/Sample.tsx 適当に作成する。 Sample.tsxは import React from "react"; import { ScrollView, View, Text } from "react-native"; const Sample = () => { return ( <ScrollView> <View> <Text>Sample</Text> </View> </ScrollView> ) } export default Sample; こんな感じになる。 ちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。 作成したページをApp.tsxで読み込む。 import Sample from './src/screens/Sample' export default function App() { return ( <Sample /> ) } 同様にSample2とかを作成する。...

過去に定義した型から新しい型を生成する TypeScriptで型を定義したのち、その中の一部を使いたくなる時がある。 例えば、Personという型を定義した時、 export interface Person { age: number sex: 'man' | 'woman' bloodType: 'A' | 'B' | 'O' | 'AB' } bloodTypeという型を使用したいという時がある。 そういう時は、 export type BloodType = Person['bloodType'] 上記のように書くことで型を取り出すことができる。 最初から最小で作るの吉？ export interface Age { age: number; } export type Sex = 'man' | 'woman'; export type BloodType = 'A' | 'B' | 'O' | 'AB'; export interface Person { age: Age; sex: Sex; bloodType: BloodType; } そもそも上記のように最小で作っておいた方がいい？ ただ使わないものも多いので、取り出す方が労力が少なく済みそうな気がする。

WordPressのバージョン管理はSubversion で行われるのだが、なかなか慣れずに更新が億劫になってきたので、Githubで更新できるようにしてみた。 過去関連記事 Subversion (SVN) を使用し承認されたWordPressプラグインをリリースしてみる Github Actionを使用する 10up.comがWordPress.orgのプラグインリポジトリにデプロイするGitHub Actionsを公開してくれているので、それを活用させていただく。 Github リポジトリを作成する ディレクトリ構成 まずはいつも通りGithubのリポジトリを作成する。 本当にいつも通りで問題ないけれど、WordPressのスラッグのとリポジトリ名を揃えた方が後々ほんの少しだけ楽になる。 ディレクトリ構成は下記のようにする。 . ├── .wordpress-org │ ├── banner-772x250.png │ ├── icon-128x128.png │ └── screenshot-1.png ├── README.md ├── plugin-sample.php └── readme.txt .wordpress-orgにSVNリポジトリのassetsフォルダの中身をコピーする。 Github Action を作成する リポジトリのActionsへ行き、New workflow → set up a workflow yourself でYAMLファイルの作成画面に行く。 ファイル名はわかりやすい名前（ex:wordpress-plugin-deploy）を指定する。 次にaction-wordpress-plugin-deployページにあるExample Workflow Filesの内容をコピペする。 name: Deploy to WordPress.org on: push: tags: , "*" jobs: tag: name: New tag runs-on: ubuntu-latest steps: - uses: actions/checkout@master - name: Build # Remove or modify this step as needed run: | npm install npm run build - name: WordPress Plugin Deploy uses: 10up/action-wordpress-plugin-deploy@stable env: SVN_PASSWORD: ${{ secrets....

呼び出したいモジュールを作成する まずは利用するgreetingsモジュールを作成する。 go mod init example.com/greetings 上記を実行する。 go: creating new go.mod: module example.com/greetings というメッセ―ジとともに、go.modが作成される。 ちなみにコマンドに記入した`example.com‘はドメイン名ではGo ツールによってモジュールをダウンロードできるパスになるっぽいらしいけれど、よくわからない。 次にgreetings.goというファイルを作成し、 package greetings import "fmt" // Hello returns a greeting for the named person. func Hello(name string) string { // Return a greeting that embeds the name in a message. message := fmt.Sprintf("Hi, %v. Welcome!", name) return message } 上記のように記入する。 これでパッケージは作成できた。 mainのパッケージを作成する 次にこれを呼び出していく。 先ほど作成したgreetingsモジュールが格納されているフォルダと同階層にhelloフォルダを作成する <home>/ |-- greetings/ |-- hello/ 今までの通りモジュールを作成する。 go mod init hello ドメインは必須じゃないということだったので、省略してみたが、無事に作成することができた。...

インストール Go Download and installのページに行き、環境に適したものをインストールする。 インストールするとシステムが立ち上げるので、手順に沿って進めていく。 Finish後、Goがインストールされていることを確認する。 コマンドを開き、go versionを叩くとgo version go1.21.1 windows/amd64と表示された。 これでインストールされていることを確認できた。 Hello World 次にHelloWordを表示させる。 まずは任意の場所に適当なフォルダを作成する。 mkdir HelloWorldGo cd HelloWorldGo モジュールを作成する 次に、 go mod init example/hello 上記コマンドでモジュールの作成を行うのだが、 'go' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 というエラーが出た。 Pathを調べてみるとしっかりと通っている。 ということで再起動をする。 再起動で、 go mod init example/hello go: creating new go.mod: module example/hello 無事に叩けるようになった。 上記コマンドで作成されたのは、go.modというファイルで、 module example/hello go 1.21.1 という記載がある。 調べてみるとこれは、依存関係のバージョン管理をするものらしい。 つまり、スクリプトを記述しないJavaScriptのpackage.jsonみたいなものらしい。 疑問点が解消されたので、次に行く。 Mainパッケージの作成 hello.goファイルを作成し、 package main import "fmt" func main() { fmt.Println("Hello, World!") } をと記述する。 go run ....