Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSことはじめ
Search
YO
November 30, 2018
Programming
0
35
JSことはじめ
YO
November 30, 2018
Tweet
Share
More Decks by YO
See All by YO
Gitおしえるやつ
uyo
0
46
How to become to friends with Vim
uyo
0
51
Other Decks in Programming
See All in Programming
Go コードベースの構成と AI コンテキスト定義
andpad
0
140
Pythonではじめるオープンデータ分析〜書籍の紹介と書籍で紹介しきれなかった事例の紹介〜
welliving
3
600
Graviton と Nitro と私
maroon1st
0
140
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
440
AIエージェントの設計で注意するべきポイント6選
har1101
5
2.4k
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
tomokon
0
140
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
selcukusta
0
130
脳の「省エネモード」をデバッグする ~System 1(直感)と System 2(論理)の切り替え~
panda728
PRO
0
120
モデル駆動設計をやってみようワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
haru860
0
280
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
120
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
190
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
elyza
2
630
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
120
Producing Creativity
orderedlist
PRO
348
40k
Evolving SEO for Evolving Search Engines
ryanjones
0
73
Building the Perfect Custom Keyboard
takai
1
660
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
57
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
850
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
2
66
Scaling GitHub
holman
464
140k
Prompt Engineering for Job Search
mfonobong
0
130
Transcript
JavaScript ざっくり 18/11/30
Contents 1. JSの歴史 2. Alt JS ~ JSの派生 ~ 3.
フレームワーク 4. その他
1.JSの歴史
ECMAScript ってなんなのよさ?
標準化されたJS = EcmaScript
EcmaScript • Mozillaが仕様を策定し実装しているスクリプト言語 • Ecma Internationalによって標準化されている • European Computer Manufactures
Association • 仕様書ここ • 毎年更新されている Mozillaの公式サイトにJSについてのってるから 詳しく知りたいときはそこで
ES6が主流っぽい
ES6について 教えてよ!!
ES6とは? • ECMASCriptの6th Editionのこと • ES2015ともいう • なぜES6で書くのか ◦ 便利な機能、構文が追加され、従来より
簡潔かつ明瞭な構文で記述できる ◦ 主要な機能、構文を覚える程度なら学習コストはそこまで高くないから。 • とりあえずES6はマストで抑えよう!?
2.AltJS ~ JSの派生 ~ ♻
Java Scriptの苦手って何? • 動的型付けがいやだ • 暗黙の型変換がいやだ • 人によって記述の幅が広すぎてよみづらい
Alt JS あるやん
Alt JS JavaScriptの代替言語 JSの痒い所に手が届く JSへとコンパイルされる言語
TypeScript • マイクロソフトによって開発されメンテナンスされているプログ ラミング言語 • JSに対して省略も可能な静的型付けとクラスベースオブジェ クト指向を加えた • 大規模なアプリケーション開発のために設計されている
TypeScriptのソースコードをコンパイルするとJSのコードになる
CoffeeScript • コードはJSのコードに変換される • JSに比べ簡潔さと可読性の向上 • Rubyコミュニティでよくつかわれる • Rubyライクに記述できる •
Railsで使われる
他のやつ • PureScript • Dart etc……...
3.フレームワーク
今ナウいフロントエンドフレームワーク • React • Vue.js 以下はスルー • Angular • Preact
• Ember • Polymer
None
React • JSで書かれたライブラリ • Viewを担当 • 今の段階だとVueかReactかどちらかという感じ • プロパティや状態に応じて画面を描画する •
この記事読めばいいんじゃない?
None
Vue.js • 中国でかなりさかん • 初心者でも楽しく使えるらしい • 日本語書籍もいっぱい • 図がいっぱいあってわかりやすい •
とりあえずはじめてみれば? • 公式
4.その他
Node.js • npm: Node.js製ツールのバージョン管理ソフト • スケーラブルなネットワークアプリケーションを構築するために設計された非同期型 のイベント駆動の JavaScript 環境 •
サーバサイドで動くJavaScript • PHPやJavaと同じような使い方ができるってこと • クライアントもサーバサイドも同じ言語で書けばええやんって作られたらしい • Expressってフレームワークがある あとは触ってみろ
トランスパイラ • Babelとかが有名 • ブラウザが対応していない記述もなんかいい感じにしてくれる • イケてる書き方してもどっかのブラウザでは使用できないってなったら困るからその ためのもの
テストツール • jestとかmochaとか • その名の通りテストツール
データレイヤー • ReduxとかGraphQlとか • 正直いまいちわからんからググったほうがいい
ビルドツール • webpackとかgulpとかgruntとか • 開発時のコードと実際に使用されるコードが異なるそれらを変換して効果的にデプ ロイしてブラウザが理解できる形にするのがビルドツール • 依存関係とかそういうのまとめる • ファイルの圧縮とか
• なんかいろいろできる • 色々しらべてみてね
これで君もスタート地点だね (⋈◍>◡<◍)。✧♡