読者です 読者をやめる 読者になる 読者になる

JS入門 #002 script要素はどこに記述するべきか

いきなりちょっとマニアックな話題ですが、今回はscript要素を記述する場所について書いていきたいと思います。

script要素を記述する場所

記述する場所はざっくり3つあります。

  • body要素の配下の</body>閉じタグの直前
  • head要素の配下
  • 外部ファイルに記述する
body要素の配下の</body>閉じタグの直前

ブラウザは、スクリプトの読み込みや実行が完了するまで、以降の描画を行いません。 このためJSの処理はbody要素の末尾に配置することで、ページの描画速度を落とすことを防ぐことができます。

head要素の配下

JSでは関数を呼び出す、script要素よりも、関数定義のscript要素を先に記述しなければいけないので、head要素の配下で、事前に関数を読み込む必要があります。 その場合は、head要素の配下に配置しましょう。

外部ファイルに記述する

上記の記述方法もありますが、開発時には 外部ファイルに記述して、そのファイルをインポートするやり方が一般的です。

この記述方法には - コードの再利用がしやすい - ファイルの見通しが良くなる というメリットがあります

しかし、コードが非常に短い場合は上記の2つの記述方法の方が良い場合もあるので、状況に応じて使い分けましょう!(自分に言い聞かせている)

JS入門 #001 JavascriptでHello world

Javascript入門者向けに、実際にJavascriptを動かしてみることを目標にやっていきたいと思います。

以下のファイルを作成し、ブラウザにドラッグしてください!

hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
window.alert('Hello World!');
</script>
<noscript>Javascriptが利用できません</noscript>
</body>
</html>

するとこんなダイアログが表示されます!

f:id:stivan:20170203013847p:plain

このようにjavascriptを動かすことができます。 今回は動かしてみることが目標ですが、少しコードの補足をしていきます。

script要素

<script type="text/javascript">
// JSのコード
</script>
  • script要素はHTMLファイルにJSのコード組み込む役割を持っている
  • type属性はスクリプトの種類を表す(text/javascriptがデフォルト)

window.alert

window.alert('Hello World!');

指定された文字列をダイアログに表示する。

お疲れ様でした!

Railsアプリにxlsxダウンロード機能を実装する

今回はGem rubyXLを使ってxlsxダウンロード機能を実装していきます。

準備

rails new
rails new xlsx_download
rubyXLをインストール

Gemfileに追記

gem 'rubyXL'
$ bundle install
rake db:create
$ rake db:create

.

ユーザデータを用意する

モデルとコントローラーを作成
$ rails g model user name:string gender:string email:string birthday:date
$ rails g controller users index

マイグレーションファイルはこんな感じ

class CreateUsers < ActiveRecord::Migration[5.0]
  def change
    create_table :users do |t|
      t.string :name
      t.string :gender
      t.string :email
      t.date :birthday

      t.timestamps
    end
  end
end

マイグレーションする

$ bundle exec rails db:migrate

.

ダミーデータを作成

今回はダミーデータの作成方法は詳しく説明しません
こちらを参考にしました http://qiita.com/saino-katsutoshi/items/29c0918e489b27df637a

faker、forgeryをインストール

gem 'faker'
gem 'forgery'
$ bundle install

db/seeds.rbに以下を追記してrake db:seed

100.times do
  User.create(name: Forgery::Name.full_name, gender: Forgery::Personal.gender
, email: Forgery::Email.address, birthday: Faker::Date.backward(10000 + rand(1000)))
end
bundle exec rake db:seed

これで100件のユーザデータを作成できました

.

xlsxダウンロード機能を実装する

users#indexをルートに設定する

config/routes

root 'users#index'

.

MIME Type の追加

config/initializers/mime_types.rb

Mime::Type.register "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", :xlsx

ちなみに追記しないとこんな感じでエラーになる

f:id:stivan:20170202005804p:plain

.

xlsx出力するメソッドを作成

app/models/user.rb

def self.to_xlsx(users)
  workbook = RubyXL::Workbook.new
  worksheet = workbook[0]

  %w(名前 性別 EMAIL 生年月日).each_with_index do |val, idx|
    worksheet.add_cell(0, idx, val)
  end

  users.each.with_index(1) do |user, row_idx|
    %w(name gender email birthday).each_with_index do |key, col_idx|
      worksheet.add_cell(row_idx, col_idx, user.__send__(key))
    end
  end

  workbook.stream.read
end

.

コントローラに設定

app/controllers/users_controller.rb

def index
  @users = User.all

  respond_to do |format|
    format.html
    format.xlsx do
      send_data User.to_xlsx(@users),
        filename: "ユーザ一覧.xlsx"
    end
  end
end

.

ダウンロードリンクを追記

app/views/users/index.html.erb

<%= link_to 'ユーザ一覧ダウンロード', root_path(format: :xlsx) %>

.

これで完成です!

トップページにアクセスしてリンクを押すとダウンロードできるはずです

f:id:stivan:20170202005926p:plain

こんな感じ

f:id:stivan:20170202010037p:plain

お疲れ様でした!

Linuxとは

UNIXLinux

