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
JSことはじめ
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
YO
November 30, 2018
Programming
0
36
JSことはじめ
YO
November 30, 2018
Tweet
Share
More Decks by YO
See All by YO
Gitおしえるやつ
uyo
0
47
How to become to friends with Vim
uyo
0
51
Other Decks in Programming
See All in Programming
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
560
AIによる高速開発をどう制御するか? ガードレール設置で開発速度と品質を両立させたチームの事例
tonkotsuboy_com
7
2.3k
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
120
並行開発のためのコードレビュー
miyukiw
0
120
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
140
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
1.1k
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
3.9k
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
5
450
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
nash_efp
1
970
Fragmented Architectures
denyspoltorak
0
150
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
200
Featured
See All Featured
Navigating Team Friction
lara
192
16k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
730
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
250
Designing for Timeless Needs
cassininazir
0
130
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Are puppies a ranking factor?
jonoalderson
1
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.7k
WCS-LA-2024
lcolladotor
0
450
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
110
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
ラッコキーワード サービス紹介資料
rakko
1
2.3M
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
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とか • 開発時のコードと実際に使用されるコードが異なるそれらを変換して効果的にデプ ロイしてブラウザが理解できる形にするのがビルドツール • 依存関係とかそういうのまとめる • ファイルの圧縮とか
• なんかいろいろできる • 色々しらべてみてね
これで君もスタート地点だね (⋈◍>◡<◍)。✧♡