概要
React Nativeで開発したら、いつも他の人が作ったオープンソースをたくさん使って開発しました。これを見て、私もオープンソースを作ってみようとは思いましたが、時間がないと言い訳しながら作ってなかったです。
しかし、時間があって、作ってみようと思ったら、どこから作ればいいか全然わかりませんでした。皆さんも私のようにオープンソースを作りたいですが、どこからスタートすればいいか分からない方のため、オープンソースを作る方法について共有します。
下記のリンクは自分が作ったオープンソースです。
NPM
このブログで紹介するオープンソース作成方法はReact NativeのJavascript部分だけです。Nativeモジュールを作成する方法ではないことを事前に共有します。
今から作るJavascriptオープンソースを使うためにはNPM(Node Package Manager)へデプロイする必要があります。
オープンソースを作成する前下記のブログポストを確認して、自分が開発するオープンソースをNPMへ配布できる状態を作ってください。
GitHubリポジトリ
オープンソースを共有する最高の方法はGitHubですね。今から作るオープンソースライブラリのソースコードを共有するためGitHubリポジトリを生成します。
まだ、GitHubのアカウンどを持ってない方は、下記のリンクを使って無料で会員登録してください。
- GitHub:https://github.com/
GitHubのリポジトリを生成する時、NPMへ既に配布されたライブラリと重複されてない名前で生成します。NPMで重複されたか確認する方法は下記のブログを参考してください。
- NPMに自分のライブラリを配布する: npm info
GitHubリポジトリを作ったら、自分のローカルPCへCloneします。
git clone [Your repository URL]
package.json
Javascriptのオープンソースを開発して配布するためpackage.jsonファイルが必要です。 下記のコマンドを使ってpackage.jsonを生成します。
# cd [Your Project folder]
npm init
package.jsonファイルを生成する方法について詳しい内容は下記のリンクを参考してください。
- NPMに自分のライブラリを配布する: npm init
開発環境構成
私はTypescriptを使ってReact Nativeのライブラリを開発してみました。今からTypescriptとReact Nativeを開発する環境を構築してみます。
まず、下記のコマンドを使ってReact Nativeのプロジェクトを生成します。
react-native init Develop
このプロジェクトはReact Nativeのライブラリを開発する時使う予定です。次はtsconfig.jsonファイルを生成して下記のように修正します。
{
"compilerOptions": {
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react-native",
"declaration": true,
"declarationMap": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"outDir": "dist",
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"removeComments": true
},
"include": ["src"],
"exclude": ["node_modules", "Develop", "DevelopWithExpo", "Example", "ExampleWithExpo", "dist"]
}
オプションについての説明は省略します。ただし、"include": ["src"],を使ってsrcフォルダへあるファイルをビルドする予定で、"outDir": "dist",オプションを使ってビルドした結果をdistフォルダへ保存する予定です。
次はpackage.jsonファイルを開いて下記のように修正します。
{
...
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"lint": "eslint --ext .tsx --ext .ts src/",
"format": "prettier --check ./src",
"start": "rm -rf Develop/dist && tsc -w --outDir Develop/dist",
"start:expo": "rm -rf DevelopWithExpo/dist && tsc -w --outDir DevelopWithExpo/dist",
"prepare": "rm -rf dist && tsc"
},
"lint-staged": {
"src/**/*.{ts,tsx}": [
"eslint --ext .tsx --ext .ts src/ --fix"
],
"./src/**": [
"prettier --write ."
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
...
"peerDependencies": {
"react": "*",
"react-native": "*"
},
"devDependencies": {
"@types/react": "*",
"@types/react-native": "*",
"@typescript-eslint/eslint-plugin": "2.25.0",
"@typescript-eslint/parser": "2.25.0",
"eslint": "6.8.0",
"eslint-plugin-prettier": "3.1.2",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "2.5.1",
"husky": "4.2.3",
"lint-staged": "10.0.9",
"prettier": "2.0.2",
"react": "*",
"react-native": "*",
"typescript": "^3.7.5"
},
}
一つ一つ詳しく見てみます。
"main": "dist/index.js",
"types": "dist/index.d.ts",
NPMにライブラリのメインファイルとタイプファイルが何かを教えてあげます。
"scripts": {
"lint": "eslint --ext .tsx --ext .ts src/",
"format": "prettier --check ./src",
"start": "rm -rf Develop/dist && tsc -w --outDir Develop/dist",
"start:expo": "rm -rf DevelopWithExpo/dist && tsc -w --outDir DevelopWithExpo/dist",
"prepare": "rm -rf dist && tsc"
},
ライブラリを開発する時使うコマンドです。
lintとformatはeslintとprettierを使って開発してるソースコードのFormattingを検査するコマンドです。また、下記にあるlint-stagedとhuskyの設定を使ってgit commitする時、Formattingを実行するようにしました。
"lint-staged": {
"src/**/*.{ts,tsx}": [
"eslint --ext .tsx --ext .ts src/ --fix"
],
"./src/**": [
"prettier --write ."
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
詳しい内容が知りたい方は下記のブログポストを参考してください。
ライブラリを開発する時、npm startのコマンドを使ってTypescriptをビルドしながら、開発する予定です。また、npm publishを使って開発したライブラリを配布しますが、prepareコマンドを定義して配布前Typescriptをビルドするように設定しました。
詳しい内容は下記のブログを参考してください。
- NPMに自分のライブラリを配布する: npm publish
開発へ必要なライブラリをdevDepenenciesへ定義しました。次は下記のコマンドを使って必要なライブラリをインストールします。
npm install
インストールが完了されたら.gitignoreファイルと.prettierignoreファイルを生成してnode_modulesを追加します。
今開発する準備ができました。次は、どのようにライブラリを開発するか見てみます。
ライブラリを開発する
上で設定した開発環境を見ると、私たちはsrcフォルダへ開発するソースコードを追加しなきゃならないです。srcフォルダへindex.tsxファイルを生成して、下記のように修正します。
import React from 'react';
import { View, Text } from 'react-native';
const LibraryName = (): JSX.Element => {
return (
<View>
<Text>Hello World!</Text>
</View>
);
};
export default LibraryName;
そしてDevelopフォルダのApp.jsファイルを開いて下記のように修正します。
import React from 'react';
import {StyleSheet, SafeAreaView} from 'react-native';
import LibraryName from './dist';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<LibraryName />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
そして、下記のコマンドを使って開発したTypescriptをビルドします。
npm start
上で作ったpackage.jsonのstartコマンドを見ると下記のようです。
"start": "rm -rf Develop/dist && tsc -w --outDir Develop/dist",
コマンドを詳しく見ると、Develop/distフォルダを生成した後、tscを使ってビルドして、結果物をDevelop/distフォルダへ保存します。また、-wオプションを使ってソースコードの変更がある場合、再ビルドするように設定しました。したがって、上のコマンドを実行した後、開発を進めます。
そして他のTerminalまたは、CMDを開いて下記のコマンドを実行します。
cd Develop
npm run ios
# npm run android
そしたら私たちが開発してるライブラリが下記のようにうまく表示されてることが確認できます。
また、src/index.tsxファイルを開いて内容を修正して見るとシミュレータの内容がうまく更新されることが確認できます。
配布する
このように開発したライブラリを配布するためには下記のコマンドを使います。
npm login
npm publish
コマンドについて詳しい説明は下記のブログを参考してください。
完了
React Nativeのライブラリを開発する方法について簡単に見てみました。NPMへ配布するため、NPMに関するブログと一緒に見なきゃなので、ちょっと難しいかもしれないです。에 관한 블로그와 같이 보셔야 좀 더 이해하기 쉬울거 같네요.
皆さんも時間がある時、素敵なオープンソースを開発して、開発者の文化へ参加してみることはどうでしょうか？
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
