https://blog-lampetty-net.web.app/tags/javascript/ Recent content in JavaScript on oinume journal Hugo ja Tue, 07 Sep 2021 18:09:10 +0900 https://blog-lampetty-net.web.app/posts/javascript-operators-and-syntaxes/ Tue, 07 Sep 2021 18:09:10 +0900 https://blog-lampetty-net.web.app/posts/javascript-operators-and-syntaxes/ <p>JavaScript / TypeScript では一見すると「これなんだ？」という記号の演算子や構文がよく出てくるので、自分用の備忘録としてメモしておく。<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators">式と演算子 - JavaScript | MDN</a>には演算子の一覧のページがあるため、わからない記号が出てきたら以下のページを見るとだいたい載っているはず。</p> https://blog-lampetty-net.web.app/posts/typescript-destructuring-assignment/ Tue, 10 Aug 2021 10:08:43 +0900 https://blog-lampetty-net.web.app/posts/typescript-destructuring-assignment/ <p>最近仕事でfrontendの開発を少しずつやるようになったのだけど、TypeScriptはGoに比べて演算子や記号を使う記法が多くて読むのに一苦労する。なので「これなんだろう？」と思ったやつをメモしておく。</p> https://blog-lampetty-net.web.app/posts/webpack-config-externals/ Fri, 16 Feb 2018 09:00:00 +0900 https://blog-lampetty-net.web.app/posts/webpack-config-externals/ <p>webpackのconfigには <code>externals</code> というものがある(<a href="https://webpack.js.org/configuration/externals/">ドキュメント</a>)。このexternalsで定義したライブラリは、importで参照していてもwebpackでビルドして生成される成果物(bundle.js)には含まれなくなるというもの。</p> <h3 id="自分のユースケース">自分のユースケース</h3> <ul> <li>もともとReactを使っていないプロジェクトで一部のページだけでReactを使っていきたい</li> <li>全ページでReactを使うわけではないので、bundle.js には含めたくない(サイズ削減)</li> <li>Reactが必要なページのみHTML上の <script> タグでロード</li> </ul> <h3 id="webpackconfigjs">webpack.config.js</h3> <p>externalsでreactを除外するよ、ということを定義すれば bundle.js には含まれないようになる。webpackの設定ファイルはこんな感じ。</p> https://blog-lampetty-net.web.app/posts/es6-intro-with-babel/ Mon, 21 Mar 2016 22:57:27 +0900 https://blog-lampetty-net.web.app/posts/es6-intro-with-babel/ <p>This is a just memo for me who is a beginner of front-end development.</p> <p>First of all, install nodejs v4.4.0.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code data-lang="fallback"><span class="line"><span class="cl">$ brew install homebrew/versions/node4-lts </span></span><span class="line"><span class="cl">$ node -v </span></span><span class="line"><span class="cl">v4.4.0</span></span></code></pre></div><p>Put <code>package.json</code> into a current directory. DO NOT forget to add <code>babel-preset-es2015</code>.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code data-lang="fallback"><span class="line"><span class="cl">{ </span></span><span class="line"><span class="cl"> &#34;name&#34;: &#34;hello&#34;, </span></span><span class="line"><span class="cl"> &#34;version&#34;: &#34;1.0.0&#34;, </span></span><span class="line"><span class="cl"> &#34;engines&#34;: { </span></span><span class="line"><span class="cl"> &#34;node&#34;: &#34;4.4.0&#34;, </span></span><span class="line"><span class="cl"> &#34;npm&#34;: &#34;3.8.2&#34; </span></span><span class="line"><span class="cl"> }, </span></span><span class="line"><span class="cl"> &#34;devDependencies&#34;: { </span></span><span class="line"><span class="cl"> &#34;babel-cli&#34;: &#34;^6.0.0&#34;, </span></span><span class="line"><span class="cl"> &#34;babel-preset-es2015&#34;: &#34;^6.6.0&#34; </span></span><span class="line"><span class="cl"> } </span></span><span class="line"><span class="cl">}</span></span></code></pre></div><p>Run <code>npm install</code></p> https://blog-lampetty-net.web.app/posts/wp/270/ Thu, 12 Feb 2009 15:02:59 +0900 https://blog-lampetty-net.web.app/posts/wp/270/ <p>Webサイト高速化の手法の一つとして、Steve Souders さんが唱えている&quot;<a href="http://developer.yahoo.com/performance/rules.html#minify">Minify JavaScript and CSS</a>&quot; (JavaScriptとCSSを圧縮せよ) というのがあります。若干今更感がありますが、ちょっとでも高速化するために、このブログで使用しているiNoveテーマのJSファイルを<a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a>を使って圧縮してみました。</p>