えんじにあ ときどき くらいまー

個人的な技術メモとかボルダリングのこととかなんか色々書けたらいいなぁ

Riot.jsを使ってSPAサイトを作ってみる 基礎編 Section1 ～Riot.jsの使い方～

Riot.js フロントエンド開発

はじめに

前回の記事から8ヶ月近くが経とうとしております。
みなさまいかがお過ごしでしょうか。

前回書いてた『Gulpを用いたフロントエンド開発環境の構築』の次の記事も結構下書き書いていたのですが、途中で保存したまま放置してました。。

久しぶりに書くので、気を取り直して新しい記事を書こうかと思います。
(そのうち前の記事の続きも書きますよ。。きっと)

新しく書く記事の内容ですが、最近勉強を始めた Riot.js を用いたSPAサイトを構築する方法を勉強しながら記事にしていきたいと思います。
自分もまだ開発環境の最適化をしていないので、今回は環境構築に関しては触れません。

とりあえず簡単に動くものを作っていきたいと思います。

シリーズ

目次

  • はじめに
  • シリーズ
  • 目次
  • 空のHTMLファイルを作ろう
  • Riot.jsを読み込む
  • カスタムタグを作成しよう
  • カスタムタグをマウントしよう
  • 実行しよう
  • まとめ

空のHTMLファイルを作ろう

とりあえず、空のHTMLファイルを作成します。

以下のファイルを作成してください。

  • riot_spa.html
<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content="Riot.jsでSPAサイトを構築する方法" />

    <title>Riot.jsを使ってSPAサイトを作ってみる</title>

  </head>

  <body>
  </body>

</html>

Riot.jsを読み込む

今回はローカルでプリコンパイルを行わないので、インブラウザコンパイルのできる、コンパイラ入りのRiot.jsを使用します。
バージョンは最新(2016/11/21時点)の 2.6.7 を使用します。

先ほど作成したhtmlファイルの head に以下を追記してください。

  • riot_spa.html
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.7/riot+compiler.js'></script>
続きを読む

Gulpを用いたフロントエンド開発環境の構築 基礎編 Section1 ～Gulpの準備～

Gulp.js Node.js フロントエンド開発 環境構築

はじめに

最近のマイブームがフロントエンド開発なので、すぐに開発スタートできるテンプレート作ろうと思い立ちました。
というわけで、Gulpを使ってフロントエンド開発環境を構築していきます。
ちゃんとこれ最後まで連載するのか。。。

※本連載ではWebのフロントエンド開発環境の整備をしていきます(Web以外でも使えるけど、そういう体で)。

シリーズ

目次

  • はじめに
  • シリーズ
  • 目次
  • Node.jsのインストール
  • npmのインストール
  • Gulp.jsのインストール
  • gulpfile.jsの作成
  • まとめ

Node.jsのインストール

下記サイトにアクセスし、INSTALLをクリックしてインストーラーをダウンロードする。
ダウンロードしたインストーラーを起動してインストールする。
Node.js

インストールが完了したらコマンドプロンプトを起動し、以下のコマンドを実行する。

node -v

バージョン番号が表示されればインストール完了。

続きを読む

Node.js環境構築

Node.js

はじめに

Node.jsを最近使いはじめたので、軽く知識をまとめておこうと思います。

目次

  • はじめに
  • 目次
  • そもそもNode.jsとは？
  • Node.jsのインストール
  • npm
    • npmで覚えるべき3つのコマンド
      • npm init
      • npm install
      • npm run
  • Gulp
  • まとめ

そもそもNode.jsとは？

  • サーバサイドJavaScriptの実行環境。
  • Google Chrome用JavaScript実行エンジン(V8)で動作する。
  • 接続毎にプロセス生成とメモリ割り当ては行わず、それぞれの接続がNode.jsのプロセス内で実行されるイベントを起動する。
  • ロックが許可されないため、I/O処理をブロックしない(デッドロックは発生しない)。
    • 多数の同時接続を処理することが可能。
  • ノンブロッキングI/Oを最奥している。
    • コストの掛かるI/O処理を非同期で実行するのが特徴。

Node.jsのインストール

  1. https://nodejs.org/en/ にアクセスして、インストーラーのダウンロード。
  2. ダウンロードしたインストーラー実行し、任意のディレクトリに展開する。
  3. インストールが完了したら終了。npmコマンドが使用できるようになっている。
続きを読む

このブログについて

その他

読んでる人いないと思いますが、こんにちは。

エンジニアしてます。20代も終盤になってきました。

個人的な技術メモとかボルダリングのこととかなんか日常のこととか書こうかなと思って登録して3年弱経ちました。

そろそろなんか書こうと思い本記事を書いている次第です。

プロフィールにも書いてありますが、本ブログに記載してある技術的な内容に関して質問されてもあんま答えられません。

技術内容も個人のなんとなくの解釈で書いておりますので、本記事の内容を参考にしてなにかしら不利益・不具合等発生しましても、責任は一切取りませんし、取れません。

これからぬるぬるとした記事を書いてく予定ですので、生温い目で見て下さい。

宜しくお願い致します。(´・ω・`)