【JavaScript】即時関数ってなんだ

JavaScriptってJavaやC系言語の経験があればなんとかなると思ってごまかしごまかしやってきていたけれど、即時関数なるものに遭遇し無事死亡。
しばらくググってなんとなくは理解できたのでメモ。

即時関数

(function() {
// 処理
}());

↑こんなやつ

いろんな使い方はあるみたいだけど、同名の変数がある場合に競合しないようにスコープを制御する使い方が一般的らしい。

例えば

function hoge(){
  console.log("関数１を実行しました");
}
function hoge(){
  console.log("関数２を実行しました"); //こっちが実行される
}
hoge();

このように関数名が重複している場合は後の関数だけが実行される。

そこで即時関数を使用すれば同名関数があった場合も全て実行させることができる。

//即時関数１
(function() {
  function hoge() {
    console.log('関数１を実行しました');
  }
  hoge();
}());
//即時関数２
(function() {
  function hoge() {
    console.log('関数２を実行しました');
  }
  hoge();
}());

なら変数名変えればいいじゃんって話だけど、他の人が作ったJavaScriptファイルを同じHTMLで読み込んだ場合に変数名が被ることとかあるかもしれないしね。

引数を持たせる場合

(function (param1, param2) {
    // 処理
}('hoge', 'fuga'));

返り値を持たせる場合

var result = (function (param1, param2) {
    return param1 + param2;
}(1, 2));

即時関数に名前を付ける場合

(function hoge(count) {
console.log('hogeを実行しました ')
setTimeout(function () {
hoge(count);
}, 1000);
}())

参考サイト様
JavaScriptで即時関数を使う理由

JavaScriptの即時関数とは何か。意味やメリット、引数の使い方についてまとめてみた。 | ゴトーのブログ

【React】Reactを触ってみる（コンパイル＆サーバ起動まで）

前回

hitoto28.hatenablog.com

create-react-appコマンドが使えるようになったので実際に簡単なアプリを作成する。

まずはターミナルで以下のコマンドを実行し、Reactのプロジェクトを生成する。
事前に適当なディレクトリに移動しておくこと。

$ create-react-app helloworld

※「helloworld」の部分はプロジェクト名。
React.jsアプリに必要なパッケージ等のインストールが開始される。
ファイル構成は以下の通り。

.
├── README.md
├── node_modules/
├── package-lock.json
├── package.json
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

そしてコンパイル＆httpサーバー起動

$ npm start

成功すると以下のように表示されるので、ブラウザでURL（
http://localhost:3000/
）にアクセスする。

あとはApp.jsやApp.cssを好きなように編集すればよし。
めちゃくちゃ便利。

ビルドする際は以下のコマンド

$ npm run build

build/ 以下にproductionファイルが生成されるとのこと（未確認）
とりあえずもう少し色々触ってみる。
今回はここまで

参考サイト様
create-react-app で React フロントエンドの掲示板を作ってみる（リスト表示） - JavaScriptだけでWebサイト開発

【React】Reactを触ってみる（Mac環境構築まで）

いろんなやり方があるらしい。
create-react-appを使うのが一番楽とのこと。
とりあえずやってみる。

事前知識

create-react-appってなに？

・Facebookが提供しているCLIツール
・Reactの開発環境を簡単に構築できる
・これがないとwebpackの設定とかめんどくさい

node.jsってなに？

・サーバーサイドのJavaScript
・非同期 (I/Oの処理結果を待たず処理を進める)
・イベントドリブン
・シングルスレッド
・フレームワークにExpress、Backbone.js、Sails、Meteor等
・コールバック関数(非同期の処理が終わったら呼ばれる関数)
・npm (node package manager)

nodebrewってなに？

nodebrewとは、nodeのバージョンを管理・切替するツールのこと

homebrowってなに？

homebrowとは、macOS用のパッケージマネージャーのこと

インストール

まずはnode.jsがインストールされているか確認する。
ターミナルより以下のコマンドを実行

$ node -v

バージョン情報が表示される場合は既にインストールされているので最後のcreate-react-appのインストールへ進む。
node.jsがインストールされていない場合、以下のコマンドでhomebrowをインストールする。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

以下のコマンドでhomebrewのバージョン確認ができればインストール成功。

$ brew -v

続いて以下のコマンドでnodebrewをインストール。

$ brew install nodebrew

以下のコマンドでバージョン確認できればインストール成功。

