2017年9月9日土曜日

MacのSublime text3で書いたJavaScriptが文字化けた話(UTF-8なのに。。)

表題そのままです。
最近、お仕事でデジタルマーケティング界隈のアレをホニャララするようになってきまして、齢40手前にしてJavaScriptを勉強なうです。

まずは、開発環境だと思い、MacにSublime text3をインストールし、参考書のJavaScriptを写経していました。
そのコードを試しにブラウザで開いてみると・・・全く同じコードなのに文字化ける?UTF-8で保存しているのに。。



唸りながら色々と調べていたら「UTF-8 with BOM」で保存する必要性に気づいたわけです。
以下、参考にしたURLを順に記載してきます。

※注意:
MacのSublime text3だと、最初、「Sublime text3」→「Preference」→「基本設定-標準」で開いても設定ファイルが編集できないようです。
一旦、開いた設定ファイルをcmd+Sで保存してから開き直すと「false→true」のパラメータ変更などが可能になりました。


SublimeTextの設定まとめ
http://blog.seeds-std.co.jp/entry/1871.html

Sublime Text 3 のステータスバーに文字コードを表示する方法 (ついでに改行コードも)
https://beadored.com/sublime-text-3-character_code/

UTF-8のBOMにはまった話
http://qiita.com/MuriNishimori/items/a89fe986e28909208e30

上記をリファーしてSublime text3の設定を変更しましたら、「ファイル」→「エンコードを指定して上書き保存」→「UTF-8 with BOM」で保存してください。

(JavaScript)基礎用語をコソっと書き留めた。

備忘録代わりにJavaScriptの基礎をキソっと・・・コソっと書いておきます。
今後、適宜、追記しようかと思います。

■基本用語

項目内容
CSSWebページのデザインやレイアウトを決める為に使われるファイルで、別名「スタイルシート」という。
セレクタHTML文書中の要素。
プロパティセレクタに記載された色やフォントなどの属性。
JavaScriptにおける処理の単位。文末には「;」(セミコロン)をつける。

・スタイルシートの記述例
body{
    background-color: #FFFFFF;
}
セレクタ プロパティ 


■オブジェクトについて

項目内容
オブジェクトプロパティとメソッドをまとめたもの。オブジェクト内には「プロパティ」と「メソッド」の「メンバ」がある。
プロパティオブジェクトによってまとめられたデータ。
メソッドオブジェクトによってまとめられた機能。

オブジェクトの記述の仕方
・プロパティの場合
 オブジェクト.プロパティ
・メソッドの場合
 オブジェクト.メソッド

とりあえず、まずは、これぐらいで。

2017年9月2日土曜日

Mac環境でのSublime Text3を用いたJava Script環境づくり

齢40手前にして、お仕事でJava Scriptを使う必要性が出てきました。
まずは、開発環境を整えたいので、下記サイトを参照しながら整備しましたです。

実施環境については、以下の通りです。


・MacBook Air:CPU:1.6GHz,Memory 8GB
・macOS Sierra ver10.12.3
・Sublime Text3 Build 3126


参照サイトと実施内容


Sublime Text - パッケージのインストール
https://webkaru.net/dev/sublime-text-package-install/
→Mac環境におけるSublime Text3のインストール方法が記載されています。

<Sublime Text3でのパッケージインストール>
 ・Command + Shift + P
     ↓
 ・Package Controlのフォームに「install」と入力
     ↓
 ・インストールしたいパッケージ名の一部を入力
     ↓
 ・returnキーを押す
     ↓
 ・ウインドウ下部のメニューバーにインストール完了のメッセージが表示される


Sublime Text3 のインストール直後に行った設定メモ
http://tomoyamkung.net/2014/03/06/sublimetext3-install/
→表題の通りです。「IMESupport 」「Vintageous」以外を入力し、フォントサイズを変更しました。

とりあえず、動きましたっ!