アプリを提出する(iOS 、Android)

 

Androidアプリをリリースするまでの流れ

GoogleplayにAndroidアプリをリリースする場合は、手元のソースコード.apkまたは.aabという拡張子のアプリファイルにまとめてから、アップデートする。

 

●流れ

1 Googleplayに開発者として登録する(初回のみ25ドルかかる)

2 PlayConsole(管理画面)でストア向けの掲載情報を作成・入力する

3 アプリファイルをアップロードする

 

公式ドキュメント

Play Console の使用方法 - Play Console ヘルプ

 

iOSアプリをリリースするまでの流れ

App StoreiOSをリリースする場合は、手元のソースコード.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.jsonExpo.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は文字列ですが、使っていいのは数値もしくはドット(.)だけなので、事実上AndroidiOSも数値を記載することになり、この数値は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を取り込んだもの

Svg react-native-svgを取り込んだもの

・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アプリケーション)

Android

iOS

これらは同じやり方では作れない。

WebアプリケーションとAndroidアプリとiOSアプリの作り方は、考え方として近い部分は随所あるものの、基本的には大きく違うものです。

主な違い

・言語

・非自動的処理を実現するAPIの使い方

・日時を計算するAPIの使い方

・UIを組み立てる方法

・UIを更新する方法

・リリースする方法

・etc...

 

プラットフォームごとに適した標準的なお作法や、仕組み上の課題・問題、それに対するベストプラクティスがあります。

    ↓問題

提供するプラットフォームごとに人材が必要になる。

人が必要→お金がかかる時間もかかる

「できるだけ3プラットフォーム同時にリリースして」といった要件が加わるとさらに難易度があがる

1人で3プラットフォームをまかなえるスーパーマンを連れてきても解決できない。(KotlinでAndroidアプリを書きながら、同時にSwiftでiOSアプリを作ることはできない)

     ↓

「多少自由度を失ってもいいから、一度の実装で複数のプラットフォームにアプリを提供したい」というニーズが生まれる

     ↓

AndroidアプリとiOSアプリ(以降、モバイルアプリとまとめます)の同時開発の分野で、多くの試みがなされた

     ↓

3つのアプローチ

・ハイブリット型:WebViewの上でWebアプリケーションを動かす

・独自レンダラ型:独自の描画エンジンでUIを描画する

・ネイティブUI型:AndroidiOSのシステムを別の言語やフレームワークから操作する

 

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-


www.google.com

コマンド

 

cd・・・作業ディレクトリを変更することができる

$cd ディレクト

「~」(チルダ)・・・ホームディレクト

 

(構造関係)

ホームディレクトリの下に存在する「sample1」と「sample2」

「sample1」にいる状態から「sample2」へ移動したい時

2つの方法

①「絶対パス

$cd/home/sample2

$cd ~/sample2 

②「相対パス

$cd ../sample2

..は1つ上のディレクト

 

ちなみに $cd と書くとホームディレクトリに戻る

 

pwd・・・現在どの作業ディレクトリにいるのか教えてくれる

 
cp・・・指定したディレクトリをコピーすることができる
$cp コピー元のファイル名 コピー先のファイル名
※コピー先に同じファイル名のファイルが存在している場合、確認なしに上書きしてしまします。
 
mv ・・・①ディレクトリ名の変更
            ②ディレクトリの移動
 
「変更」$mv 変更前のディレクトリ名 変更後ディレクトリ名
※既に同じ名前が存在していた場合上書きされてしまう
防ぐために -i オプションを使うと、上書きしていいですか?と確認される。
※複数のディレクトリ名変更不可(一括変更したい場合はrenameコマンドを使う)
 
「移動」$mv ディレクトリ名 移動先のディレクトリ名
※移動先のディレクトリに『./(ディレクトリ直下の)』をつけた方が安全。名前の変更が適用されない為
※複数のファイル移動可能 

 

 

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、あるいはWindowsmacOSFreeBSDLinuxなどのように、仕様が全く異なる機械(ハードウェア)またはオペレーティングシステム)上で、同じ仕様のものを動かすことが出来るプログラムソフトウェア)のことを言う。

 

<特徴>

①レンタリングが高速

ここでのレンタリングとは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

iPhoneAndroidどちらでも動かすことができる開発用フレームワーク

 

□React Nativeのメリット

React Nativeの主なメリットは下記の3つです。

  • ・開発が効率的になる
  • 開発が効率的であるという点はReact Nativeのメリットです。クロスプラットフォームアプリ開発JavaScriptライブラリなので、iOSAndroidのアプリを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のほか、RubyPythonも動的型付け言語です

 

静的型付けで代表的な言語はC#C++などがあります。

 

動的型付けは、型を宣言する必要がないため記述量が少なく、小さなプログラムや型の変動が激しい環境なら容易に実装できます。その代わり、書いたプログラムを実行時にその都度判断するため、プログラムを実行してみないとエラーが起きるかどうかすらわかりません。

一方、静的型付け言語は、あらかじめデータの型を宣言してから開発を行います。そのため、コンパイル時にエラーがわかる、メモリ領域の最適化ができる、パフォーマンスの向上を狙えるといったメリットがあります。

まとめ

  • バグの早期発見
  • コーディングの効率アップ
  • コードの読みやすさの向上
  • 大人数での開発時の効率化
  • クラスが作れるようになった!

 

 

Git

Git → バージョン管理ツール(いつ、誰が、どのファイルに対してどのような変更を行ったか?という履歴を記録しておくためのツール)

 

○ Repositories(リポジトリ・・・ソフトウェア開発において、ソースコードや開発に関わるデータ置き場のこと

 

  Aさんローカル🖥← リモート(Gitサーバー)→Bさんローカル🖥

 

○ GitHub ・・・ Gitを便利に使うためのツール

 

リポジトリの作成

Githubを使って、リモート上にリポジトリを作る

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 →戻す>