Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります

はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ

数週間前に、JavaScriptが実際どのように動いているかを掘り下げて紹介する記事の連載を始めました。JavaScriptがどのような機能で構成されていてそれらがどのように組み合わさって機能していくのかを知ることによって、さらに良いコードやアプリケーションを作ることができるのではないかと思ったからです。 連載の1回目では 、エンジンやランタイム、コールスタックについての概要を紹介しました。2回目となる今回は、Google V8 JavaScriptエンジンについて細かく説明していきます。また、より良いJavaScriptコードの書き方、すなわち私たちの開発チーム SessionStack がプロダクトを開発する際に意識しているベストプラクティスについても併せて紹介します。 概要 JavaScriptエンジン とはJavaScriptコードを実行するプログラムまたはインタプリタのことです。

どうも、まさとらん（@0310lan）です！ 今回は、基本的なJavaScriptプログラミングが出来るようになった人向けに、さらなるステップアップを目指せる「YouTubeチャンネル」を厳選してまとめてみました！ 海外のプログラミング系YouTube動画は、有料でもおかしくない「質」の高さと豊富なコンテンツ量に魅力があり、確実にレベルアップが期待できるのでぜひ参考にしてみてください。 ■JavaScriptの勘所を勉強できるYouTubeチャンネル！ 【 Fun Fun Function 】 プログラミング動画とは思えない超ハイテンションなノリで、JavaScriptを学ぶうえで欠かせない勘所を分かりやすく教えてくれるのがコチラのチャンネル！ 「Spotify」の開発にも携わっていたというプログラマーの彼は、得意のJavaScript言語を分かりやすく伝えることに情熱を注いでおり、それは

最近、関数型プログラミングの基礎知識を学ぶことに時間を割いています。 きっかけは、「関数型プログラミングの基礎 JavaScriptを使って学ぶ」という本でした。 jsstudy.hatenablog.com Haskellに寄り道 「関数型プログラミングの基礎」を読んでいると、ちょいちょい「Haskell」の話が出てきます。 以前、話題になってたのでHaskellの本を読んでみましたが、そのときはあまりよく分かりませんでした。（使う場面もなかったですｗ） 改めて、「Haskellって何だったんだろう？」と思って読み返してみると、「なるほど、そういうことだったのか～」と新たな気付きが得られました。 自分のスキル不足のため、Haskellで実用的なアプリを作る機会はないだろうけど、それでもHaskellは良くできたパズルみたいなかんじで、ちょっとしたコードを書いて練習してみるだけでも楽しめま

「関数型プログラミングの基礎 JavaScriptを使って学ぶ」のコードをVisual Studio Code上で試そうとしたら、エラーメッセージが表示されて動きませんでした。 原因は、Node.js v0.12.0を使っていたのですが、「--harmony」オプションを有効にしてNodeを動作させないと、JavaScript ES2015のアロー関数（=>）が使えないことでした。 解決策の1つは、Node.jsのバージョンを上げることでした。 以下、解決方法をメモ。（備忘録） アロー関数とは？ Node.jsの歴史 --harmonyオプション Node.jsのバージョンアップ エラー解決 アロー関数のサンプルコード Node.js v0.12.0（harmonyモードなし）で、ES2015のアロー関数が動かない！ Node.js v6.11.2で、ES2015のアロー関数が動いた！ ま

JavaScriptの勉強で、ES2015の「アロー関数」を使う必要が出ました。 Visual Stuidio Code＋Node.jsでES2015のJavaScriptコードを動かしていますが、ブラウザーでES2015はもうちゃんと動くのでしょうか？ Google Chromeなど、ブラウザーのES2015対応状況を調べてみました。 最新のモダンブラウザーは、ほぼES2015に対応してましたが、「末尾再帰の最適化」という機能だけ未対応のブラウザーが多かったです。（2017年8月現在） ECMAScript6（ES6、ES2015）のブラウザー対応一覧表 末尾再帰とは？ 末尾再帰の最適化 末尾再帰の解説記事 関数型プログラミング まとめ ECMAScript6（ES6、ES2015）のブラウザー対応一覧表 各ブラウザーのES2015対応状況が一覧表になってました。 ECMAScript

JavaScriptの練習で、Node.jsを使っています。 Node.jsは、バージョンによって使える機能が違います。 Node.jsのバージョンの違い～Node.jsの歴史についてメモ。（備忘録） Node.jsのバージョン一覧 バージョンによる違い 安定版（LTS） harmonyモード（ハーモニーオプション） Node.jsのバージョン変更 (1) コマンドプロンプト（黒い画面）を起動します。 (2) インストール可能なversionの一覧を表示します。 (3) 指定したversionをインストールします。 (4) 指定したversionを使用します。 (5) Node.jsのバージョンを確認します。 まとめ Node.jsのバージョン一覧 Node.jsの公式サイトで、バージョンの一覧が公開されていました。 リリース一覧 | Node.js 「Node.js 6.x」、「Node