$ nodebrew -v

いよいよnode.jsのインストール。
以下のコマンドで最新版をインストールする。

$ nodebrew install-binary latest

この際、エラーメッセージ「No such file or directory」が表示された場合は以下のコマンドでディレクトリを作成する。

$ mkdir -p ~/.nodebrew/src

インストールされたnode.jsのバージョン確認。

$ nodebrew list

以下のコマンドでnodeコマンドの実行パスを通す。
注:xxxxxはUserのHomeDir名

$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bash_profile

一度ターミナルを再起動し、以下のコマンドでnode.jsのバージョンを確認。
以下のコマンドで設定を反映させる。

$ source ~/.bash_profile

node.jsのバージョンを確認。

$ node -v

バージョン情報が表示される場合は正常。
「-bash: node: command not found」のようなメッセージが出る場合は失敗している。対処法は割愛。

以下コマンドでnpmコマンドが使えることを確認する。

$ npm -v 

バージョン情報が表示されればOK。

最後はcreate-react-appコマンドのインストール。
グローバルで使うので-gフラグを付ける。

$ npm install -g create-react-app

HelloWorldプログラムは次回の記事で書く予定。

以下、参考にしたサイト様
ありがとうございました。

Node.js を5分で大雑把に理解する
Macにnode.jsをインストールする手順。
【React入門（1）】開発環境をMacに構築してみる
node.js の環境管理ツール nodebrew - Block Rockin’ Codes

【Swift】UserDefaultsでデータを保存する

iOSでデータを永続的に保存する方法は数多あれど、最もお手軽かつ高速な方法と言えばUserDefaults。
大量のデータや機密データを扱う場合は大人しくDB等を使うべし。

UserDefaultsの特徴

• key=valueでデータを保存することができる
• 学習コストが低い
• 少量のデータ保存に向いている
• 機密性が高いデータの保存には向いていない
• 保存したデータはアプリ内部にplist形式（XML）で保存される

UserDefaultsで保存できる型と使用するメソッド

対象の型	保存時の処理	参照時の処理
配列型 [Any]	set:forKey:	array:forKey:
真偽型 Bool	set:forKey:	bool:forKey:
データ型 Data	set:forKey:	data:forKey:
辞書型 [String: Any]	set:forKey:	dictionary:forKey:
浮動小数点数型 Float	set:forKey:	float:forKey:
整数型 Int	set:forKey:	integer:forKey:
オブジェクト型 Any	set:forKey:	object:forKey:
文字列型配列 [String]	set:forKey:	stringArray:forKey:
文字列型 String	set:forKey:	string:forKey:
倍精度浮動小数点数型 Double	set:forKey:	double:forKey:
URL型 URL	set:forKey:	url:forKey:

サンプルコード①　文字列の読み書き

UserDefaultsへ文字列を保存する

// UserDefaultsの参照
let userDefaults = UserDefaults.standard

// sampleというキーで値「aiueo」を保存する
userDefaults.set("aiueo", forKey: "sample")

// UserDefaultsへの値の保存を明示的に行う
userDefaults.synchronize()

UserDefaultsから文字列を取り出す

// UserDefaultsの参照
let userDefaults = UserDefaults.standard

// sampleというキーを指定して保存していたString型の値を取り出す
if let value = userDefaults.string(forKey: "sample") {
    print(value)
}

サンプルコード②　UserDefaultsのデータを削除
UserDefaultsから文字列を削除する

// UserDefaultsの参照
let userDefaults = UserDefaults.standard

// sampleというキーを指定して保存していた値を削除する
userDefaults.removeObject(forKey: "sample")
userDefaults.synchronize()

UserDefaultsのデータを一括削除する

// UserDefaultsの参照
let userDefaults = UserDefaults.standard

// 一括削除
if let domain = Bundle.main.bundleIdentifier {
            userDefaults.removePersistentDomain(forName: domain)
        }
userDefaults.synchronize()

サンプルコード③　独自クラスの保存と呼び出し

独自クラスの宣言

// 独自クラスをシリアライズする際には、NSObjectを継承し
// NSCodingプロトコルに準拠する必要がある
class SampleData: NSObject,NSCoding {
    
    var data1: String?
    var data2: Bool = false
    
    override init() {
    }
    
