Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
javascriptにおけるpublicとprivateについて
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
soplana
August 18, 2012
Technology
3k
8
Share
javascriptにおけるpublicとprivateについて
調べていたら纏めておきたくなったので。
基本的な事がおおいですが。
soplana
August 18, 2012
Other Decks in Technology
See All in Technology
小さいVue.jsを30分で作る
hal_spidernight
0
150
ワールドカフェ再び、そしてゴール・ルール・ロール・ツール / World Café Revisited, and the Goals-Rules-Roles-Tools
ks91
PRO
0
160
Claude Code / Codex / Kiro に AWS 権限を 渡すとき、何を設計すべきか
k_adachi_01
5
1.4k
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
200
データモデリング通り #5オンライン勉強会: AIに『ビジネスの文脈』を教え込むデータモデリング
datayokocho
0
270
2026年春のAgentCoreアプデ 細かいやつ全部まとめ
minorun365
4
230
ブラウザの投機的読み込みと投機ルールAPIを理解し、Webサービスのパフォーマンスを最適化する
shuta13
3
310
Oracle AI Database@AWS:サービス概要のご紹介
oracle4engineer
PRO
4
2.5k
AI 時代の Platform Engineering
recruitengineers
PRO
1
180
AI時代に越境し、 組織を変えるQAスキルの正体 / QA Skills for Transforming an Organization
mii3king
5
4.4k
SREの仕事は「壊さないこと」ではなくなった 〜自律化していくシステムに、責任と判断を与えるという価値〜 / 20260515 Naoki Shimada
shift_evolve
PRO
1
150
OWASP APTSを眺めてみた
su3158
0
130
Featured
See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
140
KATA
mclloyd
PRO
35
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.4k
Mobile First: as difficult as doing things right
swwweet
225
10k
Design in an AI World
tapps
1
210
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.8k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
10k
How to build a perfect <img>
jonoalderson
1
5.5k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.4k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
160
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
190
Navigating Team Friction
lara
192
16k
Transcript
Javascriptにおける publicとprivate Twitter : @soplana
1. Javascriptのスコープ 2. thisとは 3. functionの実行 4. functionの引数について 5. クラス宣言とインスタンス
6. publicとprivateを実装する 7. pia.jsを使う【ステマ】
まずは軽くJavascriptのおさらいから。 おさらいする点は以下の5点。 ・スコープ ・this ・メソッド呼び出し ・arguments ・クラス宣言とインスタンス
1. Javascriptのスコープ ・ブロックレベルのスコープは存在しない
1. Javascriptのスコープ ・あるのはfunction毎のスコープのみ
2. thisとは ・基本的には常にグローバルオブジェクトを指す
2. thisとは ・レシーバがあるfunction呼び出しの場合は、レシーバを指す
3. functionの実行 ・極普通に実行 user.getName(); ・function名を文字列で指定して実行 user["getName"](); ・call or applyで実行 user.getName.call();
user.getName.apply(); ・()を使い実行(即時関数パターン) ( user.getName )(); ( function(){return "name"} )(); //即時関数
3. functionの実行 callとapplyについて ・functionを実行させるメソッド ・第一引数にfunction内でのthisが指すオブジェクトを指定することが可能
3. functionの実行 callとapplyについて ・callは、第二引数以降にfunctionに渡すべき引数をカンマ区切りで渡す ・applyは、第二引数にfunctionに渡すべき引数を配列で渡す
・functionの引数チェックはしない 4. functionの引数について
4. functionの引数について argumentsについて ・functionに渡された引数は全てargumentsオブジェクトに格納されている ・Arrayの様に振舞うが、Arrayではない
5. クラス宣言とインスタンス ・他のオブジェクト指向言語のようなクラス宣言のシンタックスは無い ・でも立派なクラスは作れるよ 基本的なクラス宣言の構文 ・User変数に渡しているfunctionがコンストラクタになる ・コンストラクタが与えられたUser変数はnewによりインスタンスを生成出来る
5. クラス宣言とインスタンス その① - インスタンスメソッドの追加 ・インスタンスに追加 問題点 ・インスタンス毎にfunctionを持つので大量にインスタンスを生成するような 処理だとメモリを余計に使ってしまう
5. クラス宣言とインスタンス その② - インスタンスメソッドの追加 ・User.prototypeに追加 ・インスタンス毎にfunctionを持つ問題はprototypeベースでクラスを作成する事 で避ける ・基本的にはprototypeベースで作成していきましょう!
prototypeの特徴についてもう少し ・prototypeが参照されるのは読み取り時のみ ・書き込みはインスタンス毎に新しいpropertyが追加される ・インスタンスからは__proto__でprototypeへの参照が取れる
いよいよ本題のpublic / privateについて話そうか…。
6. publicとprivateを実装する その① - 全部コンストラクタのスコープに実装 ・コンストラクタ内のthisがインスタンスを指すので、全てのメソッドを コンストラクタ内に記述する
解説 ・コンストラクタfunctionのローカルスコープにprivatreメソッドを定義。 ・コンストラクタ内でのthisはインスタンスを指すので、そのthisにメソッドと propertyを宣言する事でpublicメソッドを定義。 ・privateであるupperCaseを呼び出す時はレシーバが存在しない為、 upperCase内でのthisがグローバルオブジェクトを指してしまう。 ・その為、upperCaseを呼び出す際は、callを使い第一引数にUserインスタンス を渡す事でupperCase内のthisもUserインスタンスを指すようにする。 ・prototypeを使ってないのでメモリ食う
その② - privilegedを使う ・privateにもpublicにもアクセス出来る、privilegedを定義する
解説 ・コンストラクタfunctionのローカルスコープにprivatreメソッドを定義。 ・privateメソッドにアクセスするためのprivilegedメソッドを定義。 (今まではコレをpublicだと言っていたけど…。) ・prototypeにpublicメソッドを定義。publicからはprivilegedを介してprivateに アクセスする。 ・しかし、privilegedはインスタンス毎に持つfunctionなので結局メモリは食う。 ・そもそもprivateにアクセスできないpublicの存在意義が怪しい。 ・パッと見で外部に向けて公開されているインターフェイスが分かりやすいと 言う意味では良いかもしれない。
その③ - 即時関数のスコープを使う ・即時関数のローカルスコープにprivateを実装する
解説 ・即時関数のローカルスコープにprivateを実装。 ・publicはprototypeに実装する。publicもprivateも即時関数のスコープ内で定義 するので、publicからprivateも直接参照できる。 ・若干無理矢理感が漂うものの一番マシ(個人的には)。
その④ - publicとprivateを別のオブジェクトで定義
解説 ・public用のclass、private用のclassを用意する ・public用のclassのコンストラクタで、インスタンス変数にprivate用のclassを newして突っ込んでおく ・private用のclassのコンストラタにpublic用のclassのインスタンスを渡して インスタンス変数に突っ込んでおく ・publicメソッドからprivateを参照する場合は、this.private経由で参照する ・privateメソッドからpublicを参照する場合は、this.public経由で参照する ・this.privateをイチイチつけて呼び出すの が面倒すぎる
・publicとprivateを分ける為だけにしては なんだか大げさすぎる感がある
まとめると ・public / privateを実装しようとすると、可読性が下がったり メモリの無駄食いが発生したり、メソッド呼び出しが長ったらしくなったり thisが指すオブジェクトを毎回指定してあげないといけなかったり いまいちどれがベストプラクティスなのか分からない
7. pia.jsを使う【ステマ】 なにそれ ・Javascriptにおけるclass宣言をサポートするライブラリ ・public / privateも簡単に宣言できる ・classメソッド、instanceメソッドの定義もらくちん ・継承もサポート pia.js
- Github Link
pia.js使うとclass宣言がこんな感じ
解説 ・initializeとか.new()でインスタンス生成とかRubyっぽく書ける ・publicというプロパティにネストした形でpublicメソッドを定義していく ・privateというプロパティにネストした形でprivateメソッドを定義していく ・thisが指すのは常にUserクラスのインスタンス
おしまい!!!!