requireとimportの違い
この記事はMojirageアドベントカレンダーの3日目の記事です。
matatsuna.hatenablog.com
node書いてるとよく一番上に書いてあるパッケージの読み込みをするやつがrequireとimportです。
require
node自体がサポートしてるパッケージの読み込み方(厳密にはCommonJSの仕様)
requireとimportの書き方の違い
読み込み
require
var hoge = require('hoge');
var hoge = require('hoge').hoge;
import
import hoge from 'hoge';
import {hoge} from 'hoge';
エクスポート
require
module.exports = hoge; exports.hoge = hoge;
import
export default hoge;
export{ hoge };
npm,yarn,package.jsonとは
この記事はMojirageアドベントカレンダーの2日目の記事です。
matatsuna.hatenablog.com
npm
www.npmjs.com
nodeを使うと便利になる的なことは前回軽く触れました。そのときに使うパッケージ(ライブラリ)をインストールするために使うのがnpmです。
npm自体もnodeで出来ています。
nodeをインストールするとnpmも自動でインストールされるはずです。
具体的な使い方はQiitaとか参考にしてほしいのですが、 npm コマンドでライブラリ関係のダウンロード、更新をするということです。
npmにはパッケージをグローバルインストールとローカルインストールする2つの方法があります。
グローバルインストール
PCのどこからも使える
ローカルインストール
コマンドを叩いたディレクトリで使える
基本的にローカルインストールすることをオススメします。
ただ、すぐにサーバーが立てられる、http-serverのようなものをグローバルインストールしておくと、便利です。
yarn
yarnpkg.com
基本的な機能はほとんど同じなんですが、npmよりも軽く賢いのがyarnです。
ガッツリ使ってはいないのですが、ちょっとだけコマンドの叩き方がnpmとは違うそうなので注意が必要です。
package.json
package.jsonは、nodeなどを使ったプロジェクト(プログラム)についての情報を書き込むファイルです。
npm init して、質問に答えて行くと作られます。
npmがライブラリをインストールするものと説明しましたが、インストールしたものの名前がpackage.jsonに自動的に書き込まれます。
githubからダウンロードしてきたプロジェクトにはライブラリは含まれていないので、 npm install してライブラリ復元のとき使われます。
また、作者情報やライセンス、実行コマンド一覧とかも書けるので使えるようになるとかなり便利です。
qiita.com
scriptsに書いた内容はnpm run hogeとかで実行できるので、長い引数をもってたり、覚えてられない実行コマンドとかを書いて保存しておくと便利です。
dockerのときにとても助かってます。
JavaScriptとNode.js
この記事はMojirageアドベントカレンダーの1日目の記事です。
matatsuna.hatenablog.com
JavaScriptとは？
超簡単にいうとWebブラウザで動くプログラミング言語です。
JavaScript は Web のクライアントサイドで実行され、イベントが発生したら Web ページがどのようにふるまうかを設計およびプログラムするために使用できます。JavaScript は学習が容易かつ強力なスクリプティング言語であり、Web ページの動作を制御するために広く使用されています。
一切何も使わずにブラウザで開けば動くので、ゴリゴリと書いていくのもありなのですが、ライブラリのちからを借りるとちょっとのコードでスゴイことが出来たりします。
個人的にお世話になったのはjQueryとprocessing.jsです。
この２つをベースに作ったものが以下のものです。
matatsuna.hatenablog.com
matatsuna.hatenablog.com
ただ、クラスを使わずに関数だけJavaScript(以下JSと略す)を永遠に書いたり、Processingっぽいコードも一緒に書くのは流石に疲れます。
Mojirageも開発当時はp5.jsというprocessingに似た記述ができるライブラリを使ってました。
Node.jsとは？
クライアントで実行するJavaScriptをPHPのようなサーバー側でも動かすというものです。Node.js(以下nodeと略す)はサーバーサイドで動かせるだけではなく、npmという強力なパッケージ管理システムの恩恵を受けることが可能になります。
パッケージ管理システムはpythonのpipみたいなものです。ライブラリをインストールする感覚に近いです。
しかし、npmはあくまでnodeで動くようになっているので、ブラウザで実行させることが出来ません。ここで登場するのが、Browserifyやwebpackなどです。これについては次回以降紹介します。
JavaScriptを学習するにあたって
Processingなどを使ってプログラミングの基礎を学習していれば、以下のサイトを見るとなんとなくわかると思います。
developer.mozilla.org
また、言語の仕様を知れば知るほど、jsの複雑さを感じることになると思いますので、一読しておくことをオススメします。自分もまだ、理解しきれてません。
developer.mozilla.org
ECMAScript(エクマスクリプト)ってなに？
jsは1つの団体や会社が単独で作ってるわけではありません。実装はあくまで、それぞれのエンジン、ブラウザ開発をしている団体や会社によります。(これが原因でブラウザによって動かなかったりサポート外とかになる)
jsの指針になっているのがECMAScriptです。js=ECMAScriptと思っていいのでは？(個人的な意見)
ECMAScriptも数年かけて、仕様がアップデートしています。それを取り入れたjsを動かす各ブラウザエンジンのおかげで嬉しい関数が書き方が使えるようになってます。
リファレンスはどこ？
HSPならF1、PHPならphp.netとかですけど、JavaScriptはコンパイラをどこかでダウンロードするわけでもないので、明確な説明書がありません。そこで参考となるのは、mozillaのMDNです。
mozillaはあのFirefoxを作ってるとこです。ブラウザを作ってる会社だからこそかもしれませんけど、ドキュメントの量も使い方の例も豊富です。大変良くお世話になってます。
最後に
jsを完璧に理解しきってるわけではないですが、これから書く記事も含めて、だれかの理解の助けになってくれれば嬉しいです。