    // デシリアライズ処理（デコード処理とも呼ばれる）
    required init?(coder aDecoder: NSCoder) {
        data1 = aDecoder.decodeObject(forKey: "data1") as? String
        data2 = aDecoder.decodeBool(forKey: "data2")
    }
    
    // シリアライズ処理（エンコード処理とも呼ばれる）
    func encode(with aCoder: NSCoder) {
        aCoder.encode(data1, forKey: "data1")
        aCoder.encode(data2, forKey: "data2")
    }
}

UserDefaultsへの保存と呼び出し処理

// 独自クラスのインスタンスに値を格納
let sampleData = SampleData()
sampleData.data1 = "hello"
sampleData.data2 = true

// UserDefaultsの参照
let userDefaults = UserDefaults.standard
        
// シリアライズ処理
let archiveData = NSKeyedArchiver.archivedData(withRootObject: sampleData)
userDefaults.set(archiveData, forKey: "sample")
userDefaults.synchronize()

// デシリアライズ処理
if let storedData = userDefaults.object(forKey: "sample") as? Data {
    if let unarchivedData = NSKeyedUnarchiver.unarchiveObject(with: storedData) as? SampleData {
	if let data1 = unarchivedData.data1 {
	    print(data1)
	}
	print(unarchivedData.data2)
    }
}

XcodeがiPhoneを認識しない件 - [iphone is not connected]

いつもXcodeで書いたコードをWi-Fi経由でiPhone実機に接続してコンパイルしていたのだけれど、ある日突然「iphone is not connected」が発生した。

ググってみると人によって様々なケースがあるようで、一つずつ試してみたものの自分の場合はどの解決方法にも該当しなかった。

最終的にiPhoneを再起動してiMacとUSB接続すれば解消できた。

ただしWi-Fi経由では実行できないまま。どうすればいいんだ。

環境　　　 

iMac 27-inch 2017

macOS High Sierra 10.13.5

Xcode9.4.1

iPhone SE

iOS 11.4

解決したら。追記します。

解決したので追記（2019/04/10）

①iOSとXcodeを最新Verに更新（iOS→12.2、Xcode→10.2）

②PCとiPhoneを接続（有線）

③Xcodeのwindow → Devices and Simulators

④自分のiPhoneが表示されるので Connect via network にチェックを入れる

上記手順の後はケーブルを抜いても実機テストができるようになった。

要はXcodeのVerが古かっただけでした。

記事を書く習慣を身につける

ブログを初めては辞めて初めては辞めてを繰り返し、永遠に続かないのにまた懲りもせず再開してみる。

三日坊主になる原因として、他のブログのようにちゃんとしたものを書こうとするからいけない。

あくまで自分の日々のログとして、また備忘録として機能させる事が目的なので構成や読みやすさなんてどうでもいいのではなかろうか。

人は２週間毎日何かをやり続ければそれが習慣となり苦ではなくなるとどこかで読んだ気がするのでとりあえず毎日なんか書こう。

CocoaPodsの使い方

CocoaPodsとは

iOS向けのアプリ開発時にライブラリの管理を手助けしてくれるツール。
　

CocoaPodsのインストール

　1. Macのターミナルを起動

　　Finder > アプリケーション > ユーティリティ > ターミナル.app

　2. ruby gemを最新にする

$ sudo gem update --system

　3. インストール

$ sudo gem install -n /usr/local/bin cocoapods

　4. セットアップ

$ pod setup

CocoaPodsでライブラリをインストール

　1. インストールしたいプロジェクトに移動

$ cd ~/testProject

　2. Podfileを生成

$ pod init

　実行するとPodfileが自動的に生成される。
　開くと以下の状態。

　target 'プロジェクト名' do 〜 end の間に
　インストールしたいライブラリを指定。

　↑RealmSwiftとSVProgressHUDのバージョン1.1.3
を指定。
　
　3. インストールを実行

$ pod install

　この際、xcodeでプロジェクトファイルを開いているとエラーメッセージが表示さるのでxcodeを閉じてから実行する。

　追加で他のライブラリをインストールする時はPodfileに追記後
　以下のコマンドを実行。

$ pod install

ワークスペースを開く

インストールに成功するとプロジェクトファイルの下にxcworkspaceファイルが生成される。
ライブラリを使用する場合は通常のプロジェクトファイルではなくxcworkspaceを開いて作業する。

参考記事様
iOSライブラリ管理ツール「CocoaPods」の使用方法 - Qiita