コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

大怪獣アンギュラーがやってきた

AngularJS
大怪獣アンギュラー

身長：50メートル
体重：25000トン
とある核実験施設から生まれたとされる怪獣。もとはトカゲの一種だったのではないかとされている。体中に無数の猛毒の棘をもち、自分より大きな敵をも簡単に倒してしまう。ナパーム弾にも耐える頑丈な皮膚をもち、ヒューストンの街を恐怖に陥れた。




という妄想はこのあたりにして、本題に入りましょうかね。

Angular.jsでもさわろうかと思います

はい、というわけでアンギュラーやっていきます。

AngularJS
AngularJS（アンギュラージェイエス）、または Angular は、Googleと個人や企業のコミュニティによって開発されている、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークである。MIT Licenseでライセンスされたフリーソフトウェアである。シングルページアプリケーションの開発において直面する多くの問題に取り組んでいる。JavaScriptコンポーネントは、クロスプラットフォームなモバイルアプリ開発用フレームワークであるApache Cordovaを補完する。クライアントサイド用のMVCおよびMVVMアーキテクチャを、リッチインターネットアプリケーションで一般的に用いられるコンポーネント群とともに提供することにより、そのようなアプリの開発とテストを簡単にすることを目的としている。

なんだか仰々しいこと書いてありますがそういうことです。ざっくりというとJavaScript製のフレームワーク（よく使いそうな機能をまとめたから使ってねセット）って感じです。一般にMV*フレームワークなんて言われたりするらしいですよ。

公式
AngularJS — Superheroic JavaScript MVW Framework


さあ、といったわけで早速使っていきましょう。

これが何に使えるかというと……。例えばブログやなんかの冒頭に「どうも～の〇〇です。」、文のおわりに「～いかがでしたでしょうか？～って～なんですね～♪機会があればぜひ使ってみてください！」のようなテンプレ文章をこれでもかとねじ込むブログがあったとします。毎日毎日書くとなった時にコピペして、貼り付けってしんどいですよね。そんな時にこれです。こうしたフレームワークを使えば毎日のブログ記事で使うテンプレ文章を作り置きして流し込むだけで使えるようになります。これはお得。

作っていきます

というわけで、そんなブログの前口上テンプレートみたいなの作っていきます。

HTMLガワ

<div ng-app="myApp">
    <div ng-controller="greetCtrl">
        {{greeting}}{{name}}です。
    </div>
</div>

JSガワ
※ Angular 1.4.8を使用

var app = angular.module('myApp', []);
app.controller('greetCtrl', function ($scope){
    var greet = ["どうも","やっほー","へいめーん"];
    $scope.greeting = greet[Math.floor( Math.random() * greet.length )];
    $scope.name = "山田";
});

できました。これを実行するとこんな感じです。
f:id:andron:20180222201134p:plain

今回作成したやつは「どうも」だったり、「やっほー」だったりをランダムで表示させます。ソースがごちゃごちゃしてますが、HTMLの方に書いてある{ }の部分の単語を中心に追っていけば何やってるか理解できると思います。やってることは表示に関わる文字部分をJavaScript側に預けたといった感じです。


本当は参考書とかによく書かれている「ToDoリスト」を作るとかの方がフレームワークの構造理解の勉強になって良いんですけどね。そちらをやるのはネタとして面白く感じなかったので気が向いたらJSFiddleとかに捨て置くと思います。

あとがき

こんな文章書きましたけど、驚くべきことに僕テンプレねじ込んだりとかやってないんですよ。ブログのネタはテンプレ化してきてますけどね……。毎日どういった方向性で切り込んでネタを書いていこうかと試行錯誤する日々です。

[トップへ]