Node.js Releases Major Node.js versions enter Current release status for six months, which gives library authors time to add support for them. After six months, odd-numbered releases (9, 11, etc.) become unsupported, and even-numbered releases (10, 12, etc.) move to Active LTS status and are ready for general use. LTS release status is "long-term support", which typically guarantees that critical

Windows7でNode.jsを使い、JavaScriptの練習をしています。 コマンドプロンプト（黒い画面）で、Node.jsの対話モードを起動＆終了する方法をメモ。 Node.jsのインストール Node.jsの対話モード（REPL）とは？ Node.js 対話モードの起動 Node.js 対話モードの終了 まとめ Node.jsのインストール 前提：WindowsパソコンにNode.jsをまだインストールしてない場合は、インストールしておきます。 （参考） nodistでWindowsにNode.jsをインストールする 【読書メモ】 - JavaScript勉強会 nvm（Node Version Manager）でWindowsにNode.jsをインストールする - JavaScript勉強会 Node.jsの対話モード（REPL）とは？ JavaScriptの実行環境の１つであ

概要 ES2015で特定の形で関数呼び出しがされている場合に末尾呼び出し最適化が行われるよう定められたが、 パフォーマンスや、デバッグなどの実装上の問題が浮上したため、それを解決するための新たな構文がV8で実装されたが、その後廃止された 説明 具体的には、strictモードの是非を問わず、「 return continue fn() 」という形での呼び出しについて最適化が有効になる。 （詳細は明示的でない末尾呼び出し最適化の記事をご覧ください） 最適化が効く例： function fn( n ) { 'use strict' if ( n <= 0 ) { return 'done!' } return continue fn( n - 1 ) } fn( 1e6 ) // "done!" 最適化が効かない例： function fn( n ) { 'use strict' if ( n

概要 ある関数Aから別の関数Bを呼び出すとき、処理系は後で戻って来れるように一旦Aの状態を保存し、関数Bの処理に入る。 これが問題になるのは再帰の時で、数万回程度の再帰でスタックが一杯になり、エラーとなってしまう。 しかし、もし関数B呼び出しの際に、関数Aに戻ってきて処理を続ける必要のない形で呼びだされていれば、 状態の保存を省略して関数Bに移行する最適化が可能であり、ES2015でその詳細が定義されることとなった。 例 具体的には、strictモードの関数で、「 return fn() 」という形での呼び出しについて最適化が有効になる。 最適化が効く例： function fn( n ) { 'use strict' if ( n <= 0 ) { return 'done!' } return fn( n - 1 ) // この関数がする処理はこれ以上ない } fn( 1e6 ) //

はじめに ES6 (EcmaScript 6)を試そうと、Babelのドキュメントを読んでいたところ、末尾呼び出し（Tail Call）の最適化をしていることにびっくり。公式リリース（2015年6月）から３ヶ月あまり経ってはいますが、ES6が末尾呼び出し最適化を仕様としてサポートしていることをようやく知りました。 現状で末尾呼び出し最適化をサポートしているブラウザはなく（ブラウザやaltJSなどのES6互換表を参照）、唯一、ES6からES5へのトランスパイラであるBabelのみが部分的（直接的な末尾再帰のみ）ではありながらサポートしているようですね。 今回の記事では、来たるES6時代（いまさらの感はありますが）に備えて、末尾再帰とその最適化について簡単に解説した上で、Babelを利用して実際にJavaScriptでの末尾再帰の最適化を実験してみたいと思います。 ざっくり概要 再帰関数 は関

JavaScriptには、再帰が実装されている。 再帰とは、関数のなかでその関数自身を呼び出すこと。 下記のrecursion()では、再帰を行っている。 function recursion(num, limit){ console.log(num); if(num === limit){ return; }; num++; recursion(num, limit); }; recursion(0, 10);を実行すると、0から10の数字が順番に表示される。 仮引数numがlimitに到達するまでrecursion()は呼ばれ続ける。 だが、limitの数を大きくすると、途中でエラーになりプログラムが終了してしまう。 function recursion(num, limit){ console.log(num); if(num === limit){ return; }; num++

AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach

※仕様の細かいツッコミはご勘弁を…。 オブジェクト指向で解く みんな大好きオブジェクト指向では、物単位で考えます。言わずもがなですね。やり方はいろいろあると思いますが、まずお弁当という単位で集めると 唐揚げお弁当クラス 状態 主食名 唐揚げ個数 値段 … 振る舞い： つまみ食い() 値段取得() 唐揚げ個数取得() … のような感じで、弁当に必要な要素と必用な処理をひとまとまりにして扱うというのがオブジェクト指向です。 お弁当スーパークラスを作って継承で唐揚げ弁当クラスを、というように拡張を考えた設計にするというのも汎用性が必要な場合は良いと思います。 では早速コードにしてみましょう。 言語はJavaScriptにしています。 (function(){ window.onload=function(){ ////////////////// // クラスの定義 // ///////////