Linuxフィンランドの学生がUNIXを参考に作ったOS
UNIXは高額だったため、当時大学が研究機関しか使えなかった。  その中、Linuxはソースの一般公開し、すごい勢いで普及していった。

.

オープンソースとライセンス

Linuxソースコードがネット上で公開され、誰でも開発に参加できるもの

.

オープンソースソフトウェアは何らかのライセンスにしたがって公開されている。  もっとも有名なのはGPLライセンス

.

カーネル

OSの中核になるプログラム
この部分Linuxである。一般的にLinuxカーネルと呼ばれている。

.

ディストリビューション

ユーザーが日常用途に使えるように、Linuxカーネルと、多数のオープンソースソフトウェアを組み合わせたもの
様々な種類のディストリビューションが配布されるようになった

.

CentOS

サーバー用のLinuxでよく使われているディストリビューション
無料でサポートはないが有料のRed Hat Enterprise Linux同等の質を誇る。

Linux初心者がCentOS7でサーバー構築するまで

目標

サーバーを構築して、簡単たWEBページをアップする

.

目的

  • ターミナルに強くなる (作業効率UP)
  • 環境構築時の問題解決能力を高める
  • 「サーバー」と口にすることは多くなったが、どいうものかわかってないので、興味がある

.

学習開始時のスペック

プログラミング歴5か月 今まではRuby on RailsやReact.jsでの開発がメイン Linuxコマンドはcdlscpしか使わない(使えない)

PC

MacBook Air (13-inch, Early 2015)
OS X 10.11.6 (15G31)
プロセッサ : 1.6 GHz Intel Core i5
メモリ : 8 GB 1600 MHz DDR3

.

学習にかかった時間

目標 20h

.

目次

  • Linuxとは
  • CentOSのインストール
  • 基本的なコマンド
  • ネッワークの基本
  • サーバー構築する
  • Webページをアップする

React.js入門Ⅰ

今回の目標

・できるだけ簡単にReactに触れてみる ・基本中の基本の「コンポーネント作成→HTMLに変換→表示」の部分を理解する ・文字の表示とCSSを当てる

用意するもの

では、さっそくHello Worldを表示から

まずは新規のhtmlファイルを作成して、以下のコピペしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  // idを付けてdivを宣言してます
  <div id="content">
  </div>

  // reactとreact-domのライブラリを読み込む
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

  // babelを読み込む
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>

  <script type="text/babel">

  </script>

</body>
</html>

Hello,Worldを表示するために、divにid付けて宣言して, reactのライブラリを読み込んで、JSXとかES6を使いたいのでBabelを読み込むみたいな感じです。
JSXとES6はjavascriptの拡張構文で、JSXとかES6の記法で書いたものを、Babelが標準のjavascriptコンパイルしてくれます。

実際にReactを使って書いていきます。

index.html

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, World</h1>,
    document.getElementById('content')
  );
</script>

このように追記して、ブラウザにindex.htmlを読み込ませればHello, Worldが表示できるはずです。

説明していくとReactDOM.render()はコーポネントをHTMLに変換するメソッドで

<script type="text/babel">
  ReactDOM.render(Reactコーポネント、表示場所);
</script>

みたいな感じで書きました。

コーポネント?<h1>Hello, World</h1>ていうhtmlをそのままid="content"のdiv内に渡してるように見えますが、 <h1>Hello, World</h1>はJSXで書かれたもので、Babelでコンパイルしてみると

React.createElement(
  "h1",
  null,
  "Hello, World"
);

// ↓ここでいろいろ試せる
// https://babeljs.io/repl/

となる。お察しの通りこのこのReact.createElement()というメソッドがReactコンポーネントを作成するメソッドで 引数の意味はReact.createElement(HTMLのタグ名,要素の属性,要素の内容);です。

JSXを使う意味

今のところ自分がわかっているのは、

  • 短くかける
  • htmlぽくかける(書きやすい)
  • ネストさせても見やすい(一番効果を感じるところかも)

結論綺麗にかけるてことです。
JSX記法に関しては、別の記事で詳しく書く予定。

CSSを当ててみる

コンポーネントにクラス名を指定する

Reactコンポーネントcssを当てるのはいくつか方法があると思うのですが、1つ目は従来のHTMLのようにclassを付けて、cssファイルを読み込む方法があると思います。
自分もこの方法やったことないので実際に今からやっていきたいと思います。

<h1 className="text">Hello, World</h1>

className=""でクラス名を指定してます。

次に少しご法度ですが、<head>内にcssを定義します。

<head>
  <!-- 省略 -->
  <style type="text/css">
    .text { color: blue; }
  </style>
</head>

これで、Hello, Worldが青くなるのがわかるはずです

scriptタグ内でCSSを定義する

CSSJavaScriptのオブジェクトにして、コンポーネンのstyleに読み込ませます 。 styleというオブジェクトを定義して、style={}cssを読み込みます。 変数は{}でくくって呼び出します。

const style = {
  container: {
    color: 'blue',
    fontSize: 32
  }
};

ReactDOM.render(
  <h1 style={style.container}>Hello, World</h1>,
  document.getElementById('content')
);