アプリを提出する(iOS 、Android)
□Androidアプリをリリースするまでの流れ
GoogleplayにAndroidアプリをリリースする場合は、手元のソースコードを.apkまたは.aabという拡張子のアプリファイルにまとめてから、アップデートする。
●流れ
1 Googleplayに開発者として登録する(初回のみ25ドルかかる)
2 PlayConsole(管理画面)でストア向けの掲載情報を作成・入力する
3 アプリファイルをアップロードする
公式ドキュメント
Play Console の使用方法 - Play Console ヘルプ
□iOSアプリをリリースするまでの流れ
App StoreにiOSをリリースする場合は、手元のソースコードを.ipaという拡張子のアプリファイルにまとめてから、アップロードする。
●流れ
1 Apple Developer Programに登録する(1年ごとに99ドルかかる)
2 デベロッパーアカウントサービスでApple IDを登録する
3 App Store Connectでストア向けの掲載情報を作成・入力する
4 アプリファイルをアップロードする
5 審査を受ける
6 審査が通ったらアプリを公開する
公式ドキュメント
※Apple IDの登録や証明書などの管理はデベロッパーアカウントで行い、Apple Storeへの掲載内容や審査についてはApple Store Connectで行うという点がわかりづらいので、ドキュメントを読む際は注意
※iOSのリリースには審査が必要
審査基準→App Store Reviewガイドライン - Apple Developer
□アプリファイルを作る方法
最終的にストアに公開するためのアプリファイルを、ソースコードから組み上げる処理のことを、リリースビルドと呼ぶ。
●Expoでリリースビルドを行う流れ
Expo CLIでリリースビルドのコマンドを実行すると、設定ファイルである app,json やJavaScriptファイル、画像リソースや音声リソースなど、ダウンロードリンクが発行され、apkファイルやipaファイルなどのアプリファイルがダウンロードできるようになります。
ビルドの制御ができるのは、クラウドサービス側におまかせになってしまうので、あまり細かい設定はできない。唯一細かい制御ができるのは、app,json
設定できる項目の全体像まとめ→ app.json / app.config.jsで設定できる内容
特に、リリースビルドと関係が強いのは、次の5つ
・アプリ名
・アプリID
・アプリバージョン
・アプリアイコン
・スプラッシュ画面(プログラムの立ち上げが実行中である段階で表示される画面)
●アプリ名を設定する
app.json
{ "expo": { "name": "サンプルアプリ", // (1) // (略) } }
app.jsonのExpo.nameの階層に文字列を記述すると、これがアプリ名になる
●アプリIDを設定する
アプリIDは、同名のアプリが複数あった場合にもストア内でアプリを識別するためのも
慣例として、「開発者が所有しているドメインの逆順+アプリ名」で命令する
例えば、tata.info というドメインでアプリの名前が timer だった場合、アプリIDは「info.tata.timer 」
app.json
{ "expo": { // (略) "ios": { "bundleIdentifier": "info.tata.my-awesome-timer", // (1) // (略) }, "android": { "package": "info.tata.my_awesome_timer", // (2) // (略) }, // (略) } }
※AndroidアプリIDでは、ハイフン(-)は使えない、アンダースコア(_)は使える
iOSアプリでは、ハイフンが使えて、アンダースコアが使えない
●アプリのバージョンを設定する
app.jsonには、アプリのバージョンを記載することもできます。
アプリのバージョンは、ストアに表記するためのバージョンと、ストアの内部で機械的に管理する際に使われているバージョンの2種類がある
app.json
{ "expo": { // (略) "version": "1.4.0", // (略) "ios": { // (略) "buildNumber": "1040023", // (略) }, "android": { // (略) "versionCode": 1040023, // (略) }, // (略) } }
※Play ConsoleやApp Store Connectが管理のために利用する、「内部バージョン」とでも呼ぶべきものは注意!
iOSでは上記のとおりexpo.ios.buildNumberの階層に文字列で記載し、Androidでは上記のとおりexpo.andoroid.versionCodeの階層に数値で記載する。buildNumberは文字列ですが、使っていいのは数値もしくはドット(.)だけなので、事実上AndroidもiOSも数値を記載することになり、この数値はPlay ConsoleやApp Store Connectにアプリファイルをアップロードするたびに、大きい数値にしないといけない。内部バージョンは「必ず増える数値」として管理されていること!
□画像リソースを準備する
アプリアイコンと、アプリ起動時に表示されるスプラッシュ画面の2種類が最低限必要
●Expo向けに用意するアプリアイコンについてのガイドライン公式https://docs.expo.io/guides/app-icons/
< iOS向けアイコンの要点>
・png形式
・サイズ 1024×1024ピクセル推奨
・Appleのヒューマンインターフェースガイドラインに沿ったデザインであること
<Android向けのアイコン>
・png形式
・Android 8.0以降で有効なアダプティブアイコンについてのガイドラインに沿ったデザインであること
・サイズ 512×512ピクセル以上推奨
・アダプティブアイコン用のリソースと、通常アイコンのリソースをそれぞれ用意する
※アダプティブアイコンとは→アイコンの中でさらに背景と中央のイラストを分離して管理する複雑なアイコン
Android 8.0以降ではアダプティブアイコンで作るのが標準
app.json
{ "expo": { // (略) "ios": { // (略) "icon": "./assets/icon.png", // (1) // (略) }, "android": { // (略) "icon": "./assets/icon.png", // (2) "adaptiveIcon": { // (3) "foregroundImage": "./assets/ic_launcher_foreground.png", "backgroundColor": "#FFFFFF" }, // (略) }, // (略) } }
●スプラッシュ画面について
スプラッシュ画面用の画像リソースは多くの場合、中央にイラストやロゴを配置して、それ以外の部分を透過にした巨大な正方形の画像として作られる。どんな画面サイズでもコンテンツを綺麗に表示するため(スマートフォンでもタブレットでもある程度自然な表示になる)
☆リリースビルドする
ここまで準備できたらあとはリリースビルドを実行するだけ
ターミナルで次のコマンド実行
Androidアプリのビルド:expo build:android
iOSアプリのビルド:expo build:ios
↓
基本的に全てYesで答える
AppleIDを求められたら、Apple Developer Programの登録に使ったApple IDとパスワードを入力
↓
サーバー側でのビルドが終わると、ダウンロード用のURLが表示されます。URLにアクセスすると、apkファイルやipaファイルがダウンロードできる。
☆アプリファイルのアップロード方法
あとはストアにアップロードするだけ!
Play Consoleの場合は、アプリ個別の画面でメニューの「公開 > 製品版」を開くと、APKをドラッグ&ドロップする領域が現れるので、ここにapkファイルを入れればアップロードできる。
バージョン名やリリースノートを埋めて、保存ボタンを押していけば、アプリを公開!
App Store Connectの場合は、ブラウザからipaファイルをアップロードする方法がないため、別のアプリを利用します。Mac App Storeで「Transporter」を探して、手元のmacOSにインストールする。起動してApple IDでログインすると、App Store Connectにアップロードするための画面が現れるので、ここにipaファイルをドラッグ&ドロップ!
操作を進めていくと、App Store Connectへのアップロード開始。アップロードが終われば、次は審査。ストアの掲載情報を十分に埋めてから臨みましょう!!!!!
参考:
https://codezine.jp/article/detail/12673?p=
ExpoではじめるReactNative
「Expo」・・・簡単に扱えるように抽象化されたツール
☆ReactNativeでできること
ReactNativeがJavaScriptに対して提供している機能は、大きく分けて
コンポーネントとモジュールに分類される
<コンポーネント>
・View レイアウトの基本単位
・Text テキストを表示・装飾する
・Activitylndicator 処理待ちを表すインジケーター
・FlatList 配列データを省メモリで表示
・ScrollView 内側のコンテンツが画面をはみ出したらスクロールされる
・RefreshControl ScrollViewに「引っ張って更新」を付与する
・TouchableOpacity あらゆるビューにタップイベントとフィードバックを持たせる
<モジュール>
・Alert 簡易なダイアログを表示する
・Dimensions アプリのウィンドウやデバイスの画面サイズを取得する
・Keyboard キーボードの表示・非表示を検知する
・Animated ビューをアニメーションさせる
・StyleSheet コンポーネントに適用するスタイルをまとめて管理する
・Geolocation 現在地の経緯度情報を取得する
・Fetch インターネットと通信を行う
・Console デバッグログを表示する
・Require NPMモジュールや別のファイルとして定義されたCommonJSモジュールを取り込む
□サードパーティーツールを取り込むことで豊富な機能が使える
NPMを使ってサードパーティーのライブラリを取り込むことができます。
よく使うライブラリ
・react-native-maps GoogleマップやiOSマップを表示・操作する
・react-native-camera 写真の撮影やバーコードのスキャンを行う
・react-narive-svg SVGと互換性のあるAPIでベクターイメージを描画する
□expoでビルド環境を抽象化する
「できればJavaScript文化圏でシングルページアプリケーションを作るときのような方法論だけでモバイルアプリを作りたい」→そんな希望を叶えるために
できる限りReactNativeの面倒な部分を抽象化して、頻出のReactNative向けのライブラリを設定済みのSDKを整備して、コマンドラインツールを使いやすくまとめたものが、Expoというツール群
<Expoが提供する便利なコンポーネントやモジュール>
・MapView react-native-mapsを取り込んだもの
・Camera react-native-cameraを取り込んだもの
・BarCodeScanner ANコードやQRコードなど、さまざまなバーコードを認識できるカメラプレビューのコーポーネント
・Permissions カメラやGPSを使う前にユーザーに使用許可を求めるダイアログを簡易に実装するモジュール
・Audio 音声の再生や録音を行うモジュール
☆Expoを使った環境開発の構築
①インストール
$ npm install -g expo-cli
※インストールする際の名前は expo-cli ですが、コマンドラインで扱う場合のコメンド名は expo になるので注意
②プロジェクトの作成
$ expo init my-first-react-native-app
③blank tabs のどちらにするか質問される
blankを選択すると、とてもシンプルな構成でプロジェクトの初期化が行われる
tabsを選択すると、タブで画面の切り替えができるように画面推移ライブラリが導入済みの、少し複雑で実用的なプロジェクトとして初期化されます。
初回のnpm install が実行される
しばらく待つと、プロジェクトの作成が完了
<各ファイル・フォルダの役割>
・assets/ アプリアイコンやスプラッシュ画像等のリソースを配置するフォルダ
・.watchmanconfig デバッグ中の監視にwatchmanコマンドを利用する場合の設定ファイル
・App.js Reactアプリケーションとしてのエントリーポイント
・app.json アプリの設定を記述するファイル
・babel.config.js Babelの設定ファイル
参考:https://codezine.jp/article/detail/11384?p=3
React Native 基本
現代のWebサービスは、次の3つのプラットフォームに対応づることが求められている。
・ブラウザ(Webアプリケーション)
・iOS
これらは同じやり方では作れない。
WebアプリケーションとAndroidアプリとiOSアプリの作り方は、考え方として近い部分は随所あるものの、基本的には大きく違うものです。
主な違い
・言語
・非自動的処理を実現するAPIの使い方
・日時を計算するAPIの使い方
・UIを組み立てる方法
・UIを更新する方法
・リリースする方法
・etc...
プラットフォームごとに適した標準的なお作法や、仕組み上の課題・問題、それに対するベストプラクティスがあります。
↓問題
提供するプラットフォームごとに人材が必要になる。
人が必要→お金がかかる時間もかかる
「できるだけ3プラットフォーム同時にリリースして」といった要件が加わるとさらに難易度があがる
1人で3プラットフォームをまかなえるスーパーマンを連れてきても解決できない。(KotlinでAndroidアプリを書きながら、同時にSwiftでiOSアプリを作ることはできない)
↓
「多少自由度を失ってもいいから、一度の実装で複数のプラットフォームにアプリを提供したい」というニーズが生まれる
↓
AndroidアプリとiOSアプリ(以降、モバイルアプリとまとめます)の同時開発の分野で、多くの試みがなされた
↓
3つのアプローチ
・ハイブリット型:WebViewの上でWebアプリケーションを動かす
・独自レンダラ型:独自の描画エンジンでUIを描画する
・ネイティブUI型:AndroidやiOSのシステムを別の言語やフレームワークから操作する
☆React Native とはどんな開発ツールか
Facebook社が中心になって開発が進められているオープンソースのクロスプラットフォーム開発ツール。
Reactといえば、こちらもFacebook社がオープンソースで開発している、JavaScript向けのUI状態管理ライブラリです。
React Nativeの主な特徴としては、次の3つがあげられます。
・JavaScript言語とReactでUIの状態管理を記述できる
・AndroidSDKやiOSSDKが提供するビュー(ネイティブビュー)を内部実装として持つ、React向けの画面部品(コーポーネント)が利用できる
・JavaScriptCoreとBabellにより、ブラウザと劣らないJavaScript実行環境が提供されている
□JavaScriptg言語とReactでUIの状態管理を記述できる
ReactNativeでは、ブラウザ向けにJavaScriptによるSPAの開発を行う場合と近い感覚で、モバイルアプリの開発を行えます。
※SPA(シングルページアプリケーション)・・・・・単一のWebページでアプリケーションを構成する設計構造の名称
単一のWebページでコンテンツ切り替えを行うことで、ページ遷移の必要がなく、ブラウザの挙動に縛られないWeb表現を可能にする
□ネイティブな画面部品
JavaScriptで記述したHTMLライクなレイアウトが、実際に画面に表示されるので、「これは、ブラウザをアプリ内に組み込む仕組みであるWebViewを利用しているのではないか」と思いますが、実際は、React Nativeの「ネイティブ」の名は、UIの描画をWebViewに任せずに、AndroidSDKやiOSSDKが提供している「本来の」画面部品を使って画面を構築していることに由来している。
例えば、レイアウトの記述に利用した、<View>と<Text>の画面部品がある。
これらはそれぞれ、実行時にJavaScriptからAndroidSDKやiOSSDKへと、UIの描画を依頼します。
その結果、<View>要素はAndroidSDKの android.view.ViewやiOSSDKの UIKitが持つ UIViewに変換されますし、<TExt>要素も同様にandoroid.widget.TextViewやUIViewへと変換されます。
JavaScript側で定義したレイアウトは、全てネイティブなビューに変換されて描画されます。これによって、カメラのプレビューなどのブラウザでは困難だったビューも描画できる。
□JavaScript実行環境へブラウザに準拠
ブラウザは使っていないのはわかりましたが、となると独自のJavaScript処理系を積んでいるのでしょうか。いつものグローバル関数は使えるのか?
次の3つの観点で見ていく
・JavaScript(ES5)を解釈する
対応問題なし。ジャバスクリプトを実行する際に、SafariのエンジンであるWebKitの、さらに一部であるJavaScriptCoreを、ジャバスクリプトを解釈するためのライブラリとして利用する。
・ES201xを解釈する
JavaScriptのコンパイラであるBabelがビルドツールに組み込まれている。
JavaScriptCoreが読み込める言語使用まで、ソースコードをBabelがダウンロードしてくれるので、プログラマーは気兼ねなく新しいバージョンのJavaScriptを記述することができる。
・組み込み関数の実装を提供する
基本的にはWeb標準のAPIで実装されているが、未実装なものもある。
☆React Native をどんなツールとして捉えるか
ReactNativeとはどんな存在か→「ちょっと癖の強い、新しい種類のブラウザ」
「JavaScriptとReactというDSL(ドメイン固有言語)で、UIの状態管理を行うことができるUIライブラリ」
ReactNativeはブラウザの文化を受け継いでいる部分が多いので、基本的には情報を見るアプリに適している。
npm
Node.jpの特徴
・非同期処理により処理が速い
・「V8」エンジンを利用されているため処理が非常に速い
・シングルスレッドのためメモリ消費の効率が良い
Node.jsのメリット
・大量のアクセスにも耐えることが可能かつ高速処理を実現
・メモリ消費量を抑えることが可能
・読みやすいプログラムを設計することが可能
・フロントエンドからサーバーサイドに至るまでJavaScriptだけで記述可能
パッケージ
プログラムがたくさん入ったフォルダーのようなもの。
世の中のパッケージを使えば自分で一からコードを書かなくとも高度な機能を実現することができる。
npmにとってパッケージというのはpackage.jsonというファイルの親ディレクトリに含まれるファイル群である。
NPMとは
npmの正式名称は、Node Package Manager(Node .jsnのパッケージを管理するツール)
NPMと名のつくものは2つ
・オンライン上のパッケージレジストリ、つまり世界中の開発者が作ったNode.js パッケージが集められた場所
・Node.jpに付属している、パッケージを操作するためのCLI(コマンドラインインターフェイス;コマンドラインから実行できるプログラム)パッケージを作成したり、NPM 上のパッケージをローカルにインストールしたり、自分のパッケージを NPM に公開したりと、Node.js の開発に欠かせないツール
※ Node.jp・・・JavaScript実行環境
OSの機能にアクセスするプログラムを組むことができる。
つまりブラウザ上で動作していた時はできなかった自由なファイ
ルの読み書きやネットワーク通信などのOSの機能を扱える。
大量の同時接続をさばけるようなネットワークアプリケー
ションを構築することを目的として設計されています
Node.jsを使う目的
1.新しい仕様のJavaScriptやTypeScriptでクライアントサイドのプログラムを
書きたい
2.Webアプリケーションを作りたい
3.モバイル/デスクトップ用のアプリケーションを作りたい
Node.jsで使いたいライブラリがある場合、jsファイルをダウンロードしてきて<script src="xxx.js"></script>
とはせずにnpmを使ってインストールします。
□npmの特徴
・JavaScriptで書かれたプログラム
・node.jsパッケージ管理システム
・パッケージのバージョン管理・インストール補助に使用
・サーバーサイドで動く
□npmの主な機能
・ヘルプ機能
・バージョン管理機能
・パッケージのインストール
・インストール済みのパッケージ一覧表示
・パッケージのアップデート
・パッケージのアンインストール
npm install のコマンドを打つと何をしてくれるのか
npm install (パッケージ名なし)
パッケージ名なしで npm install を実行すると、package.json
と package-lock.json
に基づいて dependency が全てローカル(node_modules
)にインストールされる。
これを実行する必要があるのは、開発中のパッケージのソースコードだけ手元にある状態でdependencyがインストールされてない時である。
これに当てはまるのは以下のケース↓
・GitHub上のパッケージを開発/実行したいので、新しいマシン常にclone してきた
・create-react-appなどの、新しくプロジェクトを生成するツールを使ってパッケージを作成した
・node_modules内のファイルを謝っていじってしまい、一旦node_modulesごと削除した
※ dependency・・・プログラミングにおけるデザインパターンの一種でオブジェクトを成立させるために必要となるコード実行時に注入してゆくという概念のこと
npm install(パッケージ名)と打ったら何が起こるか
指定したパッケージがローカルにインストールされる。
これを使うのは、「dependencyは既にすべてインストールされており、新しく dependency を追加したいとき」である。
npm install したパッケージをソースコード中で使う
□npmの代表的なパッケージ例
○Express
Node.jsのための、高速で軽量でオープンなWebフレームワーク
[使い方]
①初期化を行う
mkdir myapp cd myapp npm init
1行目の mkdir myapp では、Expressの実装ファイルを入れるmyappディレクトリを作成
2行目の cd myapp では、myapp ディレクトリに移動
3行目の npm init では、myappで初期化処理
②Expressを実際にインストールする
npm install express
③Expressで実装する
index.jpソースコード
var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World!'); }); app.listen(3000, function () { });
表示結果
Hello World!
1行目のvar express = require(‘express’);では、expressをrequireで呼び出して、変数expressに代入しています。
2行目のvar app = express( );では、expressを変数appに代入することで初期化しています。
3行目のapp.get(‘/’, function (req, res) {では、appに代入されているexpressのgetメソッドを使用して、ルートパス(/)にアクセスされた際(req)、表示する処理を(res)しています。
4行目のres.send(‘Hello World!’);では、Hello World!を表示するために処理する(res.send)事を意味しています。
5行目の});では、3行目の処理を終了することを意味します。
6行目のapp.listen(3000, function ( ) {では、3000ポートにアクセスした場合に今回のアプリケーションが動作する実装をしています。
7行目の);では、6行目の処理を終了することを意味します。
④Expressを実行する
npm run server
npm run serverをコマンドプロンプトで実行することでNode.jsサーバーが起動します。
起動後、Chrome等のブラウザで「http://localhost:3000」とアクセスすることで実行後の表示が可能となります。
参考サイト
https://qiita.com/righteous/items/e5448cb2e7e11ab7d477#packagejson-
コマンド
cd・・・作業ディレクトリを変更することができる
$cd ディレクト名
(構造関係)
ホームディレクトリの下に存在する「sample1」と「sample2」
「sample1」にいる状態から「sample2」へ移動したい時
2つの方法
①「絶対パス」
$cd/home/sample2
$cd ~/sample2
②「相対パス」
$cd ../sample2
..は1つ上のディレクトリ
ちなみに $cd と書くとホームディレクトリに戻る
cat・・・・ファイルを見る
$ cat fileA
fileAの中身を出力することができる。
$ cat fileA > fileB
リダイレクト「>」を用いると別のファイルに上書きできる。
$ cat fileA >> fileB
リダイレクト「>>」を用いると追加ができる。
『オプション』
-n
cat -n ファイル名
行番号をつけて出力する。
-b
blankなし(空白行を入れずに)番号をつけて表示する
-s
連続した空白行を一行の空白行にまとめる
-e
各行の最後に”$”を表示する
連続した文字列の改行位置がわかりにくい場合に、$を入れることで確認することができる。
-t
タブを"^|"に置き換えて表示する
more・・・ファイルの内容をみる
$more 内容を見たいファイル
スペースキー 続きを見る
Enter 一行ずつ進める
p+数字を入力 数字の行だけ進める
s+数字を入力 数字の行だけ飛ばして進める
q 表示を終了する
「/s」オプションを使うと
連続した空行を1行扱いにして余分な空白を除くことができる。
これによって、1画面内により多くのファイル内容が表示で生きるようになる。
$more /s file.txt
途中の行から表示する
「+数字」オプションは数字で指定した行以降の表示になります。
$more +数字 対象ファイル
vi・・・対象ファイルを開く
$vi ファイル名
<コマンドモード>
・ファイルの保存
・カーソル移動
・コピー・ペースト
・検索
・置換
「esc」キー コマンドモードへ
『文字の消去』
「x」カーソル状の文字を消去
「数字x」指定した数字だけ、カーソル上の文字から右側を削除
「X」カーソルの左川の文字を削除
「数字X」指定した数だけカーソルから左側を削除
「dd」1行削除
「数字dd」指定した行数削除
『コピー・ペースト』
「yl」一文字コピー
「数字yl」指定した文字数をコピー
「yw」一単語コピー
「数字yw」指定した単語数をコピー
「yy」1行コピー
「数字yy」指定した行数をコピー
「p」文字・単語のペースト時はカーソルの右側にペースト行のペーストはカーソルの下の行にペースト
「P」文字・単語のペースト時はカーソルの左側にペーストカーソルの上の行にペースト
『カーソル移動』
「h」左へ移動
「l」右へ移動
「k」上へ移動
「j」下へ移動
「gg 」最初の行に移動
「G」最後の行に移動
「数字G」指定した行に移動
『検索』
「/検索したい文字(Enter)」カーソルより下方向に向かって検索
「?検索したい文字(Enter)」カーソルより上方向に向かって検索
「n」下方向に向かって次の該当文字を検索
「N」上方向に向かって次の該当文字を検索
『保存・終了』
上書き保存
「:w(Enter)」内容を上書き保存(viは終了しない)
「:wq!(Enter)」上書き保存して終了
「ZZ」上書き保存して終了
新しいファイルに保存
「:w 新規ファイル名(Enter)」新規ファイルとして保存
「:wq!新規ファイル名(Enter)」新規ファイルとして保存してviを終了
『保存せずに終了』
「:q!(Enter)」ファイルを保存せずに終了させる
『作業の取り消し』
「U」直前の作業を取り消す
<編集モード>
文字を入力するモード
「a」 カーソルの右から文字入力開始
「A」 行の最後から文字入力開始
「i」カーソルの左から文字入力開始
「l」行の頭から文字入力開始
「o」一段下に行を挿入して文字入力開始
「O」一段上に行を挿入して文字入力開始
※起動直後はコマンドモード
rm・・・ファイル、ディレクトリの消去
rm ファイル名
rm -r ディレクトリ名
『特定の名前が含まれているファイルをまとめて消去』
rm *.txt
末尾に「.txt」がついているファイルだけをまとめて削除
『オプション』
「-d」 空のディレクトリが消去できる
「-f」存在しないファイルを消去しようとしたときなどに警告メッセージが表示されますが、-fをつけると警告メッセージを表示しない
注:これを使うときは、確認なくpcのデータが容赦無く消されてしまうのでほんとに要注意!!!!!
「-i」ファイルやディレクトリを消去する前に確認メッセージを表示することができる
「-l」4つ以上のディレクトリを消去する前に確認メッセージを表示することができます
ln・・・ファイルのリンクを作成する
リンクの作成
$ln -s リンク先リンク元
リンクの変更
$ln -f リンク先リンク元
React・React Native typescript
React・・・UIを作るためのJavaScriptライブラリ
<3つのコンセプト>
・Declarative(宣伝的である)
条件と結果が明確にコードに記載されている状態であり、他の人がソースコードを読んでも理解がしやすい仕組み。
その結果、問題点を洗い出しやすくデバックやテストが容易になる。
・Component-Based(コンポーネント指向である)
アプリケーションの構成要素を小さい部品(コンポーネント)の集合として考えて設計されている。
機能の小さい部品に分割して持たせているので再利用も容易にできる。
・Learn Once, Write Anywhere(一度の学習で何度でもかける)
Webアプリケーションだけではなく他の分野にも適応することができる。
例えば、モバイルアプリ開発ではReact NativeというReactの概念を基盤としたクロスプラットフォームが使用できる。
※クロスプラットフォーム(英: cross-platform)とは、異なるプラットフォーム(例えばPC/AT互換機とMacintosh、あるいはWindows・macOS・FreeBSD・Linuxなどのように、仕様が全く異なる機械(ハードウェア)またはオペレーティングシステム)上で、同じ仕様のものを動かすことが出来るプログラム(ソフトウェア)のことを言う。
<特徴>
①レンタリングが高速
ここでのレンタリングとはWebページを描画することを意味する。
Reactでは仮想DOM(Document Of Model)という技術が使われています。これはWebページ内の一部を更新したいときに全てページをまるっと更新するのではなく、更新された一部のみを変更するという効率的な仕組みです。
この仕組みのおかげでレンダリングする箇所は一部に留まり、高速で表示の切り替えが可能です。
②大規模なアプリケーションほど向いている
・管理しやすい設計
・複雑な条件も組み込むことも可能
・コードの複雑性をさけ、見やすい設計
・モジュールの分割による長期の運用も可能
。カスタム性が高い
③JavaScriptベースでもDOMの効率的な作成できる
ReactではJSXというXML風にDOMを出力するために開発した独自構文があります。JavaScriptやReactの標準APIでもDOMを作成することは可能ですが、どうしても冗長になってしまいます。
そこでJSXを使用することでHTMLを書いているかのようにReact内に組み込むことができます。
また、タグの記載ミスなどの構文エラーはコンパイル時にチェックされるため、安全性も保障されます。更にTypeScriptを使えば厳密に型チェックすること可能です。
④JavaScriptが書ければすぐに使える
⑤SPAのアプリケーションに向いている
シングルアプリケーションとは、Single Page Applicationと表記し「SPA」と略されます。
SPAとは、Webページにおいて1ページ内を各オブジェクトで構成することで、ページ全体を何度も読み込むことなく、対象のコンテンツのみを遷移させます。
ページ内で変化させる必要のない部分は据え置く(再読み込みをしない)ことで、表示の速度や全体のパフォーマンスを向上させることができるのです。
一般的なWebページでは、例えばユーザーが「次のページ」というリンクをクリックすると、アクションはサーバーへ要求され、サーバー側で「次のページ」のデータで1ページ分を作り、クライアントがページ全体を表示させます。
しかしSPAでは、ページ内にある一つのコンテンツをクリックすると、そのコンテンツ部分に必要な情報のみをサーバーへ要求し、必要なデータを使って差分のみを表示するのです。
これにより、ユーザーが認識する変化はページの一部であり、一瞬もページ遷移(ページ全体が白くなるなど)を意識することがなくなります。
⑥ドキュメントは英語が多い
React Native
iPhoneとAndroidどちらでも動かすことができる開発用フレームワーク
□React Nativeのメリット
React Nativeの主なメリットは下記の3つです。
- ・開発が効率的になる
-
開発が効率的であるという点はReact Nativeのメリットです。クロスプラットフォームアプリ開発JavaScriptライブラリなので、iOSとAndroidのアプリを1つの言語で同時に開発することができます。
また、React Nativeで開発するときは、モバイル端末によって書き分けるコードは一部分で、コードの大部分を共通化することが可能です。そのため、開発の時間短縮や負担軽減を期待できます。
- ・ホットリロードで修正が簡単にできる
- Hot reload とはコードを変更したときマニュアルでリロードしなくとも、自動でリロードしてくれることを言います。 ただ単にブラウザで開いているページをリロードするのではなく、VueやReactであれば、そのコンポーネントの状態をリロードしてくれるという代物です。
- ソースコードを保存するたびに自動でリロードが行われるので、微修正ごとにコンパイルする必要がありません。この機能により、UIの構築などが容易になります。
- ・Reactを使ったことのある人には学習が簡単
□React Nativeのデメリット
React Nativeのデメリットは、以下の3点です。
- ・アップデートへの対応が大変
- ・エラーの解決に時間がかかる。エラー箇所がわかりにくい
-
エラー修正を行う際、ネイティブレイヤーで起きているエラーなのか、それともJavaScriptレイヤーでエラーが発生しているのか見極めるのに時間がかかります。
また、iOSアプリではエラーが発生していないものの、Androidアプリではエラーが起きるという場合も存在するため、簡単に解決できないケースが起こりえます。
- ・ネイティブエンジニアには学習コストが高い
TypeScript
JavaScriptのいい点を残しつつ、使いにくい点を修正したTypeScriptは、言わばJavaScriptの進化版です。
コンパイルとは、プログラミング言語で記述されたソフトウェアの設計図(ソースコード)を、コンピュータが実行可能な形式(オブジェクトコード)に変換する作業のことです。
プログラミング言語には、動的型付けと静的型付けの2種類があります。先ほどJavaScriptの進化版がTypeScriptだと説明しましたが、JavaScriptは動的型付け、TypeScriptは静的型付けの言語で、この点が両者の最も大きな違いと言っていいでしょう。
動的型付けは、変数や関数のデータ型の宣言がいらず、プログラムが勝手に型を決定します。JavaScriptのほか、RubyやPythonも動的型付け言語です。
動的型付けは、型を宣言する必要がないため記述量が少なく、小さなプログラムや型の変動が激しい環境なら容易に実装できます。その代わり、書いたプログラムを実行時にその都度判断するため、プログラムを実行してみないとエラーが起きるかどうかすらわかりません。
一方、静的型付け言語は、あらかじめデータの型を宣言してから開発を行います。そのため、コンパイル時にエラーがわかる、メモリ領域の最適化ができる、パフォーマンスの向上を狙えるといったメリットがあります。
まとめ
- バグの早期発見
- コーディングの効率アップ
- コードの読みやすさの向上
- 大人数での開発時の効率化
- クラスが作れるようになった!
Git
Git → バージョン管理ツール(いつ、誰が、どのファイルに対してどのような変更を行ったか?という履歴を記録しておくためのツール)
○ Repositories(リポジトリ)・・・ソフトウェア開発において、ソースコードや開発に関わるデータ置き場のこと
Aさんローカル🖥← リモート(Gitサーバー)→Bさんローカル🖥
○ GitHub ・・・ Gitを便利に使うためのツール
<リポジトリの作成>
①Github +ボタン→New repository
②リポジトリの名前を入力
③アクセス権 public・・・全世界にリポジトリの中身が見られる
private・・・限られた人だけ
④creare repositoryボタン
このリポジトリを使って作業を進めていくために、リモートからローカルの端末上にこのリポジトリをコピー
★git status → 現在の状態を確認するコマンド
★git add ファイル名→Gitに管理された状態にする(gitの管理下に入るとファイル名が緑に)
※gitで管理するしないをgit addで選択することができる
○ステージング・・・ファイルがGitの管理下にある状態(git statusで緑色の状態)
★git add . → 全てのファイルをステージング
★git commit→現在の状態をGitにセーブする
(git commit -m"" コミットメッセージ)
★modified:ファイル→ファイルを編集したことをgitが検知
★git log→gitのコミット履歴を確認できる
★git push→リモートにアップロードを行う
(git push origin)
★git pull→存在するリポジトリを最新のものにダウンロード
(git pull origin)
★git clone→新規にリポジトリをローカル側にコピー
○ブランチ・・・gitの変更履歴を枝分かれさせる機能
master(元祖変更履歴)●→●→●→→→→→
●→→↗️合流
ブランチ(枝分かれ)
⇩
なぜ必要か
<ローカル> ベテランAさん → ベテランBさん
↘️ ↙️
リモート
Aさん「この機能を作って!」
リモートにあるシステムは既に本番稼働している大事なシステム・・・
↓
新人Bさんの作ったもしかしたらバグってる修正をそのままリモートにプッシュされてしまったら本番が崩れてしまうかも・・・
↓ そういう時に
master側の歴史とは別の歴史とは別の歴史を枝分かれさせてブランチで開発する。
※ブランチ・・・masterにマージするまでmaster側には影響を与えない。
★git checkout→ブランチを切り替えるコマンド
<git checkout -b develop master>
★git branch→ブランチの一覧を見るコマンド
緑色が現在のブランチ
★git checkout master→master側に戻る
★git merge→ブランチを合流させること
【マージ作業】
①マージ先のブランチに移動
②git merge develop
○プルリクエスト・・・git hub
開発をおこなったBさんからAさんに対してこの
ブランチをmasterにマージして下さいという依頼
【AさんBさんが同じブランチで作業する場合】
□よくあるエラー
reject fetch first(先にフェッチしてね)
※リモートの状態をローカルにダウンロードすること
先にAさんがpush →リモートサーバーとしてはAさんの作った歴史が
由緒正しく正当な歴史と認識
⬇️
そこに対して、Bさんの作った別の歴史をプッシュ
しようとしたので、リモートサーバーとしては正統な
歴史と違うので却下!
☟どうすればいいか
リモートから最新の情報を取ってきて自分の手元にマージ
を行う
☆-a →リモート側も含めた全てのブランチを表示する
VIエディタで保存する場合は → :wp
◆ fetch と pull の違い
git fetch origin(リモートから最新の情報をダウンロード)
git merge origin / develop
origin / develop を手元のdevelopにマージ
⬇️ 一発で同じことができる
git pull develop
⬇️ また別のやり方
rebase
git fetch origin
git rebase origin / develop develop
git push origin -f
☆-f →リモートを無視(ローカルを正)として強引にプッシ
◆mergeとrebase の違い
<mergeコミットツリー>
Aさん ●→●→●→→→●→→→→→→
Bさん ↘️→→→→→○→→→○↗️
入り乱れて最終的に合流する
<rebaseコミットツリー>
Aさん● Bさん○
●→●→●→→→●→→→○→→→○→→→
Aさんの後にBさんが作業始めましたよというように歴史を改ざんできる
一直線のコミットツリー
○コンフリクト・・・複数人が同じブランチの同じファイルの同じ行に
対して変更を行うと発生する問題
<<<<<<HEAD
nfsjflksfsjgs編集
===========
fileの編集
>>>>>>>17hjsnvlkxkvnjshiouu34892u52jkn
Aさんの変更です
↓エラーの解消
①ギザギザを消す
②自分の編集も消す
③Aさんの変更に対して、自分の行った編集を加える
④git status
↓
fix conflicts and run git commit(コンフリクトを解消するためにgitコミットしてね)
⑤git commit -m""
★git reset
<git reset --hard HEAD(今の編集を全て消して最終コミットの時点まで戻る)>
★git stash
<git stash→一時保管>
<git stash pop →戻